style fixes for responsiveness

Author: nrakhshan

client/src/components/button/ButtonOutlined/ButtonOutlined.scss

@@ -31,6 +31,7 @@
   border-image-repeat: repeat;
   position: relative;
   min-width: 200px;
+  min-height: 100px;
 
   padding: 10px 26px;
 
@@ -39,7 +40,7 @@
     font-family: 'Jersey 20', sans-serif;
   }
   h2 {
-    font-size: 12px;
+    font-size: 18px;
   }
 
   @include devices(tablet) {

client/src/components/buttonSelector/buttonSelector/ButtonSelector.jsx

@@ -20,7 +20,7 @@ const ButtonSelector = ({
     <ButtonOutlined
       key={index}
       onClick={() => setActiveButton(index)}
-      label={item.title}
+      label={item.name}
       sub={item.sub}
       style={{
         // backgroundColor: `${item.buttonColor}`,

client/src/components/schedule/ScheduleHome/ScheduleHome.jsx

@@ -32,7 +32,7 @@ const ScheduleComponent = () => {
   const buttonList = Object.keys(data).map((item, index) => {
     const dayOfWeek = item.split(' ')[0];
     const date = item.split(' ')[1] + ' ' + item.split(' ')[2];
-    return { name: item, title: dayOfWeek, sub: date };
+    return { name: dayOfWeek, title: dayOfWeek, sub: date };
   });
 
   return (
@@ -151,8 +151,13 @@ export const ScheduleComponentAccordion = ({ scheduleDay, closeAll }) => {
               ) : (
                 <></>
               )}
+              <h2 className="eventtimemobile">
+                {startTime === ' ' && endTime === ' ' ? '' : `${startTime} - ${endTime}`}
+              </h2>
             </div>
-            <h2>{startTime === ' ' && endTime === ' ' ? '' : `${startTime} - ${endTime}`}</h2>
+            <h2 className="eventtimedesktop">
+              {startTime === ' ' && endTime === ' ' ? '' : `${startTime} - ${endTime}`}
+            </h2>
           </div>
         }
         setIsOpen={setIsOpen}

client/src/components/schedule/ScheduleHome/ScheduleHome.scss

@@ -171,8 +171,11 @@
     font-size: 24px;
     padding: 15px 5px;
     @include devices(tablet) {
-      font-size: 20px;
-      padding: 10px 0px;
+      // font-size: 20px;
+      // padding: 10px 0px;
+      margin-bottom: 0px !important;
+      padding-bottom: 0px !important;
+      font-weight: 900;
     }
     // color: var(--text-dark);
   }
@@ -182,8 +185,9 @@
     // color: var(--gray-time-label);
     text-align: right;
     @include devices(tablet) {
-      font-size: 15px;
-      padding: 5px 0px;
+      // font-size: 30px;
+      // padding: 5px 0px;
+      font-weight: 700;
     }
   }
   p {
@@ -206,24 +210,61 @@
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
+
+  @include devices(tablet) {
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.eventtimedesktop {
+  @include devices(tablet) {
+    display: none;
+  }
 }
+
+.eventtimemobile {
+  @media (min-width: 767px) {
+    display: none;
+  }
+  margin-left: 0px !important;
+  margin-bottom: 10px;
+  padding-top: 5px !important;
+}
+
 .schedule-accordion-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   flex-direction: column;
   user-select: none;
+
+  @include devices(tablet) {
+    align-items: center;
+    justify-content: center;
+  }
 }
 .schedule-accordion-location {
   // color: var(--gray-time-label);
   margin-bottom: 10px;
   font-size: 16px;
+
+  @include devices(tablet) {
+    display: none;
+  }
 }
 .schedule-accordion-header-location-icon {
   width: 14px;
   height: 14px;
   margin-top: 3px;
   margin-right: 3px;
+
+  @include devices(tablet) {
+    visibility: hidden;
+    width: 10px;
+    height: 10px;
+  }
 }
 .schedule-accordion-header-location-container {
   display: flex;

client/src/pages/FAQ/FAQ.scss

@@ -314,7 +314,7 @@
 .faq-search-result-answer-accordion {
   margin-top: 7px;
   border-radius: 12px;
-  color: var(--text-inverted);
+  color: var(--lilac);
   @include devices(tablet) {
     font-size: 16px;
   }
@@ -330,7 +330,7 @@
 .faq-no-results {
   width: 100%;
   text-align: center;
-  color: var(--text-dynamic);
+  color: var(--text-primary);
 }
 
 .pagination-controls {
@@ -355,7 +355,7 @@
 
     &.active {
       background-color: var(--monster);
-      color: var(--text-inverted);
+      color: var(--mikado);
     }
   }
 }

client/src/pages/Home/Home.scss

@@ -91,8 +91,9 @@
     padding: 0px 25px;
 
     h1 {
-      font-size: 150px;
+      font-size: 120px;
       text-align: right;
+      margin: 0px 0px 0px 0px;
     }
 
     h2 {

client/src/util/colors.jsx

@@ -4,7 +4,7 @@ export const colors = {
   '--bg-secondary': ['#EBEBEB', '#382159'],
   '--neutral-secondary': ['#EBEBEB', '#2E194C'],
   '--text-primary': ['#000000', '#FFFFFF'],
-  '--text-inverted': ['#e9dff5', '#000000'],
+  '--text-inverted': ['#E9DFF5', '#000000'],
   '--text-secondary': ['#5E5E5E', '#DFCDF3'],
   '--vignette': ['#00000040', '#00000040'],
   '--link-dynamic': ['#A77AD7', '#FFC600'],
@@ -19,6 +19,8 @@ export const colors = {
   '--dusk': ['#EBEBEB', '#EBEBEB'],
   '--dawn': ['#3C3C3C', '#3C3C3C'],
 
+  '--lilac': ['#E9DFF5', '#E9DFF5'],
+
   // 2T5 Schedule Colours
   '--sc-general': ['#711F8B', '#711F8B'],
   '--sc-long': ['#FFC600', '#FFC600'],
@@ -66,7 +68,7 @@ export const colors = {
   '--text-light': ['#f3f3f3', '#f3f3f3'],
   '--text-dynamic': ['#20002e', '#f3f3f3'],
   '--text-muted': ['#696969', '#696969'],
-  '--page-bg': ['#efe9f8', '#382159'],
+  '--page-bg': ['#FFFFFF', '#291742'],
   '--purple-transparent': ['#7b33a8d6', '#793DA1B8'],
   '--purple-transparent-more': ['#7b33a830', '#79409F58'],
   '--transparent': ['#00000000', '#00000000'],