fix scrollbars + styling

DavidOpDeBeeck · Apr 29, 2024 · d3d1d3b · d3d1d3b
1 parent 356b9cf
commit d3d1d3b
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 43 deletions.
diff --git a/rcaas-ui/src/calendar/Day.tsx b/rcaas-ui/src/calendar/Day.tsx
@@ -6,19 +6,6 @@ import {useAtomValue} from "jotai";
 import Release from "./Release";
 import {Flex, GridItem, Spacer, Text, VStack} from "@chakra-ui/react";
 
-// function dayClass(day: DayTO): string {
-//     if (day.today) {
-//         return "bg-blue-400 dark:bg-blue-600";
-//     }
-//     if (day.weekend) {
-//         return `bg-gray-400 dark:bg-slate-800 ${day.otherMonth ? 'bg-stripes bg-stripes-gray-500 dark:bg-stripes-slate-900' : ''}`;
-//     }
-//     if (day.otherMonth) {
-//         return `bg-stripes bg-stripes-gray-400 dark:bg-stripes-slate-700`;
-//     }
-//     return "bg-gray-300 dark:bg-slate-700";
-// }
-
 function dayBg(day: DayTO): string {
     if (day.today) {
         return singleColor("blue.500");
@@ -78,9 +65,11 @@ export default function Day({day, dayIndex, showDayName}: Props) {
                     <Spacer/>
                     {showDayName && (<Text fontWeight="bold">{daysOfTheWeek[dayIndex]}</Text>)}
                 </Flex>
-                {versionsToShow.map((value, index) => (releases.indexOf(value.version) > -1
-                    ? <Release key={index} version={value.version}/>
-                    : <Version key={index} version={value.version} visible={value.visible}/>))}
+                <VStack w="100%" gap={1} fontSize="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}/>))}
+                </VStack>
             </VStack>
         </GridItem>
     );

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

diff --git a/rcaas-ui/src/index.css b/rcaas-ui/src/index.css
diff --git a/rcaas-ui/src/main.tsx b/rcaas-ui/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>

diff --git a/rcaas-ui/src/pages/ProjectPage.tsx b/rcaas-ui/src/pages/ProjectPage.tsx
@@ -12,7 +12,7 @@ export default function ProjectPage() {
     }, [project]);
 
     return (
-        <VStack height="100vh" width="100vw">
+        <VStack height="100vh">
             <ActionBar/>
             <Calendar/>
         </VStack>

diff --git a/rcaas-ui/src/settings/NewReleaseButton.tsx b/rcaas-ui/src/settings/NewReleaseButton.tsx
@@ -10,7 +10,6 @@ export default function NewReleaseButton() {
         <>
             <Button leftIcon={<AddIcon/>}
                     colorScheme='blue'
-                    variant='outline'
                     size="sm"
                     onClick={() => setShowModal(prev => !prev)}>
                 Release

diff --git a/rcaas-ui/src/settings/NewReschedulingButton.tsx b/rcaas-ui/src/settings/NewReschedulingButton.tsx
@@ -1,7 +1,7 @@
 import NewReschedulingModal from "./NewReschedulingModal.tsx";
 import {useState} from "react";
-import {IconButton} from "@chakra-ui/react";
-import {TimeIcon} from "@chakra-ui/icons";
+import {Button} from "@chakra-ui/react";
+import {AddIcon} from "@chakra-ui/icons";
 
 type Props = {
     specificationIndex: number;
@@ -12,11 +12,12 @@ export default function NewReschedulingButton({specificationIndex}: Props) {
 
     return (
         <>
-            <IconButton aria-label="Add rescheduling"
-                        icon={<TimeIcon/>}
-                        size="sm"
-                        onClick={() => setShowModal(true)}>
-            </IconButton>
+            <Button leftIcon={<AddIcon/>}
+                    colorScheme='gray'
+                    size="sm"
+                    onClick={() => setShowModal(true)}>
+                Rescheduling
+            </Button>
             <NewReschedulingModal showModal={showModal} closeModal={() => setShowModal(false)} specificationIndex={specificationIndex}/>
         </>
     )

diff --git a/rcaas-ui/src/settings/SpecificationDetail.tsx b/rcaas-ui/src/settings/SpecificationDetail.tsx
@@ -30,7 +30,8 @@ type Props = {
 
 export default function SpecificationDetail({specification, specificationIndex}: Props) {
     return <Card key={specificationIndex}
-                 w="100%">
+                 w="100%"
+                 variant="outline">
         <CardHeader>
             <Flex>
                 <Heading size='md'>{specification.sprintBased.version.environment}</Heading>
@@ -47,26 +48,26 @@ export default function SpecificationDetail({specification, specificationIndex}:
                     <Heading size='xs' textTransform='uppercase'>
                         Configuration
                     </Heading>
-                    <SimpleGrid columns={2} columnGap={2}>
+                    <SimpleGrid fontSize='sm' pt={2} columns={2} columnGap={2} rowGap={2}>
                         <Flex>
-                            <Text pt='2' fontSize='sm'>Version</Text>
+                            <Text>Version</Text>
                             <Spacer/>
-                            <Text pt='2' fontSize='sm'>{specification.sprintBased.version.value}</Text>
+                            <Text>{specification.sprintBased.version.value}</Text>
                         </Flex>
                         <Flex>
-                            <Text pt='2' fontSize='sm'>Start Date</Text>
+                            <Text>Start Date</Text>
                             <Spacer/>
-                            <Text pt='2' fontSize='sm'>{specification.sprintBased.startDate}</Text>
+                            <Text>{specification.sprintBased.startDate}</Text>
                         </Flex>
                         <Flex>
-                            <Text pt='2' fontSize='sm'>Sprint Length</Text>
+                            <Text>Sprint Length</Text>
                             <Spacer/>
-                            <Text pt='2' fontSize='sm'>{specification.sprintBased.sprintLength}</Text>
+                            <Text>{specification.sprintBased.sprintLength}</Text>
                         </Flex>
                         <Flex>
-                            <Text pt='2' fontSize='sm'>Color</Text>
+                            <Text>Color</Text>
                             <Spacer/>
-                            <Text pt='2' fontSize='sm'>{specification.sprintBased.version.color}</Text>
+                            <Text>{specification.sprintBased.version.color}</Text>
                         </Flex>
                     </SimpleGrid>
                 </Box>
@@ -77,8 +78,8 @@ export default function SpecificationDetail({specification, specificationIndex}:
                     {specification?.sprintBased.reschedulings.length === 0 && (
                         <Text pt='2' fontSize='sm'>No reschedulings available</Text>)}
                     {specification?.sprintBased.reschedulings.length > 0 && (
-                        <TableContainer>
-                            <Table variant='simple'>
+                        <TableContainer pt='2'>
+                            <Table variant='simple' size='sm'>
                                 <Thead>
                                     <Tr>
                                         <Th>From Date</Th>