CB-2479 feat: top app bar design

webapp/packages/core-connections/src/ConnectionFolderResource.ts

@@ -156,8 +156,8 @@ export class ConnectionFolderResource extends CachedMapResource<IConnectionFolde
 
   isKeyEqual(param: IConnectionFolderParam, second: IConnectionFolderParam): boolean {
     return (
-      param.projectId.localeCompare(second.projectId, undefined, { sensitivity: 'accent' }) === 0
-      && param.folderId.localeCompare(second.folderId, undefined, { sensitivity: 'accent' }) === 0
+      param.projectId === second.projectId
+      && param.folderId === second.folderId
     );
   }
 

webapp/packages/plugin-help/src/Help.tsx

@@ -22,12 +22,17 @@ const styles = css`
       height: 100%;
       display: flex;
       align-items: center;
-      padding: 0 8px;
+      padding: 0 16px;
       cursor: pointer;  
       & IconOrImage {
         width: 24px;
       }
     }
+    @media only screen and (max-width: 1200px) {
+      container {
+        padding: 0 8px;
+      }
+    }
   `;
 
 export const Help = observer(function Help() {

webapp/packages/plugin-settings-menu/src/SettingsMenu/settingsMenuStyles.ts

@@ -10,7 +10,7 @@ import { css } from 'reshadow';
 
 export const settingsMenuStyles = css`
   ContextMenu {
-    padding: 0 8px !important;
+    padding: 0 16px !important;
     height: 48px;
     cursor: pointer;
     background: none;
@@ -33,4 +33,9 @@ export const settingsMenuStyles = css`
       transform: rotate(90deg);
     }
   }
+  @media only screen and (max-width: 1200px) {
+    ContextMenu {
+      padding: 0 8px !important;
+    }
+  }
 `;

webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/topMenuStyles.ts

@@ -9,56 +9,61 @@
 import { css } from 'reshadow';
 
 export const topMenuStyles = css`
-    checkbox {
-      composes: theme-checkbox_surface from global;
+  checkbox {
+    composes: theme-checkbox_surface from global;
+  }
+  Button {
+    composes: theme-ripple from global;
+  }
+  menu-box {
+    composes: theme-text-on-primary from global;
+    background-color: #338ecc!important;
+  }
+  menu-box menu-panel-item {
+    border-color: #ffffff !important;
+  }
+  MenuTrigger, Button {
+    height: 100%;
+    padding: 0 16px !important;
+
+    & box > div {
+      display: block;
     }
-    Button {
-      composes: theme-ripple from global;
-    }
-    menu-box {
-      composes: theme-text-on-primary from global;
-      background-color: #338ecc!important;
-    }
-    menu-box menu-panel-item {
-      border-color: #ffffff !important;
-    }
-    MenuTrigger, Button {
+    & box > Icon {
+      width: 14px;
       height: 100%;
+      padding: 0 4px;
+    }
+    & IconOrImage {
+      display: block;
+      width: 24px;
+    }
+    & menu-trigger-icon {
+      margin-right: 8px;
+    }
+    & menu-trigger-text {
+      max-width: 240px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+    /*&:hover box > Icon,
+    &:global([aria-expanded="true"]) box > Icon {
+      background: #236ea0;
+    }*/
+  }
+  MenuItem,
+  MenuItemCheckbox,
+  MenuItemRadio {
+    &:hover, &:global([aria-expanded="true"]) {
+      background: #236ea0;
+    }
+    &:before {
+      display: none;
+    }
+  }
+  @media only screen and (max-width: 1200px) {
+    MenuTrigger, Button {
       padding: 0 8px !important;
-  
-      & box > div {
-        display: block;
-      }
-      & box > Icon {
-        width: 14px;
-        height: 100%;
-        padding: 0 4px;
-      }
-      & IconOrImage {
-        display: block;
-        width: 24px;
-      }
-      & menu-trigger-icon {
-        margin-right: 4px;
-      }
-      & menu-trigger-text {
-        max-width: 240px;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-      }
-      /*&:hover box > Icon,
-      &:global([aria-expanded="true"]) box > Icon {
-        background: #236ea0;
-      }*/
     }
-    MenuItem,
-    MenuItemCheckbox,
-    MenuItemRadio {
-      &:hover, &:global([aria-expanded="true"]) {
-        background: #236ea0;
-      }
-      &:before {
-        display: none;
-      }
-    }
-  `;
+  }
+`;

webapp/packages/plugin-user-profile/src/UserInfo.tsx

@@ -18,23 +18,28 @@ import { useStyles } from '@cloudbeaver/core-theming';
 import { UserProfileService } from './UserProfileService';
 
 const styles = css`
+  user {
+    composes: theme-ripple from global;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    cursor: pointer;
+  }
+  IconOrImage {
+    display: block;
+    width: 24px;
+  }
+  user-name {
+    display: block;
+    line-height: initial;
+    margin-left: 8px;
+  }
+  @media only screen and (max-width: 1200px) {
     user {
-      composes: theme-ripple from global;
-      height: 100%;
-      display: flex;
-      align-items: center;
       padding: 0 8px;
-      cursor: pointer;
-    }
-    IconOrImage {
-      display: block;
-      width: 24px;
-    }
-    user-name {
-      display: block;
-      line-height: initial;
-      margin-left: 8px;
     }
+  }
 `;
 
 interface Props {