Merge pull request #120 from nih-sparc/small-changes-for-ccb

Styling changes
nih-sparc · May 29, 2024 · ac2c5de · ac2c5de
2 parents 9998269 + e4307c9
commit ac2c5de
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 77 deletions.
diff --git a/assets/_base.scss b/assets/_base.scss
@@ -1,23 +1,25 @@
+@import 'sparc-design-system-components-2/src/assets/_variables.scss';
+
 h1 {
-  font-size: 2.875em;
-  font-weight: normal;
+  font-size:2rem;
+  font-weight:500;
   margin: 0;
-  line-height: 3.75rem;
+  line-height:2.75rem;
   padding: 0;
 }
 
 h2 {
-  font-size: 2.25em;
-  font-weight: normal;
-  line-height: 3rem;
-  margin: 0 0 1rem;
+  font-size:1.5rem;
+  font-weight:500;
+  line-height:2.25rem;
+  margin: 0 0 .5rem;
   padding: 0;
 }
 
 h3 {
-  font-size: 1.75em;
-  font-weight: normal;
-  line-height: 2.75rem;
+  font-size:1rem;
+  font-weight:500;
+  line-height:1.875rem;
   margin: 0 0 0.5rem;
   padding: 0;
 }
@@ -47,12 +49,12 @@ h6 {
 }
 
 a {
-  color: #8300bf;
+  color: $purple;
   text-decoration: underline;
 }
 
 p {
-  margin: 0 0 1rem;
+  margin: 0 0 .5rem;
 }
 
 hr {

diff --git a/components/DatasetDetails/DatasetFilesInfo.vue b/components/DatasetDetails/DatasetFilesInfo.vue
@@ -9,11 +9,11 @@
       SPARC consortium. During embargo, the
       public will be able to view basic
       metadata about these datasets as well
-      as their release date. The embargoed release 
-      date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
+      as their release date. The embargoed release
+      date for this dataset is <b>{{ embargoedReleaseDate }}</b>
       and will become available to the public on that day.
       <a class="sign-in-link" @click="showLoginDialog = true">
-      Sign in</a> to the SPARC Portal to request
+        Sign in</a> to the SPARC Portal to request
       access to or view the status of an access request to embargoed data.
       <div>
         <sparc-tooltip content="Sign in to request access" placement="top-center">
@@ -26,10 +26,10 @@
       </div>
     </div>
     <div v-else-if="embargoed && requestPending">
-      Your access request is pending. The author has received your 
-      request and an email confirming or denying your request will 
-      be sent to you once the author has made a decision. The embargoed 
-      release date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
+      Your access request is pending. The author has received your
+      request and an email confirming or denying your request will
+      be sent to you once the author has made a decision. The embargoed
+      release date for this dataset is <b>{{ embargoedReleaseDate }}</b>
       and will become available to the public on that day.
       <div>
         <sparc-tooltip content="Access request is pending" placement="top-center">
@@ -49,17 +49,13 @@
       SPARC consortium. During embargo, the
       public will be able to view basic
       metadata about these datasets as well
-      as their release date. The embargoed release 
-      date for this dataset is <b>{{ embargoedReleaseDate }}</b> 
-      and will become available to the public on that day. 
+      as their release date. The embargoed release
+      date for this dataset is <b>{{ embargoedReleaseDate }}</b>
+      and will become available to the public on that day.
       Click 'Request Access' to request permission from
       the author to view the embargoed data.
       <div>
-        <el-button
-          class="my-8"
-          :disabled="embargoAccess != null && agreementId != null"
-          @click="openAgreementPopup()"
-        >
+        <el-button class="my-8" :disabled="embargoAccess != null && agreementId != null" @click="openAgreementPopup()">
           Request Access
         </el-button>
       </div>
@@ -71,16 +67,18 @@
       <el-row class="bx--row">
         <el-col :md="12" class="bx--col-sm-4 bx--col-md-8 bx--col left-column">
           <div v-if="!isDatasetSizeLarge">
-            <div><span class="label4">Option 1 - Direct download: </span>Download a zip archive of all the files and metadata directly to your computer free of charge. Please note that the files will be compressed upon download.</div>
+            <div><span class="label4">Option 1 - Direct download: </span>Download a zip archive of all the files and
+              metadata directly to your computer free of charge. Please note that the files will be compressed upon
+              download.</div>
             <a :href="downloadUrl">
               <el-button @click="sendGtmEvent" class="my-16">Download Full Dataset</el-button>
             </a>
           </div>
           <div v-else>
-            <div><span class="label4">Option 1 - Direct download: </span>Direct downloads are only available free of charge for datasets that are 5GB or smaller. Datasets bigger than 5GB will need to be downloaded via AWS. </div>
-            <sparc-tooltip
-              placement="left-center"
-            >
+            <div><span class="label4">Option 1 - Direct download: </span>Direct downloads are only available free of
+              charge for datasets that are 5GB or smaller. Datasets bigger than 5GB will need to be downloaded via AWS.
+            </div>
+            <sparc-tooltip placement="left-center">
               <template #data>
                 <div>
                   Dataset size is over 5GB. To download, use <b>Option 2 - AWS download</b>
@@ -91,11 +89,7 @@
               </template>
             </sparc-tooltip>
           </div>
-          <a
-            v-show="sdsViewer"
-            :href="sdsViewer"
-            target="_blank"
-          >
+          <a v-show="sdsViewer" :href="sdsViewer" target="_blank">
             <el-button class="secondary" @click="onSdsButtonClick">
               Explore in SDS Viewer
             </el-button>
@@ -104,7 +98,8 @@
         <el-col :md="12" class="bx--col-sm-4 bx--col-md-8 bx--col aws-download-column">
           <div class="mb-8">
             <span class="label4">Option 2 - AWS download: </span>
-            Download or transfer the dataset to your AWS Account. The files and metadata are stored in an AWS S3 Requester Pays bucket. You can learn more about downloading data from AWS on our
+            Download or transfer the dataset to your AWS Account. The files and metadata are stored in an AWS S3
+            Requester Pays bucket. You can learn more about downloading data from AWS on our
             <a href="https://docs.sparc.science/docs/accessing-public-datasets" target="_blank">Help Page</a>.
           </div>
           <div class="aws-block mb-16 px-16 pb-16 pt-8">
@@ -130,16 +125,20 @@
                 Requesting Access to Download from AWS
               </div>
               <p>
-                In order to request access to download this dataset, we ask that you please submit a rehydration request. This button will take you to a form where you can submit your request.
+                In order to request access to download this dataset, we ask that you please submit a 
+                <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">rehydration
+                request</a>. This button will take you to a form where you can submit your request.
               </p>
               <el-button :style="'display: flex; margin: auto'" @click="showRehydrationModal = true">
                 Request Access
               </el-button>
             </template>
           </div>
           <div>
-            * Requester pays means that any costs associated with downloading the data will be charged to your AWS account.
-            For transfer pricing information, visit the <a href="https://aws.amazon.com/s3/pricing/" target="blank">AWS Pricing documentation.</a>
+            * Requester pays means that any costs associated with downloading the data will be charged to your AWS
+            account.
+            For transfer pricing information, visit the <a href="https://aws.amazon.com/s3/pricing/" target="blank">AWS
+              Pricing documentation.</a>
           </div>
         </el-col>
       </el-row>
@@ -152,34 +151,18 @@
           <span class="label4">Dataset size: </span>{{ formatMetric(datasetInfo.size) }}
         </span>
         <span class="dataset-link inline">
-          <a
-            href="https://docs.sparc.science/docs/navigating-a-sparc-dataset"
-            class="dataset-link"
-            target="_blank"
-          >
+          <a href="https://docs.sparc.science/docs/navigating-a-sparc-dataset" class="dataset-link" target="_blank">
             How to navigate datasets
           </a>
         </span>
       </div>
-      <files-table :osparc-viewers="osparcViewers" :dataset-scicrunch="datasetScicrunch"/>
+      <files-table :osparc-viewers="osparcViewers" :dataset-scicrunch="datasetScicrunch" />
     </div>
-    <data-use-agreement-popup
-      :show-dialog="showAgreementPopup"
-      @agreement-loaded="agreementLoaded"
-      @dialog-closed="showAgreementPopup = false"
-      @agreement-signed="requestAccess"
-    />
-    <login-modal
-      :show-dialog="showLoginDialog"
-      @dialog-closed="showLoginDialog = false"
-    />
-    <rehydration-modal
-      v-model="showRehydrationModal"
-      append-to-body
-      @close-rehydration-dialog="showRehydrationModal = false"
-      :version="versionId"
-      :dataset-id="datasetId"
-    />
+    <data-use-agreement-popup :show-dialog="showAgreementPopup" @agreement-loaded="agreementLoaded"
+      @dialog-closed="showAgreementPopup = false" @agreement-signed="requestAccess" />
+    <login-modal :show-dialog="showLoginDialog" @dialog-closed="showLoginDialog = false" />
+    <rehydration-modal v-model="showRehydrationModal" append-to-body
+      @close-rehydration-dialog="showRehydrationModal = false" :version="versionId" :dataset-id="datasetId" />
   </div>
 </template>
 

diff --git a/components/RehydrationModal/RehydrationModal.vue b/components/RehydrationModal/RehydrationModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-dialog class="px-16 pb-24" :style="{ maxWidth: '36rem', minWidth: '22rem' }" :visible="visible" @close="closeDialog">
+  <el-dialog class="px-16 pb-24" :style="{ maxWidth: '36rem', minWidth: '22rem' }" :visible="visible"
+    @close="closeDialog">
     <template #header>
       <div class="heading2">Request Access</div>
     </template>
@@ -10,13 +11,16 @@
           dataset.
         </div>
         <p v-if="authenticatedUserEmail">
-          Once you submit your request, the version of the dataset you've
+          Once you submit your
+          <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">rehydration
+          request</a>, the version of the dataset you've
           requested will be extracted into an S3 folder. An email notification
           will be sent to <b>{{ authenticatedUserEmail }}</b> within 24 hours of initiating the process. The rehydrated
           dataset will then be available for 14 days.
         </p>
         <p v-else>
-          Once you submit your request, the version of the dataset you've
+          Once you submit your <a href="https://docs.sparc.science/docs/requesting-access-to-older-versions-of-a-public-dataset">
+          rehydration request</a>, the version of the dataset you've
           requested will be extracted into an S3 folder. An email notification
           will be sent within 24 hours of initiating the process. The rehydrated
           dataset will then be available for 14 days.

diff --git a/pages/about/[aboutDetailsId].vue b/pages/about/[aboutDetailsId].vue
@@ -18,7 +18,7 @@
         <share-links />
       </div>
       <div v-if="aboutDetailsItem.fields.learnMore" class="subpage">
-        <h1 class="heading1 mb-16">Learn More</h1>
+        <div class="heading2 mb-16">Learn More</div>
         <template v-for="(item, index) in aboutDetailsItem.fields.learnMore" :key="item + index">
           <div>
             <learn-more-card

diff --git a/pages/about/consortia/[id].vue b/pages/about/consortia/[id].vue
@@ -12,16 +12,16 @@
           :button-link="ourResearchButtonLink" />
       </div>
       <div v-if="featuredDataset?.title" class="featured-dataset-container p-16 mt-32">
-        <div class="mb-16">Here is a dataset you might be interested in:</div>
+        <div class="heading2 mb-16">Here is a dataset you might be interested in:</div>
         <projects-and-datasets-card :title="featuredDataset.title" :description="featuredDataset.description"
           :banner="featuredDataset.banner" :link="featuredDatasetLink" button-text="View Dataset" />
       </div>
       <div v-if="highlights.length > 0" class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Highlights</div>
+        <div class="heading2 mb-16">Highlights</div>
         <gallery galleryItemType="highlights" :cardWidth="68" :items="highlights" />
       </div>
       <div v-if="learnMore.length > 0" class="subpage">
-        <h1 class="heading1 mb-16">Learn More</h1>
+        <div class="heading2 mb-16">Learn More</div>
         <template v-for="(item, index) in learnMore" :key="index">
           <div>
             <learn-more-card :about-details-item="item" />
@@ -205,7 +205,7 @@ export default {
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
 .featured-dataset-container {
   border: solid $lineColor1 1px;
-  background-color: $background;
+  background-color: white;
 }
 
 .row-item {

diff --git a/pages/about/index.vue b/pages/about/index.vue
@@ -9,7 +9,7 @@
       <paper class="row mt-32" :text="parseMarkdown(sparcPortal)" button-text="View The Roadmap"
         button-link-external="https://docs.sparc.science/docs/sparc-portal-roadmap" />
       <div :v-if="whoWeSpport?.length > 0" class="who-we-support-container p-32 mt-32">
-        <div class="heading1 mb-16">Who We Support</div>
+        <div class="heading2">Who We Support</div>
         <div class="body1 mb-16">The SPARC Portal currently supports {{ whoWeSupport.length }} consortia. Visit the
           consortia page to find out more about them.</div>
         <div class="data-wrap">
@@ -37,7 +37,7 @@
       </div>
 
       <div class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Portal Metrics</div>
+        <div class="heading2 mb-16">Portal Metrics</div>
         <gallery galleryItemType="metrics" :items="metricsItems" />
         <nuxt-link to="/about/metrics">
           <el-button class="secondary mt-16">
@@ -47,7 +47,7 @@
       </div>
 
       <div class="gallery-items-container p-32 mt-32">
-        <div class="heading1 mb-16">Highlights</div>
+        <div class="heading2 mb-16">Highlights</div>
         <gallery galleryItemType="highlights" :cardWidth="68" :items="highlights" />
       </div>
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-data">
-    <page-hero class="py-24">
+    <page-hero>
       <h1 v-if="heroHeading">
         {{ heroHeading }}
       </h1>

diff --git a/pages/share-data/index.vue b/pages/share-data/index.vue
@@ -15,7 +15,7 @@
         </div>
       </div>
       <div v-if="learnMore" class="subpage px-32 mb-0">
-        <div class="heading1 mb-16">Learn More</div>
+        <div class="heading2 mb-16">Learn More</div>
         <div v-for="(item, i) in learnMore" :key="item.sys.id">
           <learn-more-card :about-details-item="item" :parent-path="slug" />
           <hr v-if="i < learnMore.length - 1" />