fix(timetable): border-radius gap difference (#3401)

* Fix border-radius gap issue with Timetable
- Updated Timetable Cell's border-radius to be the same as Timetable's
border-radius to fix the border-gap issue

* Created new style: timetable-border-radius in
Timetable.scss

.days class in Timetable.scss and .clickable class in
Timetable.scss now reference from this new style

* Move variables to variables.scss

---------

Co-authored-by: Ravern Koh <[email protected]>

Author: tankh99

website/src/views/timetable/Timetable.scss

@@ -1,7 +1,5 @@
 @import './_variables.scss';
 
-$timetable-min-width: $timetable-row-height * 16;
-
 .container {
   min-width: $timetable-min-width;
   background: var(--body-bg); // For timetable export
@@ -22,7 +20,7 @@ $timetable-min-width: $timetable-row-height * 16;
   margin: 0;
   border: $timetable-border;
   border-left-width: 0;
-  border-radius: $btn-border-radius;
+  border-radius: $timetable-border-radius;
 
   @include vertical-mode {
     display: flex;

website/src/views/timetable/TimetableCell.scss

@@ -2,7 +2,6 @@
 
 $cell-padding: 0.3rem;
 $cell-opacity: 0.5;
-$cell-border-radius: 6px;
 
 .baseCell {
   // Flex to ensure cell content sticks to top, because browsers tend to
@@ -45,7 +44,7 @@ $cell-border-radius: 6px;
 }
 
 .clickable {
-  border-radius: $cell-border-radius;
+  border-radius: $timetable-border-radius;
   cursor: pointer;
 }
 

website/src/views/timetable/_variables.scss

@@ -1,6 +1,7 @@
 @import '~styles/utils/modules-entry.scss';
 
 $timetable-border: 1px solid var(--gray-lighter);
+$timetable-border-radius: 0.25em;
 
 $timetable-right-padding: 2vw;
 $timetable-day-h-size: 3.5rem;
@@ -9,3 +10,5 @@ $timetable-day-v-size: 2.5rem;
 
 $timetable-row-height: 3.6rem;
 $timetable-col-width: 4rem;
+
+$timetable-min-width: $timetable-row-height * 16;