Add large size buttons variant and make disabled state global

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}
                     />
 

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

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);
+        }
     }
 }

src/style/pages/_location.scss

@@ -257,11 +257,6 @@
             &__more {
                 color: $color-secondary !important;
             }
-
-            // Disabled state
-            &[disabled] {
-                cursor: not-allowed;
-            }
         }
 
     // Message

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);
             }
         }