some web ui styling

frontend/src/component/preferences/preferences.scss

@@ -44,6 +44,7 @@
       min-width: 32px;
     }
     gap: 12px;
+    padding: 8px 4px;
 
     button {
       @include common.iconButton();
@@ -62,14 +63,21 @@
       gap: 8px;
       align-items: center;
       cursor: pointer;
-      //color: var(--icon-button-hover-color);
-      //color: var(--icon-button-hover-background-color);
+      color: var(--menu-button-color);
+      background-color: var(--menu-button-background-color);
       border: 1px solid transparent;
-      border-radius: 4px;
-      padding: 4px;
+      border-radius: var(--border-radius);
+      padding: 8px 16px;
       user-select: none;
       white-space: nowrap;
 
+      &_update { svg { fill: var(--menu-icon-color-update); } }
+      &_user { svg { fill: var(--menu-icon-color-user); } }
+      &_api_server { svg { fill: var(--menu-icon-color-api_server); } }
+      &_main_config { svg { fill: var(--menu-icon-color-main_config); } }
+      &_status { svg { fill: var(--menu-icon-color-status); } }
+
+
       * {
         pointer-events: none;
       }
@@ -86,7 +94,8 @@
     }
 
     &-menu-action.selected {
-      color: var(--label-color);
+      color: var(--menu-button-hover-color);
+      background-color: var(--menu-button-hover-background-color);
     }
   }
 

frontend/src/component/preferences/preferences.tsx

@@ -48,7 +48,7 @@ export default function Preferences(props: PreferencesProps) {
             <div className={'preferences__sidebar'}>
                 {sidebar_actions.map(action =>
                     <div key={'pref_' + action.action} data-action={action.action}
-                            className={'preferences__sidebar-menu-action' + (action.action === activePage ? ' selected' : '')}
+                            className={'preferences__sidebar-menu-action preferences__sidebar-menu-action_' + action.action + (action.action === activePage ? ' selected' : '')}
                             onClick={handleSidebarAction}>{getIconByName(action.icon)}<label>{action.label}</label></div>)}
             </div>
             <div className={'preferences__panels'}>

frontend/src/component/source-selector-editor/source-selector-editor.scss

@@ -12,6 +12,7 @@
 
   &__content {
     display: flex;
+    padding: 12px;
     flex-flow: column;
     flex: 1 1 auto;
     min-width: 340px;

frontend/src/component/user-view/user-view.scss

@@ -221,9 +221,17 @@ dialog:not([open]) {
             padding-left: 4px;
           }
           span {
+            //padding: 4px;
+            //transform: scale(0.9) translateY(5px);
             padding: 4px;
-            transform: scale(0.9) translateY(5px);
             @include common.iconButton();
+            &:first-child {
+              border-radius: var(--icon-button-border-radius) 0 0 var(--icon-button-border-radius) !important;
+            }
+
+            &:last-child {
+              border-radius: 0 var(--icon-button-border-radius) var(--icon-button-border-radius) 0 !important;
+            }
           }
         }
       }

frontend/src/scss/_default.scss

@@ -118,3 +118,7 @@ select {
 option {
   cursor: pointer;
 }
+
+dialog {
+  padding: 0 !important;
+}

frontend/src/scss/_preferences.scss

@@ -27,7 +27,8 @@
     justify-content: flex-end;
     align-items: center;
     gap: 12px;
-    background-color: inherit;
+    background-color: var(--toolbar-bg-color);
+    padding: 8px 16px;
 
     label {
       flex: 1 1 auto;

frontend/src/scss/_theme.scss

@@ -21,6 +21,7 @@
   --tool-button-color: #fff;
   --tool-button-hover-color: #ffffff;
   --tool-button-hover-background-color: #0c8a13;
+  --default-button-background-color: #124a9b;
 
   --toolbar-background-color: #282A36;
   --toolbar-button-hover-color: #ffffff;
@@ -47,16 +48,21 @@
   --border-radius: 8px;
 
   --icon-button-border-radius: 4px;
-  --icon-button-background-color: #124a9b;
+  --icon-button-background-color: var(--default-button-background-color);
   --icon-button-color: #ffffff;
   --icon-button-hover-background-color: #0d6efd;
   --icon-button-hover-color: #ffffff;
   --icon-button-hover-border-color: #ced9fb;
 
+  --menu-button-color:#fffff;
+  --menu-button-background-color: #20273344;
+
+  --menu-button-hover-color:#fffff;
+  --menu-button-hover-background-color: #202733;
 
   --text-button-border-radius: 4px;
   --text-button-border-color: transparent;
-  --text-button-background-color: #124a9b;
+  --text-button-background-color: var(--default-button-background-color);
   --text-button-color: #ffffff;
   --text-button-hover-background-color: #0d6efd;
   --text-button-hover-color: #ffffff;
@@ -92,4 +98,13 @@
   --breadcrumb-color: #c4c4c4;
   --breadcrumb-active-background-color: #4ad96e;
   --breadcrumb-active-color: #000;
+
+  --menu-icon-color-update: #A3D8FF;
+  --menu-icon-color-user: #0ABAB5;
+  --menu-icon-color-api_server: #FF9D23;
+  --menu-icon-color-main_config: #FF2DF1;
+  --menu-icon-color-status : #F9E400;
+
+  --toolbar-bg-color: #161b25;
+
 }