refine styling

devsoc-unsw · Nov 11, 2023 · e606c1a · e606c1a
1 parent 96e3512
commit e606c1a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/client/src/components/controls/ColorPicker.tsx b/client/src/components/controls/ColorPicker.tsx
@@ -1,5 +1,7 @@
+import React, { useContext } from 'react';
 import { Box, Button, ListItem, Popover, TextField } from '@mui/material';
 import { Colorful } from '@uiw/react-color';
+import { AppContext } from '../../context/AppContext';
 
 import { ColorPickerProps } from '../../interfaces/PropTypes';
 import { ColorIndicatorBox, StyledButtonContainer } from '../../styles/ControlStyles';
@@ -14,16 +16,17 @@ const ColorPicker: React.FC<ColorPickerProps> = ({
   // Whether the colour picker popover is shown
   const openColorPickerPopover = Boolean(colorPickerAnchorEl);
   const colorPickerPopoverId = openColorPickerPopover ? 'simple-popover' : undefined;
+  const { isDarkMode } = useContext(AppContext);
 
   return (
     <>
       <button type="button"
-        className="flex justify-between dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] gap-x-1.5 rounded-md bg-[#f8f8f8] px-3 py-2 text-md font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        className="flex justify-between items-center dark:bg-[#323e4d] h-full dark:text-[#eef0f2] dark:ring-[#404f63] gap-x-1.5 rounded-md bg-[#f8f8f8] px-3 py-2 text-md font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
         aria-describedby={colorPickerPopoverId}
         onClick={handleOpenColorPicker}
       >
         <ColorIndicatorBox backgroundColor={color} onClick={handleOpenColorPicker} />
-        <svg className="my-auto h-5 w-5 text-gray-400 items-center" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <svg className="my-auto h-5 w-5 text-gray-400 items-center" viewBox="0 0 20 20" fill={isDarkMode ? "white" : "black"} aria-hidden="true">
           <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
         </svg>
       </button>

diff --git a/client/src/components/controls/CustomEvent.tsx b/client/src/components/controls/CustomEvent.tsx
@@ -10,7 +10,7 @@ import { CourseContext } from '../../context/CourseContext';
 import { CoursesList } from '../../interfaces/Courses';
 import { ClassData, EventPeriod } from '../../interfaces/Periods';
 import { StyledControlsButton } from '../../styles/ControlStyles';
-import { dropdownButton, ExecuteButton, StyledTabPanel } from '../../styles/CustomEventStyles';
+import { dropdownButton, ExecuteButton, StyledSelect, StyledTabPanel } from '../../styles/CustomEventStyles';
 import { StyledList } from '../../styles/DroppedCardStyles';
 import { parseAndCreateEventObj } from '../../utils/createEvent';
 import { areValidEventTimes, createDateWithTime, resizeWeekArray } from '../../utils/eventTimes';
@@ -253,12 +253,12 @@ const CustomEvent: React.FC = () => {
         }}
       >
         <div className={(isDarkMode ? 'dark' : '')}>
-          <div className={"px-8 pt-8 flex flex-col space-y-4 dark:bg-[#252c37]"}>
+          <div className={"px-8 py-6 flex flex-col space-y-4 dark:bg-[#252c37]"}>
             <div className='flex justify-between'>
               <div className='font-bold text-xl '>
                 Create an event
               </div>
-              <button>
+              <button onClick={handleClose}>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
@@ -270,10 +270,11 @@ const CustomEvent: React.FC = () => {
               </div>
               <div className="grid grid-cols-12 gap-4">
                 <div className="col-span-9">
-                  <select value={eventType} onChange={(e) => setEventType(e.target.value)} className="dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] w-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] px-3 py-2 text-md font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                  <StyledSelect isDarkMode={isDarkMode} value={eventType} onChange={(e) => setEventType(e.target.value)} className="dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] w-full h-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] px-3 py-2 text-md font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                     <option value="General">General Event</option>
                     <option value="Tutoring">Tutoring</option>
-                  </select>
+                    <option>Import from Notangles</option>
+                  </StyledSelect>
                 </div>
                 <div className="col-span-3 justify-self-end">
                   <ColorPicker
@@ -322,7 +323,7 @@ const CustomEvent: React.FC = () => {
               <div className="col-span-6 flex justify-between">
                 <button className='h-12' onClick={handleClose}>Cancel</button>
                 <button
-                  className='dark:disabled:bg-gray-600 disabled:bg-[#e0e0e0] disabled:text-[#a6a6a6] text-white bg-blue-500 hover:bg-blue-400 rounded-md w-[100px] mb-4 h-12'
+                  className='dark:disabled:bg-gray-600 disabled:bg-[#e0e0e0] disabled:text-[#a6a6a6] text-white bg-blue-500 hover:bg-blue-400 rounded-md w-[100px] h-12'
                   disabled={
                     (eventType === 'General' && (!eventName || eventDays.length === 0)) ||
                     (eventType === 'Tutoring' && (!courseCode || !classCode))

diff --git a/client/src/components/controls/CustomEventGeneral.tsx b/client/src/components/controls/CustomEventGeneral.tsx
@@ -5,7 +5,7 @@ import { TimePicker } from '@mui/x-date-pickers';
 import { daysShort } from '../../constants/timetable';
 import { CustomEventGeneralProps } from '../../interfaces/PropTypes';
 import { StyledListItem } from '../../styles/ControlStyles';
-import { StyledListItemText } from '../../styles/CustomEventStyles';
+import { StyledListItemText, styledInput } from '../../styles/CustomEventStyles';
 import { areValidEventTimes } from '../../utils/eventTimes';
 import DropdownOption from '../timetable/DropdownOption';
 
@@ -48,7 +48,7 @@ const CustomEventGeneral: React.FC<CustomEventGeneralProps> = ({
             placeholder='Event Name *'
             defaultValue={eventName}
             onChange={(e) => setEventName(e.target.value)}
-            className="dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] pl-12 pr-4 py-2 font-medium w-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] text-md text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className={styledInput}
           >
           </input>
           <div className="absolute inset-y-0 left-0 pl-3  
@@ -64,7 +64,7 @@ const CustomEventGeneral: React.FC<CustomEventGeneralProps> = ({
             placeholder='Description'
             defaultValue={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] pl-12 pr-4 py-2 font-medium w-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] text-md text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className={styledInput}
           >
           </input>
           <div className="absolute inset-y-0 left-0 pl-3  
@@ -80,7 +80,7 @@ const CustomEventGeneral: React.FC<CustomEventGeneralProps> = ({
             placeholder='Location'
             defaultValue={location}
             onChange={(e) => setLocation(e.target.value)}
-            className="dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] pl-12 pr-4 py-2 font-medium w-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] text-md text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className={styledInput}
           >
           </input>
           <div className="absolute inset-y-0 left-0 pl-3  
@@ -132,7 +132,7 @@ const CustomEventGeneral: React.FC<CustomEventGeneralProps> = ({
       <div>
         <DropdownOption
           optionName="Days"
-          optionState={eventDays}
+          optionState={isInitialDay ? [initialDay] : eventDays}
           setOptionState={handleFormat}
           optionChoices={daysShort}
           multiple={true}

diff --git a/client/src/styles/CustomEventStyles.tsx b/client/src/styles/CustomEventStyles.tsx
@@ -5,6 +5,21 @@ import { alpha, styled } from '@mui/system';
 
 export const dropdownButton = 'bg-blue-500 hover:bg-blue-400 text-left rounded-lg w-full mr-2.5 mt-5 h-14';
 
+export const styledInput = 'dark:bg-[#323e4d] dark:text-[#eef0f2] dark:ring-[#404f63] pl-12 pr-4 py-2 font-medium w-full flex justify-between gap-x-1.5 rounded-md bg-[#f8f8f8] text-md text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50'
+
+const lightModeArrow = `url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>');`
+const darkModeArrow = `url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>');`
+
+export const StyledSelect = styled('select') <{ isDarkMode: boolean }>`
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: ${(props) => (props.isDarkMode ? darkModeArrow : lightModeArrow)};
+  background-size: 20px 20px;
+  background-position: right 10px top 50%;
+  background-repeat: no-repeat;
+`
+
 // export const DropdownButton = styled(Button)`
 //   && {
 //     width: 100%;