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