Change back link text from Back to Results to Back (#2736)

* Change back link text * Fix margins and change the title style to align to the top * Fix linting * Change text to back
usdigitalresponse · Mar 12, 2024 · 4dd6ba2 · 4dd6ba2
1 parent fe807b8
commit 4dd6ba2
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 34 deletions.
diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../scss/custom.scss';
+@import '@/scss/custom.scss';
 
 #app {
   -webkit-font-smoothing: antialiased;

diff --git a/packages/client/src/components/SearchFilter.vue b/packages/client/src/components/SearchFilter.vue
@@ -72,7 +72,7 @@ export default {
 
 </script>
 <style lang="scss">
-@import '../../scss/colors-semantic-tokens.scss';
+@import '@/scss/colors-semantic-tokens.scss';
 
 .inactiveLink {
   pointer-events: none;

diff --git a/packages/client/scss/colors-base-tokens.scss → ...s/client/src/scss/colors-base-tokens.scss b/packages/client/scss/colors-base-tokens.scss → ...s/client/src/scss/colors-base-tokens.scss
diff --git a/...s/client/scss/colors-semantic-tokens.scss → ...ient/src/scss/colors-semantic-tokens.scss b/...s/client/scss/colors-semantic-tokens.scss → ...ient/src/scss/colors-semantic-tokens.scss
@@ -69,4 +69,7 @@ $interactive-active: $raw-blue-50;
 // TEXT
 $text-primary: $raw-gray-700;
 $text-secondary: $raw-gray-600;
-$text-placeholder: $raw-gray-500;
+$text-placeholder: $raw-gray-500;
+
+// LINKS
+$link-back: $raw-gray-500;
diff --git a/packages/client/scss/custom.scss → packages/client/src/scss/custom.scss b/packages/client/scss/custom.scss → packages/client/src/scss/custom.scss
diff --git a/packages/client/scss/fonts.scss → packages/client/src/scss/fonts.scss b/packages/client/scss/fonts.scss → packages/client/src/scss/fonts.scss
diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
@@ -10,7 +10,7 @@
       <div class="grant-details-container">
         <div class="grant-details-back-link">
           <router-link v-if="isFirstPageLoad" :to="{ name: 'grants' }">Browse Grants</router-link>
-          <a href="#" @click="$router.back()" v-else>Back to Results</a>
+          <a href="#" @click="$router.back()" v-else>Back</a>
         </div>
         <!-- Left page column: headline -->
         <h2 class="grant-details-headline m-0">{{ selectedGrant.title }}</h2>
@@ -451,59 +451,62 @@ export default {
 </script>
 
 <style lang="css">
-
 .grant-details-container {
   padding-right: 80px;
   padding-left: 80px;
   padding-bottom: 80px;
   display: grid;
   grid-template-columns: 1fr 437px;
-  grid-template-rows: auto;
+  grid-template-rows: 50px auto auto;
   grid-template-areas:
     "back-link back-link"
     "headline  main-actions"
     "content   secondary-actions";
   column-gap: 90px;
   row-gap: 48px;
   .grant-details-back-link {
-    margin-top: 24px;
+    grid-area: back-link;
+    margin-top: 28px;
+    margin-bottom: 5px;
     font-size: 14px;
     font-weight: 700;
-    color: #6D7278;
+    color: #6d7278;
     a {
-      color: #6D7278;
+      color: #6d7278;
       cursor: pointer;
       &::hover {
         text-decoration: underline;
       }
     }
   }
-}
-.grant-details-back-link {
-  grid-area: back-link;
-}
-.grant-details-headline {
-  grid-area: headline;
-  align-self: end;
-}
-.grant-details-content {
-  grid-area: content;
-}
-.grant-details-main-actions {
-  grid-area: main-actions;
-}
-.grant-details-secondary-actions {
-  grid-area: secondary-actions;
-}
 
-.grant-details-table tr:nth-of-type(odd) {
-  /* Design color differs from default bootstrap, so making our own striped background here */
-  background-color: #F9F9F9;
-}
-.grants-details-table-fit-content {
-  /* Make a table column that's the width of its content */
-  white-space: nowrap;
-  width: 1%;
+  .grant-details-headline {
+    grid-area: headline;
+    align-self: start;
+  }
+
+  .grant-details-content {
+    grid-area: content;
+  }
+
+  .grant-details-main-actions {
+    grid-area: main-actions;
+  }
+
+  .grant-details-secondary-actions {
+    grid-area: secondary-actions;
+  }
+
+  .grant-details-table tr:nth-of-type(odd) {
+    /* Design color differs from default bootstrap, so making our own striped background here */
+    background-color: #f9f9f9;
+  }
+
+  .grants-details-table-fit-content {
+    /* Make a table column that's the width of its content */
+    white-space: nowrap;
+    width: 1%;
+  }
 }
 
 @media print {