feat: refactor all components in common

src/views/components/common/Button/Button.tsx

@@ -3,6 +3,7 @@ import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/the
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
+import { satisfies } from 'semver';
 
 import type IconComponent from '~icons/material-symbols';
 
@@ -44,7 +45,7 @@ export function Button({
                     ...style,
                     color: colorHex,
                     backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
-                } as React.CSSProperties
+                } satisfies React.CSSProperties
             }
             className={clsx(
                 'btn',

src/views/components/common/Chip/Chip.tsx

@@ -5,14 +5,14 @@ import React from 'react';
  * A type that represents the flags that a course can have.
  */
 export type Flag = 'WR' | 'QR' | 'GC' | 'CD' | 'E' | 'II';
-export const flagMap: Record<string, Flag> = {
+export const flagMap = {
     Writing: 'WR',
     'Quantitative Reasoning': 'QR',
     'Global Cultures': 'GC',
     'Cultural Diversity in the United States': 'CD',
     Ethics: 'E',
     'Independent Inquiry': 'II',
-};
+} as const satisfies Record<string, Flag>;
 
 interface Props {
     label: Flag;

src/views/components/common/CourseCellColorPicker/ColorPatch.tsx

@@ -1,6 +1,6 @@
+import type { ThemeColor } from '@shared/util/themeColors';
 import { Button } from '@views/components/common/Button/Button';
 import React from 'react';
-import type { ThemeColor } from 'src/shared/util/themeColors';
 
 import CheckIcon from '~icons/material-symbols/check';
 
@@ -24,12 +24,12 @@ interface ColorPatchProps {
  * is passed from the parent and updates the necessary parent state when this color patch is selected.
  * @returns {JSX.Element} - the color patch component
  */
-const ColorPatch: React.FC<ColorPatchProps> = ({
+export default function ColorPatch({
     color,
     index,
     selectedColor,
     handleSetSelectedColorPatch,
-}: ColorPatchProps): JSX.Element => {
+}: ColorPatchProps): JSX.Element {
     const isSelected = selectedColor === index;
     const handleClick = () => {
         handleSetSelectedColorPatch(isSelected ? -1 : index);
@@ -45,6 +45,4 @@ const ColorPatch: React.FC<ColorPatchProps> = ({
             {isSelected && <CheckIcon className='h-[20px] w-[20px]' />}
         </Button>
     );
-};
-
-export default ColorPatch;
+}