From 8f0d1d5f2e25f91927b3d99061465b2926436003 Mon Sep 17 00:00:00 2001
From: Matthew Spach <matthewspach@gmail.com>
Date: Sat, 5 Jun 2021 14:23:14 -0700
Subject: [PATCH] design system buttons

---
 _includes/action.html          |  2 +-
 _includes/border.html          |  6 +--
 _includes/guide_grid.html      |  2 +-
 _layouts/guides.html           |  2 +-
 _sass/components/buttons.scss  | 67 +++++++++++++++++++++++-----------
 _sass/includes/ato_grid.scss   |  3 --
 _sass/includes/border.scss     |  9 -----
 _sass/includes/guide_grid.scss | 16 --------
 _sass/variables/colors.scss    |  2 +
 9 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/_includes/action.html b/_includes/action.html
index 6d67a71..1a88aa9 100644
--- a/_includes/action.html
+++ b/_includes/action.html
@@ -12,7 +12,7 @@
         </p>
       </div>
       <div class="action_card_actions">
-        <a href="{{ site.pages[1].url | relative_url }}" class="contribute">
+        <a href="{{ site.pages[1].url | relative_url }}" class="default_light">
           Get Involved
         </a>
       </div>
diff --git a/_includes/border.html b/_includes/border.html
index fbc4bd2..443f5b8 100644
--- a/_includes/border.html
+++ b/_includes/border.html
@@ -12,7 +12,7 @@
         <p>
           You have an idea for an automation and want to submit it.
         </p>
-        <a href="{{ site.pages[4].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[4].url | relative_url }}" class="default_light">
           Submit Idea
         </a>
       </div>
@@ -21,7 +21,7 @@
         <p>
           You want to build your own approved automation idea or pick from a list of approved ideas.
         </p>
-        <a href="{{ site.pages[2].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[2].url | relative_url }}" class="default_light">
           Start Building
         </a>
       </div>
@@ -30,7 +30,7 @@
         <p>
           You want to contribute to an existing automation that’s already being developed.
         </p>
-        <a href="{{ site.pages[3].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[3].url | relative_url }}" class="default_light">
           Start Contributing
         </a>
       </div>
diff --git a/_includes/guide_grid.html b/_includes/guide_grid.html
index ff7ea75..9ebefa1 100644
--- a/_includes/guide_grid.html
+++ b/_includes/guide_grid.html
@@ -3,7 +3,7 @@
   <div class="guides_title flexbox_row">
     <span id="guides_title_text">Guides</span>
     <div class="spacer"></div>
-    <a id="suggest_a_guide" href="{{site.guides[6].url | relative_url }}">Suggest a guide</a>
+    <a class="secondary_dark" href="{{site.guides[6].url | relative_url }}">Suggest a guide</a>
   </div>
   <div class="guide_grid flexbox_row">
     <!-- Jekyll loops through our guides collection -->
diff --git a/_layouts/guides.html b/_layouts/guides.html
index a740180..a52e606 100644
--- a/_layouts/guides.html
+++ b/_layouts/guides.html
@@ -13,7 +13,7 @@ <h1 class="title1 col1">
     <section class="body-container body-container--guides">
         <div class="content-container content-container--guide">
           <h5 class="title5">In This Guide</h5>
-          <p class="p1"> Learn best practice for creating a good project image </p>
+          <p class="p1">{{page.description}}</p>
           {{content}}
         </div>
 
diff --git a/_sass/components/buttons.scss b/_sass/components/buttons.scss
index 375839b..d12c4d6 100644
--- a/_sass/components/buttons.scss
+++ b/_sass/components/buttons.scss
@@ -1,26 +1,59 @@
-.button_primary {
-    width: 180px;
+a {
+    font-family: $poppins;
+    font-weight: 600;
+    text-decoration: none;
     text-align: center;
-    padding: 14px;
+}
+
+a.default_dark {
     border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
     background-color: $primary;
+    color: white;
 }
 
-.button_primary:hover {
-    background-color: $primaryhover;
+a.default_dark:hover {
+    border: 4px solid #CDCBBF;
 };
 
-a.contribute{
-    display: flexbox;
-    text-decoration: none;
-    color: $primary;
-    background: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
+a.default_light {
     border-radius: 28px;
+    width: 180px;
     padding: 12px 30px;
-    font-family: $poppins;
-    font-weight: 600;
-    margin: 4rem;
+    color: $primary;
+    background: $whitegradient;
 };
+a.default_light:hover {
+    border: 4px solid #CDCBBF;
+    padding: 8px 26px;
+}
+
+a.secondary_dark {
+    border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
+    border: 2px solid $primary;
+    background-color: none;
+    color: $primary;
+}
+a.secondary_dark:hover {
+    padding: 12px 28px;
+    border: 4px solid $primary;
+}
+
+a.secondary_light {
+    border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
+    border: 2px solid $white;
+    background-color: none;
+    color: $white;
+}
+a.secondary_light:hover {
+    padding: 12px 28px;
+    border: 4px solid $white;
+}
 
 a.read_me_button{
     width: 100%;
@@ -28,17 +61,9 @@ a.read_me_button{
     background: $secondary;
     border-radius: 28px;
     box-shadow: 0px 3.86033px 9.65083px rgba(0, 0, 0, 0.25), inset 0px 3.86033px 3.86033px rgba(255, 255, 255, 0.25);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: $poppins;
-    text-align: center;
-    text-transform: none;
-    font-weight: 600;
     font-size: 20px;
     line-height: 42px; 
     color: $white;
-    text-decoration: none;
     i {
         margin-left: 10px;
     }
diff --git a/_sass/includes/ato_grid.scss b/_sass/includes/ato_grid.scss
index 3f26048..dc58c0a 100644
--- a/_sass/includes/ato_grid.scss
+++ b/_sass/includes/ato_grid.scss
@@ -143,9 +143,6 @@
                 ;
             }
             ;
-            @media screen and (max-width:480px) {
-            }
-            ;
         }
         ;
     }
diff --git a/_sass/includes/border.scss b/_sass/includes/border.scss
index 1333bc8..c8aca3d 100644
--- a/_sass/includes/border.scss
+++ b/_sass/includes/border.scss
@@ -47,15 +47,6 @@
                 flex-wrap: nowrap;
                 }
                 ;
-
-                a {
-                text-decoration: none;
-                color: $primary;
-                background: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
-                font-family: $poppins;
-                font-weight: 600;
-                }
-                ;
         }
         ;
         @media screen and (max-width: 480px) {
diff --git a/_sass/includes/guide_grid.scss b/_sass/includes/guide_grid.scss
index 8ce1c6d..74b3263 100644
--- a/_sass/includes/guide_grid.scss
+++ b/_sass/includes/guide_grid.scss
@@ -11,19 +11,6 @@
         flex:1
       }
       ;
-      #suggest_a_guide{
-        border: 2px solid #003750;
-        box-sizing: border-box;
-        border-radius: 28px;
-        padding: 12px 22px;
-        text-decoration: none;
-        font-weight: 600;
-        font-size: 18px;
-        line-height: 22px;
-        font-family: $poppins;
-        color: #003750;
-      }
-      ;
       #guides_title_text{
         position: inherit;
         left:120px;
@@ -48,9 +35,6 @@
           margin: 12px;
           padding: 6px;
           background: linear-gradient(130.94deg, #F36437 0.77%, #C93709 100.78%);
-          a{
-            text-decoration: none;
-          }
           ;
           .guide_card_title {
               display: block;
diff --git a/_sass/variables/colors.scss b/_sass/variables/colors.scss
index b7eb2d9..bec4e4e 100644
--- a/_sass/variables/colors.scss
+++ b/_sass/variables/colors.scss
@@ -23,4 +23,6 @@ $labelred: #A80909;
 
 // gradients
 
+$whitegradient: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
+