Update button styling

dvsu · Jul 12, 2022 · 60f4418 · 60f4418
1 parent 4d562e4
commit 60f4418
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/components/SelectorButton.module.scss b/src/components/SelectorButton.module.scss
@@ -12,6 +12,11 @@
   position: relative;
   border-radius: 0.7rem;
 
+  &:hover,
+  &:active {
+    cursor: pointer;
+  }
+
   &--selected {
     background-image: linear-gradient(
       to bottom right,
@@ -48,7 +53,17 @@
   &__text {
     font-size: 3rem;
     color: rgb(64, 64, 64);
-    // text-shadow: 0 0 5px rgb(251, 100, 100);
+    display: block;
+
+    &--selected {
+      color: rgb(203, 68, 0);
+      text-shadow: 0 0 3px rgb(255, 85, 0);
+    }
+  }
+
+  &__subtext {
+    font-size: 1.3rem;
+    font-weight: 600;
 
     &--selected {
       color: rgb(203, 68, 0);

diff --git a/src/components/SelectorButton.tsx b/src/components/SelectorButton.tsx
@@ -19,6 +19,11 @@ export const SelectorButton: React.FC<SelectorButtonProps> = ({
       ? "selector-button__text--selected"
       : "";
 
+  const selectedSubtextStyle =
+    selectedTimeSeconds === timeSecondsLabel
+      ? "selector-button__subtext--selected"
+      : "";
+
   const selectedBackgroundStyle =
     selectedTimeSeconds === timeSecondsLabel
       ? "selector-button__background--selected"
@@ -40,7 +45,11 @@ export const SelectorButton: React.FC<SelectorButtonProps> = ({
         >
           {minutes}
         </div>
-        <div>minutes</div>
+        <div
+          className={`${styles["selector-button__subtext"]} ${styles[selectedSubtextStyle]}`}
+        >
+          min
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/StartButton.module.scss b/src/components/StartButton.module.scss
@@ -12,6 +12,11 @@
   position: relative;
   border-radius: 0.7rem;
 
+  &:hover,
+  &:active {
+    cursor: pointer;
+  }
+
   &__content {
     position: absolute;
     width: 96%;