diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css --- a/web/sidebar/community-picker.css +++ b/web/sidebar/community-picker.css @@ -20,10 +20,11 @@ } .footer { + display: flex; + flex-direction: column; border-top: 1px solid var(--community-drawer-lines); padding: 12px 0 12px 0; align-items: center; - display: flex; margin-right: 16px; } @@ -50,6 +51,16 @@ padding: 0; } +.plusIcon { + display: flex; + align-items: center; + justify-content: center; + background: var(--community-creation-btn-bg); + width: 30px; + height: 30px; + border-radius: 50%; +} + .settingsIcon { display: flex; align-items: center; diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js --- a/web/sidebar/community-picker.react.js +++ b/web/sidebar/community-picker.react.js @@ -62,6 +62,20 @@ [css.sideLineActive]: isSettingsOpen, }); + const isCommunityCreationButtonEnabled = false; + let communityCreationButton; + if (isCommunityCreationButtonEnabled) { + communityCreationButton = ( + +
+
+ +
+
Create community
+
+ ); + } + return (
@@ -76,6 +90,7 @@
+ {communityCreationButton}
diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -88,6 +88,7 @@ --community-settings-selected: var(--violet-dark-60); --unread-bg: var(--error-primary); --settings-btn-bg: var(--violet-dark-100); + --community-creation-btn-bg: var(--shades-black-80); --modal-bg: var(--shades-black-90); --modal-fg: var(--shades-white-60); --join-bg: var(--shades-black-90);