various changes

src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import "./styles.css";
 
 import Home from "./components/home/Home";
 import Contacts from "./components/contacts/Contacts";

src/components/home/Home.tsx

@@ -1,10 +1,21 @@
 import React from "react";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
 import GroupsIcon from "@mui/icons-material/Groups";
 import AddIcon from "@mui/icons-material/Add";
 import CallIcon from "@mui/icons-material/Call";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 
+const StyledIconButton = styled(IconButton)<IconButtonProps>(({ theme }) => ({
+  borderColor: theme.palette.secondary.main,
+  borderRadius: 10,
+  borderStyle: "solid",
+  borderWidth: 3,
+  width: 150,
+  height: 150,
+}));
+
 const Home: React.FC = () => {
   return (
     <Box
@@ -14,43 +25,39 @@ const Home: React.FC = () => {
         height: "75%",
       }}
     >
-      <Box sx={{ flexGrow: 1 }}>hi</Box>
+      <Box sx={{ width: "50%" }}>hi</Box>
       <Box
         sx={{
           display: "flex",
           flexDirection: "row",
-          flexGrow: 1,
+          width: "50%",
           alignItems: "center",
           justifyContent: "space-evenly",
+          flexWrap: "wrap",
         }}
       >
         <Box>
-          <Button
-            color="secondary"
-            variant="outlined"
-            startIcon={<GroupsIcon />}
-          ></Button>
+          <StyledIconButton>
+            <GroupsIcon sx={{ transform: "scale(3)" }} color="secondary" />
+          </StyledIconButton>
         </Box>
         <Box>
-          <Button
-            color="secondary"
-            variant="outlined"
-            startIcon={<GroupsIcon />}
-          ></Button>
+          <StyledIconButton>
+            <AddIcon sx={{ transform: "scale(3)" }} color="secondary" />
+          </StyledIconButton>
         </Box>
         <Box>
-          <Button
-            color="secondary"
-            variant="outlined"
-            startIcon={<GroupsIcon />}
-          ></Button>
+          <StyledIconButton>
+            <CallIcon sx={{ transform: "scale(3)" }} color="secondary" />
+          </StyledIconButton>
         </Box>
         <Box>
-          <Button
+          <StyledIconButton>
+            <FiberManualRecordIcon
+              sx={{ transform: "scale(3)" }}
               color="secondary"
-            variant="outlined"
-            startIcon={<GroupsIcon />}
-          ></Button>
+            />
+          </StyledIconButton>
         </Box>
       </Box>
     </Box>

src/components/navbar/Clock.tsx

@@ -5,7 +5,7 @@ import React, { useState, useEffect } from "react";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 
-const FormattedBox = styled(Box)<BoxProps>(({ theme }) => ({
+const FormattedBox = styled(Box)<BoxProps>(() => ({
   marginRight: 12,
 }));
 

src/components/navbar/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar: React.FC = () => {
           <img src={pngLogo} alt="Kitty Katty!" style={{ maxWidth: 130 }} />
         </IconButton>
         {pages.map((page, i) => (
-          <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 3 }}>
+          <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 3 }} key={i}>
             <Typography
               variant="h6"
               color="inherit"

src/styles.css

@@ -0,0 +1,7 @@
+html,
+body,
+#app,
+#root,
+#app > div {
+  height: 100%;
+}