improve styling

firsttris · Dec 29, 2023 · de96d26 · de96d26
1 parent 359c541
commit de96d26
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/src/app/ChannelsForType.tsx b/src/app/ChannelsForType.tsx
@@ -32,12 +32,19 @@ const ExpandMore = styled(Icon)<ExpandMoreProps>(({ expanded }) => ({
 }));
 
 const StyledCard = styled(Card)(({ theme }) => ({
-  maxWidth: 288,
-  [theme.breakpoints.down('md')]: {
-    width: '100%',
+  width: 288
+}));
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '5px',
+  [theme.breakpoints.down('sm')]: {
+    justifyContent: 'center',
   },
 }));
 
+
 const getControlComponent = (channel: Channel, refetch: () => void) => {
   switch (channel.type) {
     case ChannelType.CLIMATECONTROL_FLOOR_TRANSCEIVER:
@@ -117,15 +124,15 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
           setHasTransitionExited(true)
         }
       >
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
+        <StyledBox>
           {channels.map((channel, index) => {
             return (
               <StyledCard key={index}>
                 {getControlComponent(channel, refetch)}
               </StyledCard>
             );
           })}
-        </Box>
+        </StyledBox>
         <Divider sx={{ mt: '10px' }} />
       </Collapse>
     </Box>

diff --git a/src/app/Room.tsx b/src/app/Room.tsx
@@ -22,7 +22,6 @@ export const Room = () => {
     return <LinearProgress />;
   }
 
-  console.log('channelsPerType', channelsPerType)
   return (
     <StyledContainer maxWidth="xl">
       <List disablePadding={true}>

diff --git a/src/app/controls/DoorControl.tsx b/src/app/controls/DoorControl.tsx
@@ -2,6 +2,26 @@ import { Box, CardHeader, Typography } from '@mui/material';
 import { StyledIconButton } from '../components/StyledIcons';
 import { KeymaticChannel } from './../../types/types';
 import { useSetValueMutation } from './../../hooks/useApi';
+import { styled } from '@mui/system';
+
+const StyledOuterBox = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  });
+
+  const StyledInnerBox = styled(Box)({
+    display: 'flex',
+    gap: '10px',
+    alignItems: 'center',
+  });
+
+  interface StyledTypographyProps {
+    isUncertain: boolean;
+  }
+  const StyledTypography = styled(Typography)<StyledTypographyProps>(({ isUncertain }) => ({
+    display: isUncertain ? 'block' : 'none',
+  }));
 
 interface DoorControlProps {
   channel: KeymaticChannel;
@@ -53,8 +73,8 @@ export const DoorControl: React.FC<DoorControlProps> = ({ channel, refetch }) =>
   return (
     <CardHeader
       title={
-        <Box>
-          <Box sx={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <StyledOuterBox>
+          <StyledInnerBox>
             <StyledIconButton
               icon="material-symbols:lock-outline"
               active={(!isUnlocked).toString()}
@@ -69,14 +89,14 @@ export const DoorControl: React.FC<DoorControlProps> = ({ channel, refetch }) =>
               icon="material-symbols:door-open-outline"
               onClick={openDoor}
             />
-          </Box>
-          <Typography
-            sx={{ display: isUncertain ? 'block' : 'none' }}
+          </StyledInnerBox>
+          <StyledTypography
+            isUncertain={isUncertain}
             variant="caption"
           >
             Door state is uncertain
-          </Typography>
-        </Box>
+          </StyledTypography>
+        </StyledOuterBox>
       }
     />
   );

diff --git a/src/app/controls/RainDetectionControl.tsx b/src/app/controls/RainDetectionControl.tsx
@@ -4,7 +4,10 @@ import { StyledHeaderIcon } from '../components/StyledIcons';
 
 const StyledBox = styled(Box)({
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: '100%',
+    gap: '20px'
   });
 
   const StyledIconBox = styled(Box)({