Make buttons more consistent

Rename JumpUp button to top-of-page

gallery/themes/default/components/buttons/block.sass

@@ -0,0 +1,112 @@
+@mixin btn-block($color)
+    background-color: transparent
+    color: $color
+
+    &:hover
+        background-color: $color
+        color: $black
+
+    &:focus-visible
+        outline: 2px solid rgba($color, 0.5)
+    
+.btn-block
+    padding: 0.5rem 1rem
+
+    width: auto
+    min-height: 2.5rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 0.5rem
+
+    position: relative
+
+    font-size: 1rem
+    font-weight: 600
+    text-align: center
+
+    background-color: transparent
+    color: $black
+    border: none
+    border-radius: $rad-inner
+
+    cursor: pointer
+
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+
+    &:hover
+        background-color: $black
+        color: $white
+    
+    &:focus-visible
+        outline: 2px solid rgba($black, 0.5)
+
+    &.primary
+        @include btn-block($primary)
+
+    &.critical
+        @include btn-block($critical)
+
+    &.warning
+        @include btn-block($warning)
+
+    &.success
+        @include btn-block($success)
+
+    &.info
+        @include btn-block($info)
+
+
+.input-block
+    padding: 0.5rem 1rem
+
+    width: auto
+    min-height: 2.5rem
+
+    display: flex
+    justify-content: flex-start
+    align-items: center
+
+    position: relative
+
+    font-size: 1rem
+    font-weight: 600
+    text-align: left
+
+    background-color: $black
+    color: $white
+
+    border: none
+    border-radius: $rad-inner
+
+    cursor: pointer
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+
+    &:hover
+        outline: 2px solid rgba($white, 0.5)
+
+    &:focus-visible
+        outline: 2px solid rgba($white, 0.5)
+
+    &.file
+        padding: 0 1rem 0 0
+
+        &::file-selector-button
+            margin-right: 1rem
+            padding: 0.5rem 1rem
+
+            width: auto
+            height: 100%
+
+            font-size: 1rem
+            text-decoration: none
+
+            background-color: $white
+            color: $black
+            border: none
+            border-radius: $rad-inner
+
+            &:not([value=""])
+                display: none
+

gallery/themes/default/components/buttons/pill.sass

@@ -84,7 +84,7 @@
     font-size: 1rem
     font-weight: 600
 
-    background-color: $black2
+    background-color: #000000
     color: $white
     opacity: 0
     border-radius: $rad-inner
@@ -107,4 +107,4 @@
         bottom: -0.46rem
         transform: translateX(-50%)
 
-        color: $black2
+        color: #000000

gallery/themes/default/components/buttons/top-of-page.sass

@@ -1,4 +1,4 @@
-.jumpUp
+.top-of-page
     margin: 0
     padding: 0.55rem
 
@@ -28,10 +28,10 @@
         background-color: $black
         color: $primary
 
-.jumpUp--show
-    right: 0.75rem
-    opacity: 1
+    &.show
+        right: 0.75rem
+        opacity: 1
 
 @media (max-width: $breakpoint)
-    .jumpUp
+    .top-of-page
         bottom: 4.25rem

gallery/themes/default/components/elements/pop-up.sass

@@ -1,21 +1,3 @@
-@mixin pop-up-btn($color, $fill: false)
-    @if $fill
-        color: $white
-        background-color: $color
-        border: 2px solid $color
-
-        &:hover
-            background-color: $white
-            color: $color
-    @else
-        color: $color
-        background-color: $white
-        border: 2px solid $color
-
-        &:hover
-            background-color: $color
-            color: $white
-    
 .pop-up
     width: calc(100% - 3.5rem)
     height: 100vh
@@ -89,7 +71,7 @@
             position: sticky
             top: 0
 
-            font-size: 2.5rem
+            font-size: 2.25rem
             font-weight: 600
             text-align: center
             line-height: 1
@@ -151,61 +133,6 @@
         .pop-up-wrapper
             transform: translate(-50%, 50%) scale(1)
 
-.pop-up__btn
-    margin: 0
-    padding: 0.5rem 1rem
-
-    width: auto
-    height: 2.5rem
-
-    display: flex
-    justify-content: center
-    align-items: center
-
-    font-size: 1rem
-    font-weight: 600
-    text-align: center
-    line-height: 1
-
-    border-radius: $rad-inner
-
-    cursor: pointer
-    transition: background-color 0.2s ease, color 0.2s ease
-
-    @include pop-up-btn($black)
-
-    &:focus
-        outline: none
-.pop-up__btn-fill
-    @include pop-up-btn($black, true)
-
-@each $name, $colour in (primary: $primary, info: $info, warning: $warning, critical: $critical)
-    .pop-up__btn-#{$name}
-        @include pop-up-btn($colour)
-    .pop-up__btn-#{$name}-fill
-        @include pop-up-btn($colour, true)
-
-.pop-up__input
-    margin: 0
-    padding: 0.5rem
-
-    width: 100%
-    height: 2.5rem
-
-    font-size: 1rem
-    font-weight: 600
-    text-align: left
-    line-height: 1
-
-    border-radius: $rad-inner
-
-    background-color: $white
-    border: 2px solid $black
-
-    &:focus
-        outline: none
-        border-color: $primary
-
 .pop-up__link
     color: $primary
     text-decoration: none
@@ -251,7 +178,4 @@
             opacity: 1
 
             .pop-up-wrapper
-                transform: translateY(0)
-
-    .pop-up__btn
-        width: 100%
+                transform: translateY(0)

gallery/themes/default/components/navigation.sass

@@ -72,7 +72,7 @@
         font-size: 1rem
         font-weight: 600
 
-        background-color: $black2
+        background-color: #000000
         color: $white
         opacity: 0
         border-radius: $rad-inner
@@ -95,7 +95,7 @@
             left: -0.45rem
             transform: translateY(-50%)
 
-            color: $black2
+            color: #000000
 
     &:hover
         background-color: $black2