Various UI updates on permissions (#2765)

webapp/src/components/boardsSwitcher/boardsSwitcher.scss

@@ -7,11 +7,20 @@
         display: flex;
         flex-direction: row;
         background-color: rgba(var(--sidebar-text-rgb), 0.08);
+        color: rgba(var(--sidebar-text-rgb), 0.56);
         flex: 1;
-        padding: 6px;
+        padding: 6px 8px;
         gap: 6px;
         border-radius: 4px;
         cursor: pointer;
+        height: 28px;
+        align-items: center;
+        font-size: 12px;
+
+        &:hover {
+            background: rgba(var(--sidebar-text-rgb), 0.16);
+            color: var(--sidebar-text);
+        }
     }
 
     .CompassIcon.icon-magnify.CompassIcon {
@@ -19,10 +28,8 @@
     }
 
     .add-board-icon {
-        margin-left: 8px;
-        padding-top: 4px;
-        cursor: pointer;
-        font-size: 16px;
-        width: 16px;
+        margin-left: 4px;
+        width: 28px;
+        height: 28px;
     }
 }

webapp/src/components/boardsSwitcher/boardsSwitcher.tsx

@@ -12,6 +12,8 @@ import BoardSwitcherDialog from '../boardsSwitcherDialog/boardSwitcherDialog'
 import {Utils} from '../../utils'
 import {Constants} from '../../constants'
 
+import IconButton from '../../widgets/buttons/iconButton'
+
 type Props = {
     onBoardTemplateSelectorOpen?: () => void,
 }
@@ -63,12 +65,13 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
 
             {
                 Utils.isFocalboardPlugin() &&
-                <span
+                <IconButton
+                    size='small'
+                    inverted={true}
                     className='add-board-icon'
                     onClick={props.onBoardTemplateSelectorOpen}
-                >
-                    <AddIcon/>
-                </span>
+                    icon={<AddIcon/>}
+                />
             }
 
             {

webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.scss

@@ -9,6 +9,10 @@
         color: #484848;
     }
 
+    .toolbar {
+        padding: 4px;
+    }
+
     span {
         display: inline-block;
         height: 100%;

webapp/src/components/searchDialog/searchDialog.scss

@@ -119,18 +119,29 @@
 
             .MagnifyIcon {
                 position: absolute;
-                left: 4px;
-                font-size: 22px;
-                top: 6px;
+                left: 10px;
+                font-size: 18px;
+                top: 10px;
+                width: 20px;
+                height: 20px;
+                opacity: 0.48;
             }
 
             .searchQuery {
                 height: 40px;
                 font-size: 14px;
                 border-radius: 4px;
-                border: 2px solid rgb(var(--button-bg-rgb));
-                padding: 0 33px;
+                border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+                background: var(--center-channel-bg);
+                color: var(--center-channel-color);
+                padding: 0 34px;
                 flex: 1;
+                transition: border 0.15s ease-in;
+
+                &:focus {
+                    padding: 0 33px;
+                    border: 2px solid var(--button-bg);
+                }
             }
         }
     }

webapp/src/components/searchDialog/searchDialog.tsx

@@ -44,7 +44,7 @@ const SearchDialog = (props: Props): JSX.Element => {
             <div className='BoardSwitcherDialogBody'>
                 <div className='head'>
                     <h3 className='text-heading4'>{props.title}</h3>
-                    <h5 className='text-heading1'>{props.subTitle}</h5>
+                    <h5>{props.subTitle}</h5>
                     <div className='queryWrapper'>
                         <Search/>
                         <input

webapp/src/widgets/buttons/iconButton.scss

@@ -27,12 +27,12 @@
 
         &:hover {
             color: rgba(var(--sidebar-text-rgb), 1);
-            background-color: rgba(var(--button-bg-rgb), 0.08);
+            background-color: rgba(var(--sidebar-text-rgb), 0.08);
         }
 
         &:active {
             color: rgba(var(--sidebar-text-rgb), 1);
-            background-color: rgba(var(--button-bg-rgb), 0.16);
+            background-color: rgba(var(--sidebar-text-rgb), 0.16);
         }
     }