Improved styling on ButtonImage.

mbta · Nov 13, 2023 · dfcc4f7 · dfcc4f7
1 parent b81116d
commit dfcc4f7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/assets/css/dashboard/button-image.scss b/assets/css/dashboard/button-image.scss
@@ -1,19 +1,23 @@
-.button-image {
-  height: 268px;
-  border-radius: 16px;
-  background: #2b3741;
-  border-color: transparent;
-  min-width: 306px;
-  min-height: 260px;
+.button-image-container {
+  display: flex;
 
-  &:hover {
-    background: $cool-gray-30;
+  .button-image {
+    display: flex;
+    flex-direction: column;
+    height: 268px;
+    border-radius: 16px;
+    background: #2b3741;
     border-color: transparent;
-  }
+    flex: 1 1 306px;
+
+    &:hover {
+      background: $cool-gray-30;
+      border-color: transparent;
+    }
 
-  &__image-container {
-    max-height: 200px;
-    margin-top: 10px;
-    margin-bottom: 16px;
+    &__image-container {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
   }
 }
diff --git a/assets/js/components/Dashboard/PermanentConfiguration/ButtonImage.tsx b/assets/js/components/Dashboard/PermanentConfiguration/ButtonImage.tsx
@@ -12,12 +12,14 @@ const ButtonImage: ComponentType<ButtonImageProps> = (
 ) => {
   const { fileName, label, onClick } = props;
   return (
-    <Button className="button-image" onClick={onClick}>
-      <div className="button-image__image-container">
-        <img alt="" src={`/images/${fileName}`} />
-      </div>
-      <div>{label}</div>
-    </Button>
+    <div className="button-image-container">
+      <Button className="button-image" onClick={onClick}>
+        <div className="button-image__image-container">
+          <img alt="" src={`/images/${fileName}`} />
+        </div>
+        <div className="button-image__label">{label}</div>
+      </Button>
+    </div>
   );
 };