responsive changes

DavidOpDeBeeck · Apr 30, 2024 · fff7c77 · fff7c77
1 parent 725fbde
commit fff7c77
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 35 deletions.
diff --git a/rcaas-ui/src/calendar/Calendar.tsx b/rcaas-ui/src/calendar/Calendar.tsx
@@ -6,7 +6,7 @@ export default function Calendar() {
     const {data: calendar} = useCalendar();
 
     return (
-        <Grid width="100%" height="100%" templateRows='repeat(6, 1fr)' p={2} rowGap={2}>
+        <Grid width="100%" height="100%" templateRows='repeat(6, 1fr)' p={2} rowGap={1}>
             {
                 (calendar?.weeks || []).map((week, weekIndex) => (
                     <Week key={weekIndex}

diff --git a/rcaas-ui/src/calendar/Day.tsx b/rcaas-ui/src/calendar/Day.tsx
@@ -53,19 +53,21 @@ export default function Day({day, dayIndex, showDayName}: Props) {
     return (
         <GridItem w='100%'
                   h="100%"
+                  p={2}
                   bgGradient={dayBg(day)}
                   bgSize='5.66px 5.66px'
-                  p={2}
-                  borderRadius={10}
+                  border="1px"
+                  borderColor="blackAlpha.100"
+                  borderRadius={5}
                   onMouseOver={() => setIsHovering(true)}
                   onMouseOut={() => setIsHovering(false)}>
-            <VStack>
+            <VStack gap={1}>
                 <Flex w='100%'>
                     <Text fontWeight="extrabold">{new Date(day.date).getDate()}</Text>
                     <Spacer/>
                     {showDayName && (<Text fontWeight="bold">{daysOfTheWeek[dayIndex]}</Text>)}
                 </Flex>
-                <VStack w="100%" gap={1} fontSize="sm">
+                <VStack w="100%" gap={1} fontSize={{base: "xs", md: "sm"}}>
                     {versionsToShow.map((value, index) => (releases.indexOf(value.version) > -1
                         ? <Release key={index} version={value.version}/>
                         : <Version key={index} version={value.version} visible={value.visible}/>))}

diff --git a/rcaas-ui/src/calendar/Release.tsx b/rcaas-ui/src/calendar/Release.tsx
@@ -9,11 +9,10 @@ export default function Release({version}: Props) {
     return (
         <Flex w="100%"
               px={2}
-              shadow="md"
               bg={`${version.color}.400`}
-              border="2px"
+              borderLeft="4px"
               borderColor={`${version.color}.500`}
-              borderRadius={5}>
+              borderRadius={3}>
             <Text fontWeight="bold">{version.environment}</Text>
             <Spacer/>
             <Text fontWeight="bold">{version.value}</Text>

diff --git a/rcaas-ui/src/calendar/Version.tsx b/rcaas-ui/src/calendar/Version.tsx
@@ -10,11 +10,8 @@ export default function Version({version, visible}: Props) {
     return (
         <Flex w="100%"
               px={2}
-              shadow="md"
               bg={`${version.color}.400`}
-              border="2px"
-              borderColor={`${version.color}.500`}
-              borderRadius={5}
+              borderRadius={3}
               opacity="75%"
               visibility={visible ? "visible" : "hidden"}>
             <Text fontWeight="bold">{version.environment}</Text>

diff --git a/rcaas-ui/src/calendar/Week.tsx b/rcaas-ui/src/calendar/Week.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function Week({week, weekIndex}: Props) {
     return (
         <GridItem>
-            <Grid h="100%" templateColumns='repeat(7, 1fr)' columnGap={2}>
+            <Grid h="100%" templateColumns='repeat(7, 1fr)' columnGap={1}>
                 {
                     week.days.map((day, dayIndex) => (
                         <Day key={weekIndex + dayIndex}

diff --git a/rcaas-ui/src/pages/HeroPage.tsx b/rcaas-ui/src/pages/HeroPage.tsx
@@ -1,6 +1,6 @@
-import CreateProject from "../project/CreateProject.tsx";
 import {useEffect} from "react";
 import {Heading, Text, VStack} from '@chakra-ui/react'
+import CreateProject from "../project/CreateProject.tsx";
 
 export default function HeroPage() {
     useEffect(() => {
@@ -9,10 +9,10 @@ export default function HeroPage() {
 
     return (
         <VStack height="100vh" justifyContent="center" spacing={4}>
-            <Heading fontSize="6xl" fontWeight="extrabold">
-                releasecalendar<Text as='span' fontSize="6xl" color="blue.600">.app</Text>
+            <Heading fontSize={{base: "4xl", md: "6xl"}} fontWeight="extrabold">
+                releasecalendar<Text as='span' fontSize={{base: "4xl", md: "6xl"}} color="blue.600">.app</Text>
             </Heading>
-            <Text fontSize="2xl" color="gray.600" maxW="xl" textAlign="center">
+            <Text fontSize={{base: "md", md: "2xl"}} color="gray.600" maxW={{base: "md", md: "xl"}} textAlign="center">
                 Create, manage and share your release calendar with your team and your clients.
             </Text>
             <CreateProject/>

diff --git a/rcaas-ui/src/project/CreateProject.tsx b/rcaas-ui/src/project/CreateProject.tsx
@@ -1,9 +1,10 @@
+import {useEffect} from "react";
+import {FormControl, FormErrorMessage, HStack, IconButton, Input} from '@chakra-ui/react'
 import {useNavigate} from "react-router-dom";
-import {useForm} from "react-hook-form";
-
 import {useCreateProjectMutation} from "../queries/project/useCreateProjectMutation.ts";
+import {useForm} from "react-hook-form";
 import {CreateProjectTO} from "../domain/ProjectTO.ts";
-import {Button, FormControl, FormErrorMessage, HStack, Input} from '@chakra-ui/react'
+import {ArrowForwardIcon} from "@chakra-ui/icons";
 
 export default function CreateProject() {
     const navigate = useNavigate();
@@ -15,34 +16,34 @@ export default function CreateProject() {
         });
     };
 
+    useEffect(() => {
+        document.title = 'New Project';
+    }, []);
+
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
-            <HStack spacing={2}
-                    paddingLeft={5}
-                    paddingRight={2}
-                    paddingY={2}
-                    shadow="md"
-                    border="1px"
-                    borderColor="blackAlpha.200"
-                    borderRadius={10}
-                    width="md">
+            <HStack>
                 <FormControl isInvalid={!!errors.name}>
                     <Input id="name"
                            type="text"
                            placeholder="Project Name"
-                           variant='unstyled'
-                           size="lg"
+                           variant='filled'
+                           size={{base: "md", md: "lg"}}
                            {...register("name", {
                                required: 'Please enter a project name',
                            })}
                            autoComplete="off"/>
-                    <FormErrorMessage>
+                    <FormErrorMessage pos="absolute">
                         {errors.name && errors.name.message}
                     </FormErrorMessage>
                 </FormControl>
-                <Button type="submit" size="lg" colorScheme='blue' isLoading={isSubmitting}>
-                    Create
-                </Button>
+                <IconButton aria-label="Create Project"
+                            icon={<ArrowForwardIcon/>}
+                            type="submit"
+                            size={{base: "md", md: "lg"}}
+                            colorScheme='blue'
+                            isLoading={isSubmitting}>
+                </IconButton>
             </HStack>
         </form>
     )