fix: make dots for themes and testimonials sliders consistent

ucsddesignco · Jun 2, 2024 · a8a2618 · a8a2618
1 parent 37f94a9
commit a8a2618
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/src/app/components/Sticker/Sticker.scss b/src/app/components/Sticker/Sticker.scss
@@ -3,6 +3,7 @@
   position: absolute;
   z-index: 2;
   scale: 0.65;
+  width: fit-content;
   cursor: grab;
 
   &.hide-mobile {

diff --git a/src/app/components/Testimonial/Testimonial.scss b/src/app/components/Testimonial/Testimonial.scss
@@ -1,4 +1,6 @@
 .testimonials {
+  $dot-size: 2px;
+  $dot-gap: 7px;
   $hide-slides-gradient: linear-gradient(
     90deg,
     $primary-white 0%,
@@ -193,30 +195,29 @@
     position: relative;
     display: flex;
     padding: 10px 0;
+    align-items: center;
     justify-content: center;
-    z-index: 2;
+
     @media (min-width: $mobile-breakpoint) {
       display: none;
     }
-  }
 
-  .dot {
-    border: 1px solid $primary-black;
-    width: 10px;
-    height: 10px;
-    background: transparent;
-    border-radius: 50%;
-    margin: 0 5px;
-    padding: 5px;
-    cursor: pointer;
-    z-index: 2;
-  }
+    .dot {
+      border: 1px solid $primary-black;
+      background: transparent;
+      border-radius: 50%;
+      margin: 0 5px;
+      padding: 4px;
+      cursor: pointer;
+      z-index: 2;
 
-  .dot:focus {
-    outline: none;
-  }
+      &:focus {
+        outline: none;
+      }
 
-  .dot.active {
-    background: $primary-black;
+      &.active {
+        background: $primary-black;
+      }
+    }
   }
 }
diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -1,6 +1,6 @@
 .theme-slider-container {
   /* variables */
-  $dot-size: 2px;
+  $dot-size: 4px;
   $dot-gap: 7px;
   $hide-slides-gradient: linear-gradient(
     90deg,
@@ -38,11 +38,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    grid-area: 1 / 1 / 2 / 2;
 
     .dot {
-      background-color: $outline-gray;
-      border-color: transparent;
+      border: 1px solid $primary-black;
+      background: transparent;
       border-radius: 50%;
       margin: 0 $dot-gap;
       padding: $dot-size;

diff --git a/src/app/pages/FAQ/constants.ts b/src/app/pages/FAQ/constants.ts
@@ -1,7 +1,7 @@
 export const FAQContent = [
   {
     id: 'item-1',
-    header: 'Who is eligible to participate in UP-Grade?',
+    header: 'Who is eligible to participate?',
     content:
       'Eligibility is offered to all UCSD students and recent graduates — of various backgrounds, experience levels, and majors! We encourage anyone interested to apply, to learn, and offer their unique knowledge.'
   },