Modify sidebar dimensions to be symmetrical

Author: wang3101

app/components/Settings.tsx

@@ -1,5 +1,9 @@
 import React from 'React';
 
+// Need to add flag to turn off the splash at start
+// Need to add flag to turn off getting started page
+// Need to add flag to turn on/off live data (ideally persist on restart)
+// Need to add dark mode
 const Settings: React.FC = () => {
   return <div className="home">Hello this is the Settings</div>;
 };

app/containers/SidebarContainer.tsx

@@ -30,9 +30,6 @@ const SidebarContainer: React.FC = (): JSX.Element => (
     <div className="sidebar">
       <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon2Cropped.png'} />
       <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/pangolin.png'} />
-      <br />
-      <br />
-      <br />
       <Link className="sidebar-link" to="/" id="home">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Home

app/stylesheets/SidebarContainer.css

@@ -20,7 +20,7 @@
   margin-right: 30px;
 } */
 .sidebar-container:hover {
-  width: 200px;
+  width: 210px;
 }
 .sidebar-container:hover .sidebar-link {
   width: 150px;
@@ -55,7 +55,7 @@
 #miniLogo {
   position: absolute;
   animation: twirl 20s infinite linear;
-  left: 7px;
+  left: 12px;
   top: 35px;
   height: 75px;
   width: 75px;
@@ -74,14 +74,14 @@
   transition: 900ms;
 }
 
-.container img {
-  margin-bottom: 1px;
+.sidebar img {
+  margin-bottom: 100px;
 }
 
 .sidebar-link {
   overflow: hidden;
   z-index: 1;
-  margin: 5px 0;
+  margin: 5px 5px;
   padding: 1px 5px;
   display: flex;
   align-items: center;