Minor menu and dialog UI fixes (#3742)

* Varios UI fixes

* Fixing lint error

* Updating dialog

* Updating colors for icons

webapp/src/components/dialog.scss

@@ -100,6 +100,13 @@
             }
         }
 
+        >.toolbar {
+            display: flex;
+            flex-direction: row;
+            padding: 24px;
+            justify-content: space-between;
+        }
+
         .toolbar--right {
             display: flex;
             gap: 8px;

webapp/src/components/globalHeader/globalHeader.scss

@@ -15,7 +15,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 4px;
-        color: rgba(var(--sidebar-text-rgb), 0.64);
+        color: rgba(var(--sidebar-text-rgb), 0.56);
         margin-left: 8px;
 
         i {

webapp/src/components/searchDialog/searchDialog.scss

@@ -20,6 +20,9 @@
         display: flex;
         flex-direction: column;
         height: 100%;
+        border-color: rgba(var(--center-channel-color-rgb), 0.16);
+        background: var(--center-channel-bg);
+        color: var(--center-channel-color);
 
         .head {
             margin-top: 6px;
@@ -115,7 +118,7 @@
                 position: absolute;
                 left: 13px;
                 font-size: 18px;
-                top: 12px;
+                top: 14px;
                 width: 20px;
                 height: 20px;
                 opacity: 0.48;

webapp/src/components/topBar.scss

@@ -28,7 +28,7 @@
 
     .HelpIcon {
         font-size: 20px;
-        color: rgba(var(--center-channel-color-rgb), 0.7);
+        color: currentColor;
     }
 
     .versionFrame {
@@ -41,7 +41,7 @@
         font-size: 11px;
         line-height: 14px;
         font-weight: 500;
-        color: rgba(var(--center-channel-color-rgb), 0.7);
+        color: currentColor;
     }
 
     .versionBadge {
@@ -49,6 +49,6 @@
         line-height: 14px;
         font-weight: 500;
         margin-left: 3px;
-        color: rgba(var(--center-channel-color-rgb), 0.7);
+        color: currentColor;
     }
 }

webapp/src/components/viewHeader/viewHeader.scss

@@ -72,7 +72,7 @@
 
     .board-search-icon {
         position: absolute;
-        top: 4px;
+        top: 9px;
         left: 10px;
         color: rgba(var(--center-channel-color-rgb), 0.64);
     }

webapp/src/widgets/icons/check.scss

@@ -1,5 +1,5 @@
 .CheckIcon {
-    stroke: rgba(var(--center-channel-color-rgb), 0.5);
+    stroke: currentColor;
     stroke-width: 8px;
     fill: none;
     width: 1em;

webapp/src/widgets/icons/disclosureTriangle.scss

@@ -1,5 +1,5 @@
 .DisclosureTriangleIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/divider.scss

@@ -1,5 +1,5 @@
 .DividerIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/duplicate.scss

@@ -1,5 +1,5 @@
 .DuplicateIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/emoji.scss

@@ -1,5 +1,5 @@
 .EmojiIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/gallery.scss

@@ -1,5 +1,5 @@
 .GalleryIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/hide.scss

@@ -1,5 +1,5 @@
 .HideIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/image.scss

@@ -1,5 +1,5 @@
 .ImageIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/show.scss

@@ -1,5 +1,5 @@
 .ShowIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/icons/sortUp.scss

@@ -1,5 +1,5 @@
 .SortUpIcon {
-    stroke: rgba(var(--center-channel-color-rgb), 0.5);
+    stroke: currentColor;
     stroke-width: 8px;
     fill: none;
     width: 24px;

webapp/src/widgets/icons/submenuTriangle.scss

@@ -1,5 +1,5 @@
 .SubmenuTriangleIcon {
-    fill: rgba(var(--center-channel-color-rgb), 0.7);
+    fill: currentColor;
     stroke: none;
     width: 24px;
     height: 24px;

webapp/src/widgets/menu/menu.scss

@@ -51,12 +51,17 @@
             font-size: 18px;
             opacity: 0.56;
             width: 18px;
+            margin-right: 12px;
 
             &::before {
                 margin: 0;
             }
         }
 
+        .menu-option__content {
+            flex: 1;
+        }
+
         .menu-option {
             display: flex;
             flex-direction: row;
@@ -89,10 +94,6 @@
                 background: rgba(var(--button-bg-rgb), 0.08);
             }
 
-            > * {
-                margin-left: 16px;
-            }
-
             .noicon {
                 &:empty {
                     display: none;
@@ -121,7 +122,7 @@
             }
 
             > .SubmenuTriangleIcon {
-                fill: rgba(var(--center-channel-color-rgb), 0.7);
+                fill: currentColor;
             }
 
             .Icon {
@@ -209,6 +210,7 @@
                 > .noicon {
                     width: 16px;
                     height: 16px;
+                    margin-right: 12px;
                 }
 
                 > .menu-name {