finally fixed the schedule styling for good (hopefully)

Author: nrakhshan

client/src/assets/accordion/angle-up-solid_yellow.svg

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './ButtonOutlined.scss';
 
-const ButtonOutlined = ({ label, onClick, isSecondary, isDisabled, style, className }) => {
+const ButtonOutlined = ({ label, sub, onClick, isSecondary, isDisabled, style, className }) => {
   return (
     <div
       style={style}
@@ -11,13 +11,17 @@ const ButtonOutlined = ({ label, onClick, isSecondary, isDisabled, style, classN
         isDisabled ? 'button-outlined-disabled' : ''
       } ${className}`}
     >
-      {label}
+      <div className="text-container">
+        <h1>{label}</h1>
+        <h2>{sub}</h2>
+      </div>
     </div>
   );
 };
 
 ButtonOutlined.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  sub: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
   isSecondary: PropTypes.bool,
   isDisabled: PropTypes.bool,

client/src/components/button/ButtonOutlined/ButtonOutlined.jsx

@@ -16,65 +16,53 @@
 
 .button-outlined {
   margin: 15px 10px;
-  background-color: var(--button-outlined-bg);
-  color: var(--button-outlined-font);
-  display: inline-block;
-  border-radius: 11.5px;
-  padding: 10px 26px;
-  box-shadow: var(--shadow);
+
+  border-image-source: var(--schedule-dates-pixel-border);
+  background-color: var(--monster);
+  color: var(--lavender);
+  box-shadow: inset -6px -6px var(--button-pressed-shadow);
+  border-radius: 18px;
   text-align: center;
-  font-weight: 600;
   cursor: url('../../../../assets/cursor/cursor.png'), auto; // Apply custom cursor here
   user-select: none;
-  border-image-source: var(--pixel-border-pressed);
   border-image-slice: 30;
   border-image-width: 30px;
   border-image-outset: 1px;
   border-image-repeat: repeat;
-  //box-shadow: inset 4px 4px #00000028, inset -4px -4px #ffffff25;
   position: relative;
+  min-width: 200px;
 
-  //BUTTON BORDERS
-  /* removed borders on buttons so there is less cramping on mobile view
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: 60px;
-    height: 60px;
-    background-repeat: no-repeat;
-    z-index: 0;
-  }
+  padding: 10px 26px;
 
-  &::before {
-    top: -10px;
-    left: -10px;
-    background-image: var(--top-left-corner-border);
+  h1 {
+    font-size: 35px;
+    font-family: 'Jersey 20', sans-serif;
   }
-
-  &::after {
-    bottom: -45px;
-    right: -15px;
-    background-image: var(--bottom-right-corner-border);
+  h2 {
+    font-size: 12px;
   }
-  
-  //BUTTON BORDERS END
-  */
 
   @include devices(tablet) {
-    font-size: 16px;
-    padding: 10px 30px;
-    border-width: 3px;
+    padding: 25px 30px;
     margin: 8px 6px;
   }
 }
 
 .button-outlined-secondary {
-  background-color: var(--button-outlined-bg-secondary);
-  color: var(--button-outlined-font);
-  font-weight: unset;
-  box-shadow: 3px 3px 3px #00000038;
-  border-image-source: var(--pixel-border);
+  // background-color: var(--button-outlined-bg-secondary);
+  // color: var(--button-outlined-font);
+  // font-weight: unset;
+  // box-shadow: 3px 3px 3px #00000038;
+  box-shadow: inset -6px -6px #3d0f58;
+  color: var(--mikado);
+  background-color: var(--schedule-container);
+  // border-image-source: var(--pixel-border);
+  border-radius: 18px;
+  border-image-source: var(--schedule-dates-pixel-border-selected);
+  border-image-slice: 12;
+  border-image-width: 12px;
+  border-image-outset: 1px;
+  border-image-repeat: repeat;
 
   &:hover {
     border-color: var(--light-purple);
@@ -85,8 +73,8 @@
   &:active {
     transform: translateY(2px);
     //box-shadow: inset 4px 4px #00000038, inset -4px -4px #ffffff44;
-    background-color: var(--button-active-bg);
-    border-image-source: var(--pixel-border-pressed);
+    // background-color: var(--button-active-bg);
+    // border-image-source: var(--pixel-border-pressed);
   }
 }
 

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

@@ -20,14 +20,15 @@ const ButtonSelector = ({
     <ButtonOutlined
       key={index}
       onClick={() => setActiveButton(index)}
-      label={item.name}
+      label={item.title}
+      sub={item.sub}
       style={{
-        backgroundColor: `${item.buttonColor}`,
-        flex: 1,
+        // backgroundColor: `${item.buttonColor}`,
+        // flex: 1,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        maxWidth: maxWidthButton,
+        // maxWidth: maxWidthButton,
         ...style,
       }}
       className={classNameButton}

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

@@ -2,13 +2,45 @@
 .button-selector-items {
   display: flex;
   justify-content: center;
-  flex-wrap: wrap;
+  justify-content: space-evenly;
+  // flex-wrap: wrap;
   padding: 10px;
-  row-gap: 10px;
+  // padding: 10px 40px;
+  gap: 10px;
+  // max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: 0px;
+  font-family: 'Proxima Nova', sans-serif;
+  // mask-image: radial-gradient(circle,rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.52) 75%, rgba(0, 0, 0, 0) 100%);
+  // -webkit-mask-image: linear-gradient(to right, #00000000, black 20%, black 80%, #00000000);
+  // --webkit-mask-image: radial-gradient(circle,rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.52) 75%, rgba(0, 0, 0, 0) 100%);
 }
 
 .button-selector-no-stretch {
   display: inline-block;
   margin: auto;
   text-align: center;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Track (background of the scrollbar) */
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+  // border-radius: 8px;
+}
+
+/* Thumb (the draggable part) */
+::-webkit-scrollbar-thumb {
+  background-color: var(--mikado);
+  // border-radius: 8px;
+  // border: 2px solid #f0f0f0; /* creates padding around the thumb */
+}
+
+/* On hover */
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--palegold);
+}

client/src/components/buttonSelector/buttonSelector/ButtonSelector.scss

@@ -29,8 +29,10 @@ const ScheduleComponent = () => {
   }
   const [selectedDayIndex, setSelectedDayIndex] = useState(count);
   const [closeAll, setCloseAll] = useState(false);
-  const buttonList = Object.keys(data).map((item) => {
-    return { name: item };
+  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 (
@@ -47,13 +49,15 @@ const ScheduleComponent = () => {
               setSelectedDayIndex(index);
               setCloseAll(!closeAll);
             }}
-            style={{
-              maxWidth: '250px',
-              marginTop: '0px',
-              marginBottom: '10px',
-              padding: '11px 15px',
-              minWidth: '110px',
-            }}
+            style={
+              {
+                // maxWidth: '20px',
+                // marginTop: '0px',
+                // marginBottom: '10px',
+                // padding: '11px 15px',
+                // minWidth: '110px',
+              }
+            }
           />
         </div>
         <div className="schedule-container-dates desktop-only">
@@ -154,6 +158,7 @@ export const ScheduleComponentAccordion = ({ scheduleDay, closeAll }) => {
         setIsOpen={setIsOpen}
         isOpen={isOpen}
         canOpen={scheduleDay['Event Description'] !== undefined}
+        dark={scheduleDay['Color'] == 'night' || scheduleDay['Color'] == 'general'}
       >
         <p dangerouslySetInnerHTML={{ __html: scheduleDay['Event Description'] }} />
       </SingleAccordion>

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

@@ -14,7 +14,7 @@
 
   @include devices(tablet) {
     flex-direction: column;
-    padding: 0px;
+    margin: 0px 10%;
   }
 }
 
@@ -120,9 +120,11 @@
   h1 {
     font-size: 48px;
     font-family: 'Jersey 20', sans-serif;
+    padding-left: 20px;
   }
   h2 {
     font-size: 20px;
+    padding-left: 20px;
   }
 
   &:active {

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

@@ -1,10 +1,20 @@
 import { React, useState, useRef, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import faAngleDown from '../../../../assets/accordion/angle-up-solid.svg';
+import faAngleDownDark from '../../../../assets/accordion/angle-up-solid_yellow.svg';
 import './SingleAccordion.scss';
 import { DarkModeContext } from '../../../../util/DarkModeProvider';
 
-const SingleAccordion = ({ header, children, isOpen, setIsOpen, canOpen, className, style }) => {
+const SingleAccordion = ({
+  header,
+  children,
+  isOpen,
+  setIsOpen,
+  canOpen,
+  className,
+  style,
+  dark,
+}) => {
   const { darkMode } = useContext(DarkModeContext);
 
   const [height, setHeight] = useState('0px');
@@ -15,6 +25,17 @@ const SingleAccordion = ({ header, children, isOpen, setIsOpen, canOpen, classNa
   useEffect(() => {
     setHeight(isOpen ? `${content.current.scrollHeight}px` : '0px');
     setRotate(isOpen ? 'accord-icon' : 'accord-icon rotate');
+
+    // Without this event listener, if you open an accordion then resize, it'll retain
+    // the height it had when you opened it, but the text will get resized, so it'll get
+    // cut off
+    const handleResize = () => {
+      setHeight(isOpen ? `${content.current.scrollHeight}px` : '0px');
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, [isOpen]);
 
   function toggleAccordion() {
@@ -32,9 +53,9 @@ const SingleAccordion = ({ header, children, isOpen, setIsOpen, canOpen, classNa
         {canOpen !== false ? (
           <div style={{ marginLeft: 'auto' }} className={'accord-text'}>
             <img
-              src={faAngleDown}
+              src={dark ? faAngleDownDark : faAngleDown}
               className={`${rotate}`}
-              style={{ filter: darkMode ? 'invert(1)' : 'unset' }}
+              // style={{ filter: darkMode ? 'invert(1)' : 'unset' }}
               alt="Accordion Button"
               width="15px"
             />
@@ -58,6 +79,7 @@ SingleAccordion.propTypes = {
   canOpen: PropTypes.bool.isRequired,
   className: PropTypes.string,
   style: PropTypes.object,
+  dark: PropTypes.bool,
 };
 
 export { SingleAccordion };

client/src/components/text/Accordion/SingleAccordion/SingleAccordion.jsx

@@ -437,7 +437,7 @@
   overflow: hidden;
   position: relative;
   // Add a gradient fade on the left and right edges for a clean look
-  mask-image: linear-gradient(to right, #00000080, black 20%, black 80%, #00000080);
+  mask-image: linear-gradient(to right, #00000000, black 20%, black 80%, #00000000);
   -webkit-mask-image: linear-gradient(to right, #00000000, black 20%, black 80%, #00000000);
 }