fix: adjust registration styling

ucsddesignco · Nov 7, 2024 · 41b2778 · 41b2778
1 parent 0a8c4e7
commit 41b2778
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 94 deletions.
diff --git a/src/app/badge/Badge.scss b/src/app/badge/Badge.scss
@@ -119,6 +119,7 @@
       height: 100%;
       width: 100%;
       margin-bottom: calc(var(--nav-height) / 2);
+      width: 50vw;
 
       #mascot-badge-container {
         display: grid;

diff --git a/src/app/register/Register.scss b/src/app/register/Register.scss
@@ -155,7 +155,6 @@
     }
 
     p {
-      font-size: 0.875rem;
       max-width: 38ch;
       text-align: center;
 

diff --git a/src/components/Register/FormComponents/FormText/FormText.scss b/src/components/Register/FormComponents/FormText/FormText.scss
@@ -31,7 +31,7 @@
       color: $dark-gray;
     }
 
-    &:focus {
+    &:focus-visible {
       border-bottom: 1px solid $light-green;
     }
   }

diff --git a/src/components/Register/FormSteps/FormStep1/FormStep1.tsx b/src/components/Register/FormSteps/FormStep1/FormStep1.tsx
@@ -21,7 +21,7 @@ export default function FormStep1({
         register={register}
         name="name"
         label="Name"
-        placeholder="e.g. Detective Croc"
+        placeholder="e.g. Detective Duck"
         error={errors.name}
       />
       <FormText

diff --git a/src/components/Register/FormSteps/FormStep3/FormStep3.scss b/src/components/Register/FormSteps/FormStep3/FormStep3.scss
@@ -17,11 +17,14 @@
     position: relative;
     margin-top: -1.5rem;
     width: auto;
-    height: 50%;
+    // height: 50%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
 
     @media (min-width: 400px) {
       width: auto;
-      height: 40%;
+      // height: 50%;
       max-height: 15rem;
     }
 
@@ -49,8 +52,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    min-height: 200px;
 
     .customization-box {
+      position: relative;
       width: 100%;
       height: 100%;
       max-height: 22rem;
@@ -60,21 +65,27 @@
       margin-top: -$border-width;
       position: relative;
       z-index: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
     }
   }
 
   .color-palette-container,
   .hat-container,
   .accessories-container {
+    width: 100%;
+    position: absolute;
     padding-left: 0;
     padding: 1rem;
     list-style-type: none;
     display: grid;
-    gap: 5vw;
-    grid-template-columns: repeat(auto-fit, minmax(calc(40px + 5vw), 1fr));
+    gap: 0.5rem;
+    grid-template-columns: repeat(3, 1fr);
 
-    @media (min-width: $tablet-breakpoint) {
-      grid-template-columns: repeat(auto-fit, minmax(calc(80px), 1fr));
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1.5rem;
     }
 
     li {
@@ -87,19 +98,20 @@
         width: 100%;
       }
 
-      .color-grouping {
+      button {
         border: none;
         background-color: inherit;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
-        height: 100%;
+        max-width: 65px;
+        aspect-ratio: 1;
 
         div {
           width: 100%;
-          border-radius: 10px;
+          border-radius: 18px;
           aspect-ratio: 1;
         }
       }
@@ -112,20 +124,10 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      button {
-        border: none;
-        background-color: transparent;
-        aspect-ratio: 1;
-        cursor: pointer;
-
-        @media (min-width: $tablet-breakpoint) {
-          width: 6.5rem;
-        }
 
-        img {
-          width: 100%;
-          height: 100%;
-        }
+      img {
+        width: 100%;
+        height: 100%;
       }
     }
   }

diff --git a/src/components/Register/FormSteps/FormStep3/FormStep3.tsx b/src/components/Register/FormSteps/FormStep3/FormStep3.tsx
@@ -35,73 +35,84 @@ export default function FormStep3() {
       <div className="customization-container">
         <FolderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
         <div className="customization-box">
-          {activeTab === 'Color' && (
-            <ul className="color-palette-container">
-              {Object.entries(COLOR_THEMES).map(([breed, colors]) => (
-                <li key={`duck-type-${breed}`}>
-                  <button
-                    type="button"
-                    className="color-grouping"
-                    onClick={() => onColorChange(breed as MascotBreeds)}
-                    aria-label={`${breed} color scheme`}
-                  >
-                    <div
-                      style={{
-                        border: `4px solid ${colors.shadow}`,
-                        backgroundColor: colors.color
-                      }}
-                    />
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
+          <ul
+            className="color-palette-container"
+            style={{
+              opacity: activeTab === 'Color' ? '1' : '0',
+              pointerEvents: activeTab === 'Color' ? 'all' : 'none'
+            }}
+          >
+            {Object.entries(COLOR_THEMES).map(([breed, colors]) => (
+              <li key={`duck-type-${breed}`}>
+                <button
+                  type="button"
+                  className="color-grouping"
+                  onClick={() => onColorChange(breed as MascotBreeds)}
+                  aria-label={`${breed} color scheme`}
+                >
+                  <div
+                    style={{
+                      border: `4px solid ${colors.shadow}`,
+                      backgroundColor: colors.color
+                    }}
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
 
-          {activeTab === 'Hat' && (
-            <ul className="hat-container">
-              {Object.entries(MASCOT_HATS).map(([hatName, hatData]) => (
-                <li key={hatName}>
+          <ul
+            className="hat-container"
+            style={{
+              opacity: activeTab === 'Hat' ? '1' : '0',
+              pointerEvents: activeTab === 'Hat' ? 'all' : 'none'
+            }}
+          >
+            {Object.entries(MASCOT_HATS).map(([hatName, hatData]) => (
+              <li key={hatName}>
+                <button
+                  type="button"
+                  onClick={() => onHatChange(hatName as MascotHats)}
+                  aria-label={`${hatName} hat`}
+                >
+                  <Image
+                    src={hatData.iconSrc}
+                    alt={`${hatName} icon`}
+                    width={100}
+                    height={100}
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+          <ul
+            className="accessories-container"
+            style={{
+              opacity: activeTab === 'Accessories' ? '1' : '0',
+              pointerEvents: activeTab === 'Accessories' ? 'all' : 'none'
+            }}
+          >
+            {Object.entries(MASCOT_ACCESSORIES).map(
+              ([accessory_name, accessory_data]) => (
+                <li key={accessory_name}>
                   <button
                     type="button"
-                    onClick={() => onHatChange(hatName as MascotHats)}
-                    aria-label={`${hatName} hat`}
+                    onClick={() =>
+                      onAccessoryChange(accessory_name as MascotAccessories)
+                    }
+                    aria-label={`${accessory_name} accessory`}
                   >
                     <Image
-                      src={hatData.iconSrc}
-                      alt={`${hatName} icon`}
+                      src={accessory_data.iconSrc}
+                      alt={`${accessory_name} icon`}
                       width={100}
                       height={100}
                     />
                   </button>
                 </li>
-              ))}
-            </ul>
-          )}
-
-          {activeTab === 'Accessories' && (
-            <ul className="accessories-container">
-              {Object.entries(MASCOT_ACCESSORIES).map(
-                ([accessory_name, accessory_data]) => (
-                  <li key={accessory_name}>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        onAccessoryChange(accessory_name as MascotAccessories)
-                      }
-                      aria-label={`${accessory_name} accessory`}
-                    >
-                      <Image
-                        src={accessory_data.iconSrc}
-                        alt={`${accessory_name} icon`}
-                        width={100}
-                        height={100}
-                      />
-                    </button>
-                  </li>
-                )
-              )}
-            </ul>
-          )}
+              )
+            )}
+          </ul>
         </div>
       </div>
     </div>

diff --git a/src/components/Register/FormSteps/FormStep4/FormStep4.scss b/src/components/Register/FormSteps/FormStep4/FormStep4.scss
@@ -38,7 +38,7 @@
   }
 
   #mascot-badge-container {
-    padding-top: 1rem;
+    padding-block: 1rem;
     @media (min-width: $tablet-breakpoint) {
       display: none;
     }

diff --git a/src/components/Register/MascotBadge/MascotBadge.tsx b/src/components/Register/MascotBadge/MascotBadge.tsx
@@ -64,8 +64,9 @@ export default function MascotBadge({
     if (!shouldScale) return;
     if (badgeContainerRef.current && badgeRef.current && !hasMeasured.current) {
       hasMeasured.current = true;
-      const badgeContainerHeight =
-        badgeContainerRef.current?.getBoundingClientRect().height;
+      const badgeContainerHeight = badgeContainerRef.current
+        ? badgeContainerRef.current.getBoundingClientRect().height - 10
+        : 0;
       const badgeWidth = badgeRef.current?.getBoundingClientRect().width;
       // For Safari bug
       const badgeHeight = (badgeWidth * 378) / 252;

diff --git a/src/components/Register/RegisterAssets/RegisterAssets.scss b/src/components/Register/RegisterAssets/RegisterAssets.scss
@@ -16,7 +16,7 @@
     }
 
     &-stacked-papers {
-      top: 10%;
+      top: 15%;
       left: 0;
     }
 
@@ -65,21 +65,13 @@
         display: none;
       }
 
-      &-magnify-glass {
-        display: none;
-      }
-
       &-polaroid {
         display: none;
       }
 
       &-bottom-left-paper {
         display: none;
       }
-
-      &-feather {
-        display: none;
-      }
     }
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,7 +155,6 @@ @@
         }
         p {
-          font-size: 0.875rem;
           max-width: 38ch;
           text-align: center;
@@ Expand Down @@