fix: update style issues

Author: leslieyip02

website/src/views/optimiser/OptimiserForm/OptimiserForm.scss

@@ -46,13 +46,13 @@
 }
 
 .optimiserDropdown {
-  width: 7.1rem;
+  width: 6.4rem;
   padding: 0.25rem 0.75rem;
   padding-left: 0.9rem;
   border: 1px solid var(--gray-lighter);
   border-radius: 0.25rem;
   outline: none;
-  font-size: 1.3rem;
+  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>");

website/src/views/optimiser/OptimiserForm/OptimiserFormTooltip.tsx

@@ -1,5 +1,5 @@
 import { Info } from 'react-feather';
-import Tooltip from 'views/components/Tooltip';
+import Tooltip from 'views/components/Tooltip/Tooltip';
 
 import styles from './OptimiserFormTooltip.scss';
 

website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.tsx

@@ -127,8 +127,8 @@ const OptimiserLunchTimeRangeSelect: React.FC<LunchTimeRangeSelectProps> = ({
     <section className={styles.timeControls}>
       <div className={styles.timeColumn}>
         <span className={styles.optimiserDescription}>
-          <h4>Select maximum consecutive hours of live lessons</h4>
-          <OptimiserFormTooltip content="Prioritises having less than this number of consecutive hours of live lessons" />
+          <h4>Select range for preferred lunch break timings</h4>
+          <OptimiserFormTooltip content="Prioritises 1-hour lunch breaks in this range" />
         </span>
 
         <div className={styles.timeRow}>

website/src/views/optimiser/OptimiserHeader.scss

@@ -45,10 +45,6 @@
   gap: 0.1rem;
 }
 
-.descriptionText {
-  max-width: 32rem;
-}
-
 .titleIcon {
   color: #ff5138;
 } 

website/src/views/optimiser/OptimiserResults.scss

@@ -1,18 +1,6 @@
 @import '~styles/utils/modules-entry.scss';
 @import './common.scss';
 
-.timetableLink {
-  color: inherit;
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.tag {
-    cursor: pointer;
-}
-
-// Unassigned lessons warning
 .unassignedWarning {
   display: flex;
   flex-direction: column;
@@ -89,7 +77,6 @@
   color: #69707a;
 }
 
-// Shareable link section
 .shareableLinkSection {
   display: flex;
   flex-direction: column;

website/src/views/optimiser/OptimiserResults.tsx

@@ -55,7 +55,6 @@ const OptimiserResults: React.FC<OptimiserResultsProps> = ({
                   className={classnames(
                     `color-${lesson.colorIndex}`,
                     styles.lessonTag,
-                    styles.tag,
                     styles.unassignedLessonTag,
                   )}
                 >

website/src/views/optimiser/common.scss

@@ -4,9 +4,8 @@ $form-fields-gap: 2rem;
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 0.5rem;
-  border-top: none;
-  border-right: none;
-  border-left: none;
+  border-width: 0 0 0.2rem;
+  border-style: solid;
   border-radius: 0.25rem;
   font-weight: bold;
   font-size: 0.8rem;