Set correct icon colors; fix spacings and minor styling of about me

dreammall-earth · Aug 15, 2024 · f1433f2 · f1433f2
1 parent 8353609
commit f1433f2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 10 deletions.
diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts
@@ -26,6 +26,7 @@ function makeThemeFromCssModule(theme: CSSModuleClasses, isDark: boolean): Theme
       font: theme.fontColor,
       icon: theme.iconColor,
       'dropdown-background': theme.dropdownBackgroundColor,
+      'cockpit-highlight': theme.cockpitHighlightColor,
     },
     variables: {
       'border-color': theme.borderColor,

diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss
@@ -1,5 +1,5 @@
 $background-color: #000;
-$surface-color: rgb(126 166 214);
+$surface-color: #3D4753;
 $primary-color: #f09630;
 $secondary-color: #3d4753;
 $error-color: #f44336;
@@ -10,6 +10,7 @@ $border-color: #d6dfe9;
 $border-opacity: 0.4;
 $font-color: #222;
 $icon-color: #F5F5F5;
+$cockpit-highlight-color: #2ca5b1;
 $icon-background: rgb(61 71 83 / 85%);
 $bottom-menu-background: rgb(78 91 107 / 60%);
 $sidebar-background: rgb(61 71 83 / 90%);
@@ -31,6 +32,7 @@ $cockpit-chip-background: rgb(61 71 83);
     borderOpacity: $border-opacity;
     fontColor: $font-color;
     iconColor: $icon-color;
+    cockpitHighlightColor: $cockpit-highlight-color;
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;

diff --git a/frontend/src/assets/scss/light.module.scss b/frontend/src/assets/scss/light.module.scss
@@ -10,6 +10,7 @@ $border-color: #d6dfe9;
 $border-opacity: 1;
 $font-color: #222;
 $icon-color: #3D4753;
+$cockpit-highlight-color: #2ca5b1;
 $icon-background: rgb(255 255 255);
 $bottom-menu-background: rgb(225 230 237 / 60%);
 $sidebar-background: rgb(225 230 237);
@@ -31,6 +32,7 @@ $cockpit-chip-background: rgb(225 230 237);
     borderOpacity: $border-opacity;
     fontColor: $font-color;
     iconColor: $icon-color;
+    cockpitHighlightColor: $cockpit-highlight-color;
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;

diff --git a/frontend/src/components/cockpit/about-me/AboutMeView.vue b/frontend/src/components/cockpit/about-me/AboutMeView.vue
@@ -17,7 +17,7 @@
           <template #selection="{ item }"> {{ item.props.circle }} {{ item.title }} </template>
           <template #item="{ item, props: listProps }">
             <v-list-item v-bind="listProps">
-              <template #prepend> {{ item.props.circle }} </template>
+              <template #prepend> {{ item.props.circle }} <span class="ml-2"></span></template>
             </v-list-item>
           </template>
         </v-select>
@@ -57,9 +57,7 @@
         <v-icon icon="mdi mdi-share-variant-outline" class="mr-2" />
         <ul v-if="props.social.length > 0" class="social-list">
           <li v-for="item in props.social" :key="item.type">
-            <a :href="item.link" target="_blank" rel="noopener noreferrer">
-              <v-icon :icon="`mdi-${item.type}`"></v-icon>
-            </a>
+            <v-icon :icon="`mdi-${item.type}`"></v-icon>
           </li>
         </ul>
         <span v-else>
@@ -197,10 +195,6 @@ const updateIntroduction = (event: Event) => {
   &:deep(.v-select__selection) {
     font-size: 10px;
   }
-
-  &:deep(.v-list-item__prepend) {
-    margin-right: 8px;
-  }
 }
 
 .name {
@@ -219,6 +213,7 @@ const updateIntroduction = (event: Event) => {
 .social {
   display: flex;
   align-items: center;
+  width: 300px;
   max-width: 300px;
   min-height: 60px;
   padding: 10px;

diff --git a/frontend/src/components/cockpit/about-me/EditSocialMedia.vue b/frontend/src/components/cockpit/about-me/EditSocialMedia.vue
@@ -153,5 +153,7 @@ const addSocial = () => {
   flex-flow: column;
   gap: 10px;
   list-style: none;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>
diff --git a/frontend/src/components/cockpit/about-me/UserDetails.vue b/frontend/src/components/cockpit/about-me/UserDetails.vue
@@ -2,7 +2,11 @@
   <ul class="details" :class="{ editable: props.editable }">
     <li v-for="(detail, index) in details" :key="index">
       <v-chip class="detail">
-        <v-icon :icon="detailCategoryToIcon(detail.category)" class="mr-2"></v-icon>
+        <v-icon
+          :icon="detailCategoryToIcon(detail.category)"
+          class="mr-2"
+          color="cockpit-highlight"
+        ></v-icon>
         {{ detail.text }}
         <v-icon
           v-if="props.editable && detail.id >= 0"