Update topbar style

Scille · Dec 18, 2023 · d1912e6 · d1912e6
1 parent f2d70b8
commit d1912e6
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 31 deletions.
diff --git a/client/src/components/core/ms-action-bar/MsActionBar.vue b/client/src/components/core/ms-action-bar/MsActionBar.vue
@@ -14,9 +14,11 @@ import { IonItemDivider } from '@ionic/vue';
 
 <style scoped lang="scss">
 .toolbar {
-  padding: 1em 2em;
+  margin: 0 1.25rem;
+  padding: 0.5em 1em;
   background-color: var(--parsec-color-light-secondary-background);
-  border-top: 1px solid var(--parsec-color-light-secondary-light);
-  margin: 0;
+  border: 1px solid var(--parsec-color-light-secondary-disabled);
+  border-radius: var(--parsec-radius-12);
+  width: -webkit-fill-available;
 }
 </style>
diff --git a/client/src/components/core/ms-toggle/MsGridListToggle.vue b/client/src/components/core/ms-toggle/MsGridListToggle.vue
@@ -11,9 +11,6 @@
       @click="$emit('update:modelValue', modelValue === DisplayState.Grid ? DisplayState.List : DisplayState.Grid)"
     >
       <ion-icon :icon="grid" />
-      <span v-if="modelValue === DisplayState.Grid">
-        {{ $t('WorkspacesPage.viewDisplay.grid') }}
-      </span>
     </ion-button>
     <!-- list -->
     <ion-button
@@ -24,9 +21,6 @@
       @click="$emit('update:modelValue', modelValue === DisplayState.Grid ? DisplayState.List : DisplayState.Grid)"
     >
       <ion-icon :icon="list" />
-      <span v-if="modelValue === DisplayState.List">
-        {{ $t('WorkspacesPage.viewDisplay.list') }}
-      </span>
     </ion-button>
   </div>
 </template>
@@ -54,33 +48,45 @@ defineExpose({
 .ms-grid-list-toggle {
   display: flex;
   align-items: center;
+  background: var(--parsec-color-light-secondary-white);
+  padding: 0;
+  gap: 0.25rem;
 }
 
 .button-view {
-  color: var(--parsec-color-light-primary-700);
-  padding: 0.25rem;
-  border-radius: 4px;
+  color: var(--parsec-color-light-secondary-light);
+  margin: 0;
+  border-radius: var(--parsec-radius-8);
+  border: 1px solid var(--parsec-color-light-secondary-background);
   height: auto;
 
-  span {
-    margin-left: 0.5rem;
-  }
-
   &:not(.button-disabled) {
     cursor: pointer;
     --background-hover: none;
+
+    &:hover {
+      color: var(--parsec-color-light-primary-700);
+      opacity: 0.5;
+    }
+  }
+
+  &::part(native) {
+    padding-inline-start: 0px;
+    padding-inline-end: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  ion-icon {
+    font-size: 1.25rem;
+    padding: 0.25rem;
   }
 }
 
 .button-disabled {
-  background: var(--parsec-color-light-secondary-inversed-contrast);
+  border: 1px solid var(--parsec-color-light-primary-700);
+  background: var(--parsec-color-light-secondary-premiere);
+  color: var(--parsec-color-light-primary-700);
   opacity: 1;
 }
-
-ion-button::part(native) {
-  padding-inline-start: 0px;
-  padding-inline-end: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
 </style>
diff --git a/client/src/theme/components/contextual-menu.scss b/client/src/theme/components/contextual-menu.scss
@@ -11,10 +11,12 @@
   .right-side {
     margin-left: auto;
     display: flex;
+    flex-shrink: 0;
   }
 
   & > div:not(.right-side) {
     display: flex;
     gap: 1rem;
+    flex-wrap: wrap;
   }
 }
diff --git a/client/src/theme/global.scss b/client/src/theme/global.scss
@@ -31,6 +31,7 @@ http://ionicframework.com/docs/theming/ */
 * {
   --inner-border-width: 0px;
   --box-shadow: var(--parsec-shadow-light);
+  --min-height: 0;
 
   &:focus-visible {
     outline: none;
@@ -122,8 +123,4 @@ a {
     background: var(--parsec-color-light-secondary-light);
     border-radius: var(--parsec-radius-8);
   }
-
-  .item-selected {
-    font-weight: 600;
-  }
 }
diff --git a/client/src/theme/variables/colors.scss b/client/src/theme/variables/colors.scss
@@ -31,6 +31,7 @@
   --parsec-color-light-secondary-premiere: hsla(240, 20%, 96%, 1);
   --parsec-color-light-secondary-background: hsla(240, 20%, 98%, 1);
   --parsec-color-light-secondary-inversed-contrast: hsla(0, 0%, 99%, 1);
+  --parsec-color-light-secondary-white: hsla(0, 0%, 99%, 1);
 
   /* ------ alert light------ */
   --parsec-color-light-info-100: hsla(212, 92%, 95%, 1);

diff --git a/client/src/views/header/HeaderPage.vue b/client/src/views/header/HeaderPage.vue
@@ -239,9 +239,9 @@ function getTitleForRoute(): string {
 
 <style scoped lang="scss">
 .topbar {
-  --background: var(--parsec-color-light-secondary-background);
+  --background: var(--parsec-color-light-secondary-white);
   display: flex;
-  padding: 2em;
+  padding: 1.5rem 2em 1rem;
 }
 
 .topbar-right {

diff --git a/client/src/views/header/ProfileHeader.vue b/client/src/views/header/ProfileHeader.vue
@@ -131,7 +131,7 @@ async function openPopover(event: Event): Promise<void> {
     height: 0.625rem;
     width: 0.625rem;
     border-radius: 50%;
-    border: var(--parsec-color-light-secondary-background) solid 0.25rem;
+    border: var(--parsec-color-light-secondary-white) solid 0.25rem;
     background-color: var(--parsec-color-light-success-500);
   }
 }