fix: update styles

Author: leslieyip02

website/src/apis/optimiser.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosError } from 'axios';
 
-const api = '/api/optimiser/optimise';
+const api = 'https://nusmods.com/api/optimiser/optimise';
 
 export interface OptimiseRequest {
   modules: string[];

website/src/utils/optimiser.ts

@@ -49,8 +49,8 @@ export function getOptimiserAcadYear(acadYear: AcadYear): string {
 }
 
 export function getOptimiserTime(time: LessonTime): string {
-  const hh = padStart(`${getLessonTimeHours(time)}`, 2, '0');
-  const mm = padStart(`${getLessonTimeMinutes(time)}`, 2, '0');
+  const hh = padStart(String(getLessonTimeHours(time)), 2, '0');
+  const mm = padStart(String(getLessonTimeMinutes(time)), 2, '0');
   return `${hh}:${mm}`;
 }
 

website/src/views/hooks/useOptimiserForm.tsx

@@ -27,9 +27,11 @@ export type OptimiserFormFields = {
   setMaxConsecutiveHours: Dispatch<SetStateAction<number>>;
 };
 
+// TODO: leslieyip02 - consider using react-hook-form
+// https://github.com/nusmodifications/nusmods/pull/4094#discussion_r2209166244
 export default function useOptimiserForm(): OptimiserFormFields {
   const [liveLessonOptions, setLiveLessonOptions] = useState<LessonOption[]>([]);
-  const [freeDays, setFreeDays] = useState<Set<DayText>>(new Set());
+  const [freeDays, setFreeDays] = useState(new Set<DayText>());
   const [lessonTimeRange, setLessonTimeRange] = useState(defaultLessonTimeRange);
   const [maxConsecutiveHours, setMaxConsecutiveHours] = useState(defaultMaxConsecutiveHours);
   const [lunchTimeRange, setLunchTimeRange] = useState(defaultLunchTimeRange);

website/src/views/optimiser/OptimiserButton.scss

@@ -1,12 +1,13 @@
 @import '~styles/utils/modules-entry.scss';
 
 @keyframes grow {
-  0%, 100% {
-    opacity: 0.5; 
+  0%,
+  100% {
+    opacity: 0.5;
     transform: scale(0.8);
   }
   50% {
-    opacity: 1; 
+    opacity: 1;
     transform: scale(1.2);
   }
 }
@@ -19,7 +20,6 @@
   animation: grow 1s ease-in-out infinite;
 }
 
-// Optimize button section
 .optimizeButtonSection {
   display: flex;
   flex-direction: column;
@@ -90,4 +90,12 @@
 
 .estimateTimeValue {
   font-weight: bold;
-} 
+}
+
+.zapIcon {
+  fill: #ff5138;
+
+  &.disabled {
+    fill: #69707a;
+  }
+}

website/src/views/optimiser/OptimiserButton.tsx

@@ -18,7 +18,6 @@ const OptimiserButton: React.FC<OptimiserButtonProps> = ({
   onClick,
 }) => {
   const isDisabled = isOptimising || isEmpty(lessonOptions) || !isEmpty(freeDayConflicts);
-  const zapFill = isEmpty(lessonOptions) || !isEmpty(freeDayConflicts) ? '#69707a' : '#ff5138';
 
   return (
     <div className={styles.optimizeButtonSection}>
@@ -39,7 +38,12 @@ const OptimiserButton: React.FC<OptimiserButtonProps> = ({
           </span>
         ) : (
           <>
-            <Zap size={20} fill={zapFill} />
+            <Zap
+              size={20}
+              className={classnames(styles.zapIcon, {
+                [styles.disabled]: isDisabled,
+              })}
+            />
             Optimise Timetable
           </>
         )}

website/src/views/optimiser/OptimiserContent.scss renamed to website/src/views/optimiser/OptimiserContainer/OptimiserContent.scss

@@ -19,10 +19,10 @@ import {
 import { FreeDayConflict, LessonOption } from 'types/optimiser';
 import useOptimiserForm from 'views/hooks/useOptimiserForm';
 import styles from './OptimiserContent.scss';
-import OptimiserHeader from './OptimiserHeader';
-import OptimiserForm from './OptimiserForm/OptimiserForm';
-import OptimiserButton from './OptimiserButton';
-import OptimiserResults from './OptimiserResults';
+import OptimiserHeader from '../OptimiserHeader';
+import OptimiserForm from '../OptimiserForm/OptimiserForm';
+import OptimiserButton from '../OptimiserButton';
+import OptimiserResults from '../OptimiserResults';
 
 const OptimiserContent: React.FC = () => {
   const activeSemester = useSelector(({ app }: State) => app.activeSemester);

website/src/views/optimiser/OptimiserContent.tsx renamed to website/src/views/optimiser/OptimiserContainer/OptimiserContent.tsx

@@ -39,22 +39,11 @@
 }
 
 .optimiserDropdown {
-  width: 6.4rem;
-  padding: 0.25rem 0.75rem;
-  padding-left: 0.9rem;
+  composes: custom-select from global;
+  padding: 0.5rem;
   border: 1px solid var(--gray-lighter);
   border-radius: 0.25rem;
-  outline: none;
-  font-size: 1.1rem;
-  font-family: monospace;
   color: inherit;
-  background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
-  background-position: right 0.7rem center;
-  background-size: 0.85rem;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  appearance: none;
-  cursor: pointer;
 
   @include night-mode {
     background-color: var(--gray-lightest);

website/src/views/optimiser/index.tsx renamed to website/src/views/optimiser/OptimiserContainer/index.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const OptimiserFormTooltip: React.FC<Props> = ({ content }) => (
   <Tooltip content={content} placement="right">
-    <Info className={styles.optimiserTooltipIcon} />
+    <Info className={styles.optimiserTooltipIcon} tabIndex={0} />
   </Tooltip>
 );