feat: Consistency in UI design on static pages (#219) (#283)

Co-authored-by: Manuel Holtgrewe <[email protected]>
bihealth · Dec 13, 2023 · 2bafecb · 2bafecb
1 parent 2b161f7
commit 2bafecb
Show file tree

Hide file tree

Showing 26 changed files with 2,124 additions and 1,887 deletions.
diff --git a/frontend/src/components/GeneDetails/ClinvarCard/ClinvarFreqPlot.vue b/frontend/src/components/GeneDetails/ClinvarCard/ClinvarFreqPlot.vue
@@ -128,7 +128,7 @@ const vegaEncoding = {
     <v-skeleton-loader class="mt-3 mx-auto border" type="image,image" />
   </template>
 
-  <v-sheet v-else class="bg-grey-lighten-3 pa-3 mt-3 ml-2 h-100">
+  <v-sheet v-else class="pa-3 mt-3 ml-2 h-100" color="background">
     <div class="text-subtitle-1 text-center">Impact / Frequency</div>
     <VegaPlot
       :data-values="vegaData"

diff --git a/frontend/src/components/GeneDetails/ClinvarCard/ClinvarImpact.vue b/frontend/src/components/GeneDetails/ClinvarCard/ClinvarImpact.vue
@@ -152,7 +152,7 @@ const clinsigColor = (coarseClinsigIdx: number, percent: number): string => {
     />
   </template>
   <template v-else>
-    <v-sheet class="bg-grey-lighten-3 pa-3 mt-3 mr-1 h-100">
+    <v-sheet class="pa-3 mt-3 mr-1 h-100" color="background">
       <v-table class="bg-transparent">
         <thead>
           <tr>

diff --git a/frontend/src/components/GeneDetails/ClinvarCard/VariationLandscape.vue b/frontend/src/components/GeneDetails/ClinvarCard/VariationLandscape.vue
@@ -359,7 +359,7 @@ const vegaLayer = [
     <template v-if="!clinvar">
       <v-skeleton-loader class="mt-3 mx-auto border" type="text,image,text" />
     </template>
-    <v-sheet v-else class="bg-grey-lighten-3 pa-3 mt-3 h-100">
+    <v-sheet v-else class="pa-3 mt-3 h-100" color="background">
       <div class="text-subtitle-1 text-center">Variation Lanscape</div>
       <VegaPlot
         :data-values="vegaData"

diff --git a/frontend/src/components/GeneDetails/ExpressionCard.vue b/frontend/src/components/GeneDetails/ExpressionCard.vue
@@ -163,7 +163,7 @@ const vegaLayer = [
         Tissue-Specific Gene Expression from GTeX
       </v-card-subtitle>
       <v-card-text class="pt-3 pb-0">
-        <div>
+        <v-sheet color="background">
           <VegaPlot
             data-name="expression"
             :data-values="vegaData"
@@ -174,7 +174,7 @@ const vegaLayer = [
             :width="1200"
             renderer="svg"
           />
-        </div>
+        </v-sheet>
       </v-card-text>
       <v-card-actions>
         <v-btn

diff --git a/frontend/src/components/GeneDetails/PathogenicityCard.vue b/frontend/src/components/GeneDetails/PathogenicityCard.vue
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
       <template v-else>
         <v-row no-gutters class="d-flex flex-row">
           <v-col cols="3">
-            <v-sheet class="pa-3 bg-grey-lighten-2 mr-2 h-100">
+            <v-sheet class="pa-3 mr-2 h-100" color="background">
               <template v-if="geneInfo?.clingen">
                 <div class="text-subtitle-1">
                   ClinGen
@@ -62,7 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
           </v-col>
 
           <v-col cols="3">
-            <v-sheet class="pa-3 bg-grey-lighten-2 mx-1 h-100">
+            <v-sheet class="pa-3 mx-1 h-100" color="background">
               <template v-if="geneInfo?.gnomadConstraints">
                 <div class="text-subtitle-1">
                   gnomAD
@@ -137,7 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
           </v-col>
 
           <v-col cols="3">
-            <v-sheet class="pa-3 bg-grey-lighten-2 mx-1 h-100">
+            <v-sheet class="pa-3 mx-1 h-100" color="background">
               <template v-if="true">
                 <div class="text-subtitle-1">
                   DECIPHER

diff --git a/frontend/src/components/Profile/BookmarksCard.vue b/frontend/src/components/Profile/BookmarksCard.vue
@@ -12,7 +12,7 @@ onMounted(() => bookmarksStore.loadBookmarks())
 
 <template>
   <v-card class="mx-auto pa-4 pb-8 mt-3">
-    <v-card-title>Your bookmarks:</v-card-title>
+    <v-card-title>Your bookmarks</v-card-title>
     <v-card-text>
       <v-list v-if="bookmarksStore.bookmarks.length">
         <v-list-item
@@ -21,13 +21,21 @@ onMounted(() => bookmarksStore.loadBookmarks())
           density="compact"
         >
           <v-list-item-title>
-            <v-btn color="primary" :to="bookmarkTo(bookmark)">
+            <v-btn
+              color="primary"
+              :to="bookmarkTo(bookmark)"
+              target="_blank"
+              prepend-icon="mdi-launch"
+              variant="tonal"
+              rounded="sm"
+              class="mr-2"
+            >
               {{ bookmark.obj_id }}
             </v-btn>
             <v-btn
-              class="ma-2"
               color="secondary"
               icon
+              size="small"
               @click="bookmarksStore.deleteBookmark(bookmark.obj_type, bookmark.obj_id)"
             >
               <v-icon>mdi-delete</v-icon>