change font + UI cleanup

DavidOpDeBeeck · May 2, 2024 · f17e710 · f17e710
1 parent 2ba9121
commit f17e710
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 214 deletions.
diff --git a/rcaas-ui/package.json b/rcaas-ui/package.json
@@ -14,8 +14,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@fontsource/open-sans": "^5.0.28",
-    "@fontsource/raleway": "^5.0.18",
+    "@fontsource/montserrat": "^5.0.18",
     "@tanstack/query-core": "^5.32.0",
     "@tanstack/react-query": "^5.32.0",
     "framer-motion": "^11.1.7",

diff --git a/rcaas-ui/pnpm-lock.yaml b/rcaas-ui/pnpm-lock.yaml
diff --git a/rcaas-ui/src/App.tsx b/rcaas-ui/src/App.tsx
@@ -7,7 +7,7 @@ import {useHydrateAtoms} from 'jotai/react/utils'
 import {queryClientAtom} from "jotai-tanstack-query";
 import {ReactElement} from "react";
 import {ChakraProvider, extendTheme, ThemeConfig} from "@chakra-ui/react";
-import '@fontsource/open-sans'
+import '@fontsource/montserrat'
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -32,8 +32,8 @@ const config: ThemeConfig = {
 
 const theme = extendTheme(config, {
     fonts: {
-        heading: `'Open Sans', sans-serif`,
-        body: `'Open Sans', sans-serif`,
+        heading: `'Montserrat', sans-serif`,
+        body: `'Montserrat', sans-serif`,
     },
 })
 

diff --git a/rcaas-ui/src/action-bar/ActionBar.tsx b/rcaas-ui/src/action-bar/ActionBar.tsx
@@ -1,7 +1,7 @@
 import TodayButton from "./TodayButton.tsx";
 import SettingsButton from "../settings/SettingsButton";
 import ShowVersionsForEachDayButton from "./ShowVersionsForEachDayButton.tsx";
-import DarkModeButton from "./DarkModeButton.tsx";
+import ColorModeButton from "./ColorModeButton.tsx";
 import YearMonthSelector from "./YearMonthSelector.tsx";
 import {Flex, HStack, Spacer} from "@chakra-ui/react";
 import ProjectTitle from "./ProjectTitle.tsx";
@@ -15,7 +15,7 @@ export default function ActionBar() {
                 <YearMonthSelector/>
                 <TodayButton/>
                 <ShowVersionsForEachDayButton/>
-                <DarkModeButton/>
+                <ColorModeButton/>
                 <SettingsButton/>
             </HStack>
         </Flex>

diff --git a/rcaas-ui/src/action-bar/DarkModeButton.tsx → rcaas-ui/src/action-bar/ColorModeButton.tsx b/rcaas-ui/src/action-bar/DarkModeButton.tsx → rcaas-ui/src/action-bar/ColorModeButton.tsx
@@ -1,11 +1,11 @@
 import {IconButton, useColorMode} from "@chakra-ui/react";
 import {MoonIcon, SunIcon} from "@chakra-ui/icons";
 
-export default function DarkModeButton() {
+export default function ColorModeButton() {
     const {colorMode, toggleColorMode} = useColorMode()
 
     return (
-        <IconButton aria-label="Toggle darkmode"
+        <IconButton aria-label="Toggle color mode"
                     onClick={toggleColorMode}
                     icon={colorMode == "light" ? <SunIcon/> : <MoonIcon/>}>
         </IconButton>

diff --git a/rcaas-ui/src/calendar/Day.tsx b/rcaas-ui/src/calendar/Day.tsx
@@ -57,15 +57,15 @@ export default function Day({day, dayIndex, showDayName}: Props) {
                   bgGradient={dayBg(day)}
                   bgSize='14.14px 14.14px'
                   border="1px"
-                  borderColor="blackAlpha.200"
+                  borderColor="whiteAlpha.50"
                   borderRadius={5}
                   onMouseOver={() => setIsHovering(true)}
                   onMouseOut={() => setIsHovering(false)}>
             <VStack gap={1}>
-                <Flex w='100%'>
-                    <Text fontWeight="extrabold">{new Date(day.date).getDate()}</Text>
+                <Flex w="100%" fontSize="sm" fontWeight="extrabold">
+                    <Text>{new Date(day.date).getDate()}</Text>
                     <Spacer/>
-                    {showDayName && (<Text fontWeight="bold">{daysOfTheWeek[dayIndex]}</Text>)}
+                    {showDayName && (<Text>{daysOfTheWeek[dayIndex]}</Text>)}
                 </Flex>
                 <VStack w="100%" gap={1} fontSize={{base: "xs", md: "sm"}}>
                     {versionsToShow.map((value, index) => (releases.indexOf(value.version) > -1

diff --git a/rcaas-ui/src/common/ErrorMessages.tsx b/rcaas-ui/src/common/ErrorMessages.tsx
@@ -0,0 +1,18 @@
+import {Text, VStack} from "@chakra-ui/react";
+
+type Props = {
+    messages: string[] | null
+};
+
+export function ErrorMessages({messages}: Props) {
+    if (messages === null || messages?.length === 0) {
+        return <></>;
+    }
+    return (
+        <VStack w="100%">
+            {messages.map(message => (
+                <Text key={message} color="red">{message}</Text>
+            ))}
+        </VStack>
+    );
+}
diff --git a/rcaas-ui/src/modal/Modal.tsx → rcaas-ui/src/common/SideDrawer.tsx b/rcaas-ui/src/modal/Modal.tsx → rcaas-ui/src/common/SideDrawer.tsx
@@ -8,10 +8,10 @@ type Props = {
     open: boolean,
     onSubmit?: () => void,
     onClose: () => void,
-    children: ReactElement
+    children: ReactElement | ReactElement[]
 }
 
-export default function Modal({title, submitLabel, closeLabel, open, onSubmit, onClose, children}: Props) {
+export default function SideDrawer({title, submitLabel, closeLabel, open, onSubmit, onClose, children}: Props) {
     return (
         <Drawer isOpen={open}
                 placement='right'

diff --git a/rcaas-ui/src/error-message/ErrorMessage.ts b/rcaas-ui/src/error-message/ErrorMessage.ts
diff --git a/rcaas-ui/src/error-message/ErrorMessages.tsx b/rcaas-ui/src/error-message/ErrorMessages.tsx
diff --git a/rcaas-ui/src/queries/useHttpMutation.ts b/rcaas-ui/src/queries/useHttpMutation.ts
@@ -1,5 +1,4 @@
 import {QueryClient, useMutation, useQueryClient} from "@tanstack/react-query";
-import {ErrorMessage, translateErrorMessages} from "../error-message/ErrorMessage.ts";
 
 type MutationInput = {
     key: unknown[];
@@ -11,7 +10,7 @@ type MutationInput = {
 export const useHttpMutation = <INPUT, OUTPUT>({key, path, method, onSuccess}: MutationInput) => {
     const queryClient = useQueryClient()
 
-    return useMutation<OUTPUT, ErrorMessage[], INPUT>({
+    return useMutation<OUTPUT, string[], INPUT>({
         mutationKey: key,
         mutationFn: async (input: INPUT) => {
             const response = await fetch(`/api/v1${path}`, {
@@ -34,3 +33,13 @@ export const useHttpMutation = <INPUT, OUTPUT>({key, path, method, onSuccess}: M
         onSuccess: () => onSuccess && onSuccess(queryClient)
     });
 }
+
+const translations = new Map([
+    ["PROJECT_NAME_SHOULD_NOT_BE_NULL", "Project name is required"],
+    ["RESCHEDULING_FROM_DATE_SHOULD_BE_A_RELEASE_DATE", "From date should be a release date"],
+    ["FROM_DATE_SHOULD_BE_BEFORE_TO_DATE", "From date should be before To date"],
+])
+
+export function translateErrorMessages(errorMessages: { message: string }[]) : string[] {
+    return errorMessages.map(value => translations.get(value.message) || value.message)
+}
diff --git a/rcaas-ui/src/settings/NewReleaseButton.tsx b/rcaas-ui/src/settings/NewReleaseButton.tsx
@@ -1,4 +1,4 @@
-import NewReleaseModal from "./NewReleaseModal.tsx";
+import NewReleaseSideDrawer from "./NewReleaseSideDrawer.tsx";
 import {useState} from "react";
 import {Button} from "@chakra-ui/react";
 import {AddIcon} from "@chakra-ui/icons";
@@ -14,7 +14,7 @@ export default function NewReleaseButton() {
                     onClick={() => setShowModal(prev => !prev)}>
                 Release
             </Button>
-            <NewReleaseModal showModal={showModal} closeModal={() => setShowModal(false)}/>
+            <NewReleaseSideDrawer showModal={showModal} closeModal={() => setShowModal(false)}/>
         </>
     )
 }

diff --git a/rcaas-ui/src/settings/NewReleaseModal.tsx → ...-ui/src/settings/NewReleaseSideDrawer.tsx b/rcaas-ui/src/settings/NewReleaseModal.tsx → ...-ui/src/settings/NewReleaseSideDrawer.tsx
@@ -1,9 +1,9 @@
 import {useForm} from "react-hook-form";
-import Modal from "../modal/Modal.tsx";
+import SideDrawer from "../common/SideDrawer.tsx";
 
 import {useProject} from "../queries/project/useProject.ts";
 import {useUpdateProjectMutation} from "../queries/project/useUpdateProjectMutation.ts";
-import {ErrorMessages} from "../error-message/ErrorMessages.tsx";
+import {ErrorMessages} from "../common/ErrorMessages.tsx";
 import {FormControl, FormErrorMessage, FormLabel, Input, NumberInput, NumberInputField, Select, VStack} from "@chakra-ui/react";
 
 interface NewRelease {
@@ -21,7 +21,7 @@ type Props = {
     closeModal: () => void;
 }
 
-export default function NewReleaseModal({showModal, closeModal}: Props) {
+export default function NewReleaseSideDrawer({showModal, closeModal}: Props) {
     const {data: project} = useProject();
     const mutation = useUpdateProjectMutation();
 
@@ -60,14 +60,14 @@ export default function NewReleaseModal({showModal, closeModal}: Props) {
     };
 
     return (
-        <Modal title={"New Release"}
-               submitLabel={"Create"}
-               closeLabel={"Cancel"}
-               open={showModal}
-               onSubmit={handleSubmit(onSubmit)}
-               onClose={() => closeModal()}>
+        <SideDrawer title={"New Release"}
+                    submitLabel={"Create"}
+                    closeLabel={"Cancel"}
+                    open={showModal}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onClose={() => closeModal()}>
             <VStack>
-                <ErrorMessages errorMessages={mutation.error}/>
+                <ErrorMessages messages={mutation.error}/>
                 <FormControl isInvalid={!!errors.version?.environment}>
                     <FormLabel>Environment</FormLabel>
                     <Input placeholder="Environment"
@@ -104,26 +104,18 @@ export default function NewReleaseModal({showModal, closeModal}: Props) {
                             {...register("version.color", {required: true})}>
                         <option value="red">Red</option>
                         <option value="orange">Orange</option>
-                        <option value="amber">Amber</option>
                         <option value="yellow">Yellow</option>
-                        <option value="lime">Lime</option>
                         <option value="green">Green</option>
-                        <option value="emerald">Emerald</option>
                         <option value="teal">Teal</option>
-                        <option value="cyan">Cyan</option>
-                        <option value="sky">Sky</option>
                         <option value="blue">Blue</option>
-                        <option value="indigo">Indigo</option>
-                        <option value="violet">Violet</option>
+                        <option value="cyan">Cyan</option>
                         <option value="purple">Purple</option>
-                        <option value="fuchsia">Fuchsia</option>
                         <option value="pink">Pink</option>
-                        <option value="rose">Rose</option>
                     </Select>
                     <FormErrorMessage>Color is required.</FormErrorMessage>
                 </FormControl>
             </VStack>
-        </Modal>
+        </SideDrawer>
     )
 }
 
diff --git a/rcaas-ui/src/settings/NewReschedulingButton.tsx b/rcaas-ui/src/settings/NewReschedulingButton.tsx
@@ -1,4 +1,4 @@
-import NewReschedulingModal from "./NewReschedulingModal.tsx";
+import NewReschedulingSideDrawer from "./NewReschedulingSideDrawer.tsx";
 import {useState} from "react";
 import {Button} from "@chakra-ui/react";
 import {AddIcon} from "@chakra-ui/icons";
@@ -18,7 +18,7 @@ export default function NewReschedulingButton({specificationIndex}: Props) {
                     onClick={() => setShowModal(true)}>
                 Rescheduling
             </Button>
-            <NewReschedulingModal showModal={showModal} closeModal={() => setShowModal(false)} specificationIndex={specificationIndex}/>
+            <NewReschedulingSideDrawer showModal={showModal} closeModal={() => setShowModal(false)} specificationIndex={specificationIndex}/>
         </>
     )
 }

diff --git a/...-ui/src/settings/NewReschedulingModal.tsx → ...rc/settings/NewReschedulingSideDrawer.tsx b/...-ui/src/settings/NewReschedulingModal.tsx → ...rc/settings/NewReschedulingSideDrawer.tsx
@@ -1,9 +1,9 @@
 import {useForm} from "react-hook-form";
-import Modal from "../modal/Modal.tsx";
+import SideDrawer from "../common/SideDrawer.tsx";
 
 import {useProject} from "../queries/project/useProject.ts";
 import {useUpdateProjectMutation} from "../queries/project/useUpdateProjectMutation.ts";
-import {ErrorMessages} from "../error-message/ErrorMessages.tsx";
+import {ErrorMessages} from "../common/ErrorMessages.tsx";
 import {FormControl, FormErrorMessage, FormLabel, Input, VStack} from "@chakra-ui/react";
 
 type NewRescheduling = {
@@ -17,7 +17,7 @@ type Props = {
     specificationIndex: number;
 }
 
-export default function NewReschedulingModal({showModal, closeModal, specificationIndex}: Props) {
+export default function NewReschedulingSideDrawer({showModal, closeModal, specificationIndex}: Props) {
     const {data: project} = useProject();
     const mutation = useUpdateProjectMutation();
 
@@ -55,14 +55,14 @@ export default function NewReschedulingModal({showModal, closeModal, specificati
     };
 
     return (
-        <Modal title={"New Rescheduling"}
-               submitLabel={"Create"}
-               closeLabel={"Cancel"}
-               open={showModal}
-               onSubmit={handleSubmit(onSubmit)}
-               onClose={() => closeModal()}>
+        <SideDrawer title={"New Rescheduling"}
+                    submitLabel={"Create"}
+                    closeLabel={"Cancel"}
+                    open={showModal}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onClose={() => closeModal()}>
             <VStack>
-                <ErrorMessages errorMessages={mutation.error}/>
+                <ErrorMessages messages={mutation.error}/>
                 <FormControl isInvalid={!!errors.from}>
                     <FormLabel>From Date</FormLabel>
                     <Input type="date"
@@ -80,7 +80,7 @@ export default function NewReschedulingModal({showModal, closeModal, specificati
                     <FormErrorMessage>To date is required.</FormErrorMessage>
                 </FormControl>
             </VStack>
-        </Modal>
+        </SideDrawer>
     )
 }
 
diff --git a/rcaas-ui/src/settings/SettingsButton.tsx b/rcaas-ui/src/settings/SettingsButton.tsx
@@ -1,4 +1,4 @@
-import SettingsModal from "./SettingsModal.tsx";
+import SettingsSideDrawer from "./SettingsSideDrawer.tsx";
 import {useState} from "react";
 import {IconButton} from "@chakra-ui/react";
 import {SettingsIcon} from "@chakra-ui/icons";
@@ -12,7 +12,7 @@ export default function SettingsButton() {
                         onClick={() => setShowModal(prev => !prev)}
                         icon={<SettingsIcon/>}>
             </IconButton>
-            <SettingsModal showModal={showModal} closeModal={() => setShowModal(false)}/>
+            <SettingsSideDrawer showModal={showModal} closeModal={() => setShowModal(false)}/>
         </>
     );
 }