From d9648f7513013a044350b9aa68be5f71bc4c6971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 18 Oct 2021 11:14:02 +0200
Subject: [PATCH] Add large size buttons variant and make disabled state global

---
 src/routes/photos.svelte       |  3 ++-
 src/style/_base.scss           |  6 +++++-
 src/style/atoms/_button.scss   | 31 +++++++++++++++++++++++++++++--
 src/style/pages/_location.scss |  5 -----
 src/style/pages/_photos.scss   | 13 -------------
 5 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 5a8f823..ecda213 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -296,9 +296,10 @@
                     </p>
 
                     <Button
-                        text={!ended ? 'See more photos' : "You've seen it all!"}
                         tag="button"
+                        text={!ended ? 'See more photos' : "You've seen it all!"}
                         on:click={loadMorePhotos}
+                        class="button--large button--beige"
                         disabled={ended}
                     />
 
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 9529854..ac63b7e 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -23,7 +23,7 @@ strong {
 em {
     font-style: normal;
 }
-figure, p, dl, dt, dd, ul, li {
+figure, p, dl, dt, dd, ul, ol, li {
     margin: 0;
     padding: 0;
 }
@@ -37,6 +37,10 @@ button {
     background: none;
     border: none;
     cursor: pointer;
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
 }
 
 // Accessibility outline
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 7108867..2d7aff8 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -22,7 +22,10 @@
         margin-right: 12px;
     }
 
-    // Size variants
+
+    /*
+    ** Size variants
+    */
     // Small
     &--small {
         height: 40px;
@@ -34,10 +37,34 @@
         }
     }
 
-    // Color Variants
+    // Large
+    &--large {
+        height: 56px;
+        font-size: rem(16px);
+
+        @include bp (sm) {
+            height: 72px;
+            height: 72px;
+            padding: 0 40px;
+            font-size: rem(18px);
+        }
+    }
+
+
+    /*
+    ** Color Variants
+    */
     // Pink
     &--pink {
         background: $color-secondary-light;
+    }
+    &--beige {
+        $color-button: #F2D3B8;
+        background: $color-button;
 
+        &[disabled] {
+            background: none;
+            border: 2px solid darken($color-button, 2);
+        }
     }
 }
\ No newline at end of file
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index fa8b816..4faf0b7 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -257,11 +257,6 @@
             &__more {
                 color: $color-secondary !important;
             }
-
-            // Disabled state
-            &[disabled] {
-                cursor: not-allowed;
-            }
         }
 
     // Message
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index a8cf064..06c1b18 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -388,25 +388,12 @@
 
         // See More Photos
         .button {
-            $color-button: #F2D3B8;
             grid-column: span var(--columns);
             grid-row: 1;
             margin: 0 auto;
-            height: 56px;
-            background-color: $color-button;
-            font-size: rem(16px);
-            border: none;
 
             @include bp (sm) {
                 grid-column: 6 / span 12;
-                height: 72px;
-                padding: 0 40px;
-                font-size: rem(18px);
-            }
-
-            &[disabled] {
-                background: none;
-                border: 2px solid darken($color-button, 2);
             }
         }