More tweaks for style (#132)

hms-dbmi · Aug 9, 2024 · b4e3dd8 · b4e3dd8
1 parent 8487731
commit b4e3dd8
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 38 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -437,8 +437,6 @@ input.required:invalid,
   .subtitle {
     font-size: 1rem;
     line-height: 1.25rem;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
   }
 }
 
@@ -454,6 +452,8 @@ input.required:invalid,
   .title {
     font-size: 1rem;
     line-height: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 }
 
@@ -469,11 +469,14 @@ input.required:invalid,
   .title {
     font-size: 1.125rem;
     line-height: 1.25rem;
+    margin-top: 0.5rem;
   }
 
   .subtitle {
     font-size: 0.8rem;
     line-height: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 }
 
@@ -485,6 +488,11 @@ input.required:invalid,
   .icon {
     font-size: 5em;
   }
+
+  .title {
+    margin-top: 0.875rem;
+    margin-bottom: 0.875rem;
+  }
 }
 
 /* === Button Groups - Horizontal === */

diff --git a/src/lib/components/Content.svelte b/src/lib/components/Content.svelte
@@ -22,12 +22,8 @@
   class={`main-content ${full ? 'w-full' : ''} ${$$props.class ?? ''}`}
   in:fly={{ duration: 300, x: transition ? '100%' : '0' }}
 >
-  <div class="flex items-center">
-    {#if backUrl}<AngleButton name="back" class="my-2 mr-8" on:click={onBack}
-        >{backTitle}</AngleButton
-      >{/if}
-    {#if title}<h1 class="my-4">{title}</h1>{/if}
-  </div>
-  {#if subtitle}<h2 class="subtitle mb-4">{subtitle}</h2>{/if}
+  {#if backUrl}<AngleButton name="back" on:click={onBack}>{backTitle}</AngleButton>{/if}
+  {#if title}<h1 class="{backUrl ? 'mb-4' : 'my-4'} text-center">{title}</h1>{/if}
+  {#if subtitle}<p class="subtitle mb-4">{subtitle}</p>{/if}
   <slot />
 </section>
diff --git a/src/lib/components/explorer/AddFilter.svelte b/src/lib/components/explorer/AddFilter.svelte
@@ -150,21 +150,27 @@
       </div>
     {:else if data?.type === 'Continuous'}
       <div class="card p-3 m-1 w-full">
-        <section class="card-body flex flex-col w-64" data-testid="numerical-filter">
-          <label for="min">Min: {min}</label><input
-            id="min"
-            data-testid="min-input"
-            type="text"
-            placeholder="Enter value or leave blank for variable min"
-            bind:value={minFormValue}
-          />
-          <label for="min">Max: {max}</label><input
-            id="max"
-            data-testid="max-input"
-            type="text"
-            placeholder="Enter value or leave blank for variable max"
-            bind:value={maxFormValue}
-          />
+        <section class="card-body flex flex-grow gap-4" data-testid="numerical-filter">
+          <label class="flex-auto flex-col">
+            <span>Min: {min}</span>
+            <input
+              data-testid="min-input"
+              type="text"
+              placeholder="Enter value or leave blank for variable min"
+              class="input"
+              bind:value={minFormValue}
+            />
+          </label>
+          <label class="flex-auto flex-col">
+            <span>Max: {max}</span>
+            <input
+              data-testid="max-input"
+              type="text"
+              placeholder="Enter value or leave blank for variable max"
+              class="input"
+              bind:value={maxFormValue}
+            />
+          </label>
         </section>
       </div>
     {/if}

diff --git a/src/lib/components/explorer/Panel.svelte b/src/lib/components/explorer/Panel.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-  class={$$props.class ?? ''}
+  class="flex flex-col {$$props.class ?? ''}"
   data-testid={$$props['data-testid'] || title.replaceAll(' ', '-').toLowerCase()}
 >
   <div class="relative rounded-t-2xl bg-primary-300-600-token p-4 items-center flex">
@@ -19,7 +19,7 @@
     {#if $$slots.action}<span class="flex-none ml-1"><slot name="action" /></span>{/if}
     {#if $$slots.help}<span class="flex-none ml-1"><slot name="help" /></span>{/if}
   </div>
-  <div class="p-2 border rounded-b-2xl border-surface-300-600-token">
+  <div class="h-full p-2 border rounded-b-2xl border-surface-300-600-token">
     <slot />
   </div>
 </div>
diff --git a/src/lib/components/explorer/genome-filter/FilterType.svelte b/src/lib/components/explorer/genome-filter/FilterType.svelte
@@ -8,13 +8,13 @@
   const dispatch = createEventDispatcher<{ select: { option: Option } }>();
 </script>
 
-<div class="text-center flex space-x-6 gap-4 {$$props.class ?? ''}">
+<div class="grid grid-cols-2 place-items-center {$$props.class ?? ''}">
   <CardButton
     data-testid="gene-variant-option"
     title="Search for variants by gene name"
     subtitle="Ex: Rare BRCA1 variants with high consequence severity"
     size="other"
-    class="w-1/2 h-32 min-h-32"
+    class="w-2/3 h-32 min-h-32"
     active={active === Option.Genomic}
     on:click={() => dispatch('select', { option: Option.Genomic })}
   />
@@ -23,7 +23,7 @@
     title="Search for a specific SNP"
     subtitle="Ex: chr17,35269878,G,A"
     size="other"
-    class="w-1/2 h-32 min-h-32"
+    class="w-2/3 h-32 min-h-32"
     active={active === Option.SNP}
     on:click={() => dispatch('select', { option: Option.SNP })}
   />

diff --git a/src/lib/components/explorer/genome-filter/GeneSearch.svelte b/src/lib/components/explorer/genome-filter/GeneSearch.svelte
@@ -22,7 +22,6 @@
     title="Search for Gene with Variant"
     subtitle="Use the official gene symbol."
     required={true}
-    class="h-full"
   >
     <svelte:fragment slot="action">
       <button
@@ -36,14 +35,13 @@
   <Panel
     title="Select Calculated Consequence"
     subtitle="The calculated consequence is based on VEP annotation."
-    class="h-full"
   >
     <svelte:fragment slot="help">
       <HelpInfoPopup id="cons-help-popup" text={helpText.consequence} />
     </svelte:fragment>
     <Consequence />
   </Panel>
-  <Panel title="Select Variant Frequency" class="h-full">
+  <Panel title="Select Variant Frequency">
     <svelte:fragment slot="help">
       <HelpInfoPopup id="freq-help-popup" text={helpText.frequency} />
     </svelte:fragment>

diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
@@ -112,17 +112,17 @@ export const branding = {
       {
         title: 'Video Library',
         description: "Example 'how-to' video demonstrations.",
-        icon: 'fa-solid fa-tv fa-4x',
+        icon: 'fa-solid fa-circle-play fa-4x',
         url: 'https://www.youtube.com/@pic-sure446/featured',
       },
       {
-        title: 'Request Assistance',
+        title: 'Request Help',
         description: 'Need help? Submit a service desk ticket, we are here to help!',
-        icon: 'fa-solid fa-hands-holding-circle fa-4x',
+        icon: 'fa-solid fa-handshake fa-4x',
         url: 'https://hms-dbmi.atlassian.net/servicedesk/customer/portal/5',
       },
       {
-        title: 'PIC-SURE Website',
+        title: 'PIC-SURE',
         description: 'Check out the PIC-SURE website for information.',
         icon: 'fa-solid fa-circle-info fa-4x',
         url: 'https://pic-sure.org/',

diff --git a/src/routes/(picsure)/(public)/help/+page.svelte b/src/routes/(picsure)/(public)/help/+page.svelte
@@ -7,15 +7,15 @@
 <svelte:head>
   <title>{branding.applicationName} | Help</title>
 </svelte:head>
-<Content title="Knowledge Hub" subtitle="Self-service learning resources">
+<Content title="Knowledge Hub">
   <section id="info-cards" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-8">
     {#each branding.help.links as link}
       <CardButton
         data-testid="variant-explorer-btn"
         href={link.url}
         title={link.title}
         subtitle={link.description}
-        icon={link.icon}
+        icon="{link.icon} text-primary-500-400-token"
       />
     {/each}
   </section>