feat: more consistent UI design on gene details page (#216)

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 rounded="lg" class="bg-grey-lighten-3 pa-3 mt-3 ml-2 h-100">
+  <v-sheet v-else class="bg-grey-lighten-3 pa-3 mt-3 ml-2 h-100">
     <div class="text-subtitle-1 text-center">Impact / Frequency</div>
     <VegaPlot
       :data-values="vegaData"

frontend/src/components/GeneDetails/ClinvarCard/ClinvarImpact.vue

@@ -152,7 +152,7 @@ const clinsigColor = (coarseClinsigIdx: number, percent: number): string => {
     />
   </template>
   <template v-else>
-    <v-sheet rounded="lg" class="bg-grey-lighten-3 pa-3 mt-3 mr-1 h-100">
+    <v-sheet class="bg-grey-lighten-3 pa-3 mt-3 mr-1 h-100">
       <v-table class="bg-transparent">
         <thead>
           <tr>

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 rounded="lg" class="bg-grey-lighten-3 pa-3 mt-3 h-100">
+    <v-sheet v-else class="bg-grey-lighten-3 pa-3 mt-3 h-100">
       <div class="text-subtitle-1 text-center">Variation Lanscape</div>
       <VegaPlot
         :data-values="vegaData"

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 rounded="lg" class="pa-3 bg-grey-lighten-2 mr-2 h-100">
+            <v-sheet class="pa-3 bg-grey-lighten-2 mr-2 h-100">
               <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 rounded="lg" class="pa-3 bg-grey-lighten-2 mx-1 h-100">
+            <v-sheet class="pa-3 bg-grey-lighten-2 mx-1 h-100">
               <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 rounded="lg" class="pa-3 bg-grey-lighten-2 mx-1 h-100">
+            <v-sheet class="pa-3 bg-grey-lighten-2 mx-1 h-100">
               <template v-if="true">
                 <div class="text-subtitle-1">
                   DECIPHER

frontend/src/components/Profile/BookmarksCard.vue

@@ -11,7 +11,7 @@ onMounted(() => bookmarksStore.loadBookmarks())
 </script>
 
 <template>
-  <v-card class="mx-auto pa-4 pb-8 mt-3" rounded="lg">
+  <v-card class="mx-auto pa-4 pb-8 mt-3">
     <v-card-title>Your bookmarks:</v-card-title>
     <v-card-text>
       <v-list v-if="bookmarksStore.bookmarks.length">

frontend/src/components/Profile/ProfileInformationCard.vue

@@ -101,7 +101,7 @@ onMounted(async () => {
 
       <v-row class="align-center fill-height" justify="center">
         <v-col cols="6">
-          <v-card class="mb-5 ml-5" elevation="0" min-width="400" max-width="448" rounded="lg">
+          <v-card class="mb-5 ml-5" elevation="0" min-width="400" max-width="448">
             <v-card-item>
               <v-card-title>User Profile</v-card-title>
 
@@ -239,13 +239,7 @@ onMounted(async () => {
           </v-card>
         </v-col>
         <v-col cols="6">
-          <v-card
-            class="mx-auto pa-4 pb-8 mt-12"
-            elevation="0"
-            min-width="400"
-            max-width="448"
-            rounded="lg"
-          >
+          <v-card class="mx-auto pa-4 pb-8 mt-12" elevation="0" min-width="400" max-width="448">
             <v-card-item>
               <v-card-title>Send test Email</v-card-title>
               <v-card-subtitle>(Only superusers can do this)</v-card-subtitle>

frontend/src/components/SearchBar.vue

@@ -81,9 +81,7 @@ const runSearch = async () => {
             </v-list-item>
           </v-list>
         </v-menu>
-        <v-btn variant="text" rounded="xl" class="start-search" @click.prevent="() => runSearch()">
-          Go
-        </v-btn>
+        <v-btn variant="text" class="start-search" @click.prevent="() => runSearch()"> Go </v-btn>
       </template>
     </v-text-field>
   </div>

frontend/src/components/StrucvarDetails/ClinvarCard.vue

@@ -165,9 +165,7 @@ const expanded = ref<string[]>([])
         </template>
 
         <template #no-data>
-          <v-sheet rounded="lg" class="pa-3 text-center font-italic border">
-            No overlapping ClinVar SV
-          </v-sheet>
+          <v-sheet class="pa-3 text-center font-italic border"> No overlapping ClinVar SV </v-sheet>
         </template>
       </v-data-table>
     </v-card-text>

frontend/src/components/StrucvarDetails/GeneListCard.vue

@@ -239,9 +239,7 @@ onMounted(() => selectFirst(props.storeState))
             <v-skeleton-loader class="mt-3 mx-auto border" type="heading,subtitle" />
           </template>
           <template v-else>
-            <v-sheet rounded="lg" class="pa-3 text-center font-italic border">
-              No overlapping gene.
-            </v-sheet>
+            <v-sheet class="pa-3 text-center font-italic border"> No overlapping gene. </v-sheet>
           </template>
         </template>
 

frontend/src/components/StrucvarDetails/GeneListCard/GeneListEntry.vue

@@ -48,7 +48,7 @@ const sortIcon = computed<string>(() => {
 </script>
 
 <template>
-  <v-sheet rounded="sm" class="pa-3 mt-1 border">
+  <v-sheet class="pa-3 mt-1 border">
     <v-row no-gutter>
       <v-col
         cols="2"

frontend/src/plugins/vuetify.ts

@@ -39,6 +39,17 @@ export default createVuetify({
     ...components
   },
   directives,
+  defaults: {
+    global: {
+      flat: true
+    },
+    VCard: {
+      rounded: 'lg'
+    },
+    VSheet: {
+      rounded: 'lg'
+    }
+  },
   theme: {
     defaultTheme: 'light',
     themes: {

frontend/src/views/GeneDetailView.vue

@@ -123,84 +123,93 @@ const SECTIONS: Section[] = [
 <template>
   <v-app>
     <PageHeader />
-    <v-navigation-drawer :elevation="3" :permanent="true">
-      <div v-if="geneInfoStore.storeState == StoreState.Active">
-        <v-list v-model:opened="openedSection">
-          <v-list-subheader> GENE </v-list-subheader>
-
-          <BookmarkListItem :id="geneInfoStore.hgncId ?? ''" :type="'gene'" />
-
-          <v-list-group value="gene">
-            <template #activator="{ props: vProps }">
-              <v-list-item v-bind="vProps" prepend-icon="mdi-dna" title="Gene" />
-            </template>
-
-            <v-list-item
-              v-for="section in SECTIONS"
-              :id="`${section.id}-nav`"
-              :key="section.id"
-              density="compact"
-              @click="
-                router.push({
-                  query: { genomeBuild: genomeBuild },
-                  hash: `#${section.id}`
-                })
-              "
-            >
-              <v-list-item-title>
-                {{ section.title }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list-group>
-        </v-list>
-      </div>
-    </v-navigation-drawer>
-
-    <v-main class="my-3 mx-3">
-      <v-alert v-if="errorMessage?.length" type="warning" class="mb-6">
-        <div>
-          {{ errorMessage }}
-        </div>
-        <v-btn
-          :to="{ name: 'home' }"
-          prepend-icon="mdi-arrow-left-circle-outline"
-          class="mt-3"
-          variant="outlined"
-          color="white"
-        >
-          Back to home
-        </v-btn>
-      </v-alert>
-
-      <div id="gene-overview">
-        <OverviewCard :gene-info="geneInfoStore.geneInfo" :show-gene-details-link="false" />
-      </div>
-
-      <div id="gene-pathogenicity">
-        <PathogenicityCard :gene-info="geneInfoStore.geneInfo" />
-      </div>
-
-      <div id="gene-conditions">
-        <ConditionsCard :gene-info="geneInfoStore.geneInfo" :hpo-terms="geneInfoStore.hpoTerms" />
-      </div>
-
-      <div id="gene-expression">
-        <ExpressionCard
-          :gene-symbol="geneInfoStore.geneInfo?.hgnc?.symbol"
-          :expression-records="geneInfoStore.geneInfo?.gtex?.records"
-          :ensembl-gene-id="geneInfoStore.geneInfo?.gtex?.ensemblGeneId"
-        />
-      </div>
-
-      <div v-if="geneInfoStore?.geneClinvar" id="gene-clinvar">
-        <ClinvarCard
-          :gene-clinvar="geneInfoStore.geneClinvar"
-          :transcripts="geneInfoStore.transcripts"
-          :genome-build="genomeBuild"
-          :gene-info="geneInfoStore?.geneInfo"
-          :per-freq-counts="geneInfoStore?.geneClinvar?.perFreqCounts"
-        />
-      </div>
+    <v-main class="bg-grey-lighten-2">
+      <v-container>
+        <v-row>
+          <v-col cols="2">
+            <div v-if="geneInfoStore.storeState == StoreState.Active">
+              <v-list v-model:opened="openedSection" rounded="lg">
+                <v-list-subheader> GENE </v-list-subheader>
+
+                <BookmarkListItem :id="geneInfoStore.hgncId ?? ''" :type="'gene'" />
+
+                <v-list-group value="gene">
+                  <template #activator="{ props: vProps }">
+                    <v-list-item v-bind="vProps" prepend-icon="mdi-dna" title="Gene" />
+                  </template>
+
+                  <v-list-item
+                    v-for="section in SECTIONS"
+                    :id="`${section.id}-nav`"
+                    :key="section.id"
+                    density="compact"
+                    @click="
+                      router.push({
+                        query: { genomeBuild: genomeBuild },
+                        hash: `#${section.id}`
+                      })
+                    "
+                  >
+                    <v-list-item-title>
+                      {{ section.title }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list-group>
+              </v-list>
+            </div>
+          </v-col>
+
+          <v-col cols="10">
+            <v-alert v-if="errorMessage?.length" type="warning" class="mb-6">
+              <div>
+                {{ errorMessage }}
+              </div>
+              <v-btn
+                :to="{ name: 'home' }"
+                prepend-icon="mdi-arrow-left-circle-outline"
+                class="mt-3"
+                variant="outlined"
+                color="white"
+              >
+                Back to home
+              </v-btn>
+            </v-alert>
+
+            <div id="gene-overview">
+              <OverviewCard :gene-info="geneInfoStore.geneInfo" :show-gene-details-link="false" />
+            </div>
+
+            <div id="gene-pathogenicity">
+              <PathogenicityCard :gene-info="geneInfoStore.geneInfo" />
+            </div>
+
+            <div id="gene-conditions">
+              <ConditionsCard
+                :gene-info="geneInfoStore.geneInfo"
+                :hpo-terms="geneInfoStore.hpoTerms"
+              />
+            </div>
+
+            <div id="gene-expression">
+              <ExpressionCard
+                :gene-symbol="geneInfoStore.geneInfo?.hgnc?.symbol"
+                :expression-records="geneInfoStore.geneInfo?.gtex?.records"
+                :ensembl-gene-id="geneInfoStore.geneInfo?.gtex?.ensemblGeneId"
+              />
+            </div>
+
+            <div v-if="geneInfoStore?.geneClinvar" id="gene-clinvar">
+              <ClinvarCard
+                :gene-clinvar="geneInfoStore.geneClinvar"
+                :transcripts="geneInfoStore.transcripts"
+                :genome-build="genomeBuild"
+                :gene-info="geneInfoStore?.geneInfo"
+                :per-freq-counts="geneInfoStore?.geneClinvar?.perFreqCounts"
+              />
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-main>
   </v-app>
 </template>

frontend/src/views/HomeView.vue

@@ -22,8 +22,6 @@ const router = useRouter()
 const searchTerm = ref<string>('')
 /** Component state; currently selected genome build. */
 const genomeBuild = ref<GenomeBuild>('grch37')
-/** Component state; whether or not to show case information. */
-const showCaseInformation = ref(false)
 
 /** Launches a search for one of the examples. */
 const performExampleSearch = (example: Example) => {
@@ -35,13 +33,13 @@ const performExampleSearch = (example: Example) => {
 
 <template>
   <v-app>
-    <PageHeader v-model:case-information="showCaseInformation" :hide-search-bar="true" />
+    <PageHeader :hide-search-bar="true" />
     <v-main class="bg-grey-lighten-2">
       <v-container>
         <v-row>
           <v-spacer></v-spacer>
           <v-col cols="12" lg="6" class="py-2">
-            <v-sheet rounded="lg" class="px-6 py-3">
+            <v-sheet class="px-6 py-3">
               <p>
                 <span class="font-weight-bold"> REEV evaluates and explains variants. </span>
               </p>
@@ -67,7 +65,7 @@ const performExampleSearch = (example: Example) => {
         <v-row>
           <v-spacer></v-spacer>
           <v-col cols="12" lg="6" class="py-2">
-            <v-sheet rounded="lg" class="px-6 py-3">
+            <v-sheet class="px-6 py-3">
               <div class="text-h6">Enter a variant or gene to query for</div>
 
               <SearchBar
@@ -83,7 +81,7 @@ const performExampleSearch = (example: Example) => {
         <v-row>
           <v-spacer></v-spacer>
           <v-col cols="12" lg="6" class="py-2">
-            <v-card id="examples" flat rounded="lg" class="px-3 py-3">
+            <v-card id="examples" class="px-3 py-3">
               <v-card-title> Need some inspiration? </v-card-title>
               <v-card-text>
                 <div v-for="section in EXAMPLES" :key="section.title">

frontend/src/views/LoginView.vue

@@ -65,7 +65,6 @@ onMounted(async () => {
         class="mx-auto pa-12 pb-8 mt-12"
         elevation="8"
         max-width="600"
-        rounded="lg"
         @dblclick="showLoginForm = !showLoginForm"
       >
         <div class="mb-8">

frontend/src/views/ProfileView.vue

@@ -102,13 +102,7 @@ watch(
 
       <div v-else>
         <v-row>
-          <v-card
-            class="mx-auto pa-4 pb-8 mt-12"
-            elevation="8"
-            min-width="400"
-            max-width="448"
-            rounded="lg"
-          >
+          <v-card class="mx-auto pa-4 pb-8 mt-12" elevation="8" min-width="400" max-width="448">
             <v-card-item>
               <v-card-title>User Profile</v-card-title>
 

frontend/src/views/QueryView.vue

@@ -93,7 +93,6 @@ onMounted(queryExecutionOnMounted)
                   v-for="{ data: geneInfo } in scoredGeneInfos"
                   :key="geneInfo.symbol"
                   class="bg-grey-lighten-2 pa-3 mb-2"
-                  rounded="lg"
                 >
                   <div>
                     <v-btn