From 0ef11f7f74b47fe3308e57f9a5607e2cabb62d90 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Mon, 28 Feb 2022 21:37:40 -0800
Subject: [PATCH] various changes

---
 src/App.tsx                      |  1 +
 src/components/home/Home.tsx     | 53 ++++++++++++++++++--------------
 src/components/navbar/Clock.tsx  |  2 +-
 src/components/navbar/Navbar.tsx |  2 +-
 src/styles.css                   |  7 +++++
 5 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 src/styles.css

diff --git a/src/App.tsx b/src/App.tsx
index 782efaf..9f8a740 100644
--- a/src/App.tsx
+++ b/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";
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 9cf9a8e..804ce84 100644
--- a/src/components/home/Home.tsx
+++ b/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
-            color="secondary"
-            variant="outlined"
-            startIcon={<GroupsIcon />}
-          ></Button>
+          <StyledIconButton>
+            <FiberManualRecordIcon
+              sx={{ transform: "scale(3)" }}
+              color="secondary"
+            />
+          </StyledIconButton>
         </Box>
       </Box>
     </Box>
diff --git a/src/components/navbar/Clock.tsx b/src/components/navbar/Clock.tsx
index bb03e2d..2de6a3b 100644
--- a/src/components/navbar/Clock.tsx
+++ b/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,
 }));
 
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 9fed9b4..3c12ed9 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/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"
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..915ef09
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,7 @@
+html,
+body,
+#app,
+#root,
+#app > div {
+  height: 100%;
+}