improve card layout

firsttris · Dec 28, 2023 · 2346e81 · 2346e81
1 parent fd98591
commit 2346e81
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 169 deletions.
diff --git a/src/app/BlindsControl.tsx b/src/app/BlindsControl.tsx
@@ -30,9 +30,9 @@ export const BlindsControl = ({ channel }: ControlProps) => {
         title={
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             {blindValue === 0 ? (
-              <BlindsClosedIcon sx={{ fontSize: '40px' }} />
+              <BlindsClosedIcon sx={{ fontSize: '30px' }} />
             ) : (
-              <BlindsOutlinedIcon sx={{ fontSize: '40px' }} />
+              <BlindsOutlinedIcon sx={{ fontSize: '30px' }} />
             )}
             <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
           </Box>

diff --git a/src/app/FloorControl.tsx b/src/app/FloorControl.tsx
@@ -39,7 +39,7 @@ export const FloorControl = (props: FloorControlProps) => {
             <Icon
               icon="mdi:radiator-coil"
               color={getColor(value)}
-              fontSize={'40px'}
+              fontSize={'30px'}
             />
             <Typography>{props.channel.name}</Typography>
           </Box>
@@ -48,6 +48,7 @@ export const FloorControl = (props: FloorControlProps) => {
 
       <CardContent sx={{ pt: '0px'}}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Icon icon="mdi:pipe-valve" fontSize="30px" style={{ marginRight: '5px'}} />
           <Box sx={{ width: '100%', mr: 1 }}>
             <LinearProgress variant="determinate" value={value} />
           </Box>

diff --git a/src/app/Room.tsx b/src/app/Room.tsx
@@ -16,7 +16,7 @@ import {
 import { useParams } from 'react-router-dom';
 import { Channel, ChannelType, useGetChannelsForRoom } from '../hooks/useApi';
 import { BlindsControl } from './BlindsControl';
-import { LightControl } from './LightControl';
+import { SwitchControl } from './SwitchControl';
 import { ThermostatControl } from './ThermostatControl';
 import { FloorControl } from './FloorControl';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -101,7 +101,7 @@ export const Room = () => {
       case ChannelType.CLIMATECONTROL_FLOOR_TRANSCEIVER:
         return <FloorControl channel={channel} />;
       case ChannelType.SWITCH_VIRTUAL_RECEIVER:
-        return <LightControl refetch={refetch} channel={channel} />;
+        return <SwitchControl refetch={refetch} channel={channel} />;
       case ChannelType.HEATING_CLIMATECONTROL_TRANSCEIVER:
         return <ThermostatControl channel={channel} />;
       case ChannelType.BLIND_VIRTUAL_RECEIVER:
@@ -126,7 +126,7 @@ export const Room = () => {
           return channels.length ? (
             <Box key={index}> 
               <ListItem disablePadding={true}>
-                <ListItemButton
+                <ListItemButton sx={{ '&:hover': { backgroundColor: 'transparent' } }}
                   onClick={() => handleExpandClick(channelType)}
                   disableRipple={true}
                 >

diff --git a/src/app/LightControl.tsx → src/app/SwitchControl.tsx b/src/app/LightControl.tsx → src/app/SwitchControl.tsx
@@ -4,27 +4,15 @@ import {
   SwitchVirtualReceiverChannel,
   useSetValueMutation,
 } from '../hooks/useApi';
-import LightbulbOutlinedIconBase from '@mui/icons-material/LightbulbOutlined';
-import LightbulbIconBase from '@mui/icons-material/Lightbulb';
 import { IconButtonWithHover } from './components/IconButtonWithHover';
 import { TypographyWithEllipsis } from './components/TypographyWithEllipsis';
+import { Icon } from '@iconify/react';
 
 interface ControlProps {
   channel: SwitchVirtualReceiverChannel;
   refetch: () => void;
 }
 
-const LightbulbIcon = styled(LightbulbIconBase)({
-  cursor: 'pointer',
-  color: 'orange',
-  fontSize: '40px',
-});
-
-const LightbulbOutlinedIcon = styled(LightbulbOutlinedIconBase)({
-  cursor: 'pointer',
-  fontSize: '40px',
-});
-
 const StyledBox = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
@@ -35,9 +23,7 @@ const TitleBox = styled(Box)({
   alignItems: 'center',
 });
 
-
-
-export const LightControl = ({ channel, refetch }: ControlProps) => {
+export const SwitchControl = ({ channel, refetch }: ControlProps) => {
   const setValueMutation = useSetValueMutation();
   const { datapoints, name, address, interfaceName } = channel;
   const checked = datapoints.STATE === 'true';
@@ -60,7 +46,15 @@ export const LightControl = ({ channel, refetch }: ControlProps) => {
         title={
           <TitleBox>
             <IconButtonWithHover onClick={onHandleChange}>
-              {checked ? <LightbulbIcon /> : <LightbulbOutlinedIcon />}
+              {checked ? (
+                <Icon
+                  icon="mdi:light-switch"
+                  fontSize="40px"
+                  color="orange"
+                />
+              ) : (
+                <Icon icon="mdi:light-switch-off" fontSize="40px" />
+              )}
             </IconButtonWithHover>
             <TypographyWithEllipsis>{name}</TypographyWithEllipsis>
           </TitleBox>