styling changes, Electron app still fully functional

lu0713 · lu0713 · commit 8670d1df9fb9 · 2020-09-06T17:09:21.000-04:00
diff --git a/app/assets/Rounded_Elegance.ttf b/app/assets/Rounded_Elegance.ttf
diff --git a/app/assets/chronos-v4-pangolin.png b/app/assets/chronos-v4-pangolin.png
diff --git a/app/assets/icon.png b/app/assets/icon.png
diff --git a/app/assets/icon_inverted.png b/app/assets/icon_inverted.png
diff --git a/app/assets/icon_old.png b/app/assets/icon_old.png
diff --git a/app/components/Applications.tsx b/app/components/Applications.tsx
@@ -46,37 +46,42 @@ const Applications = () => {
   };
 
   const useStyles = makeStyles(theme => ({
+    // card: myPostgres, myMongo, ToddDB buttons
     paper: {
       height: 340,
       textAlign: 'center',
       color: 'rgba(33, 34, 41, 1.2)',
       whiteSpace: 'nowrap',
-      backgroundColor: 'rgba(33, 34, 41, 0.2)',
-      border: '3px ridge #808080',
+      backgroundColor: '#ffffff',
+      // border: '3px ridge #808080',
+      border: '0',
       boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
       '&:hover, &.Mui-focusVisible': {
-        color: 'white',
-        background: 'rgba(33, 34, 41, 1.2)',
+        backgroundColor: 'rgb(61, 67, 78)',
+        color: '#ffffff',
       },
     },
     hover: {
       position: 'relative',
       bottom: 20,
-      right: 40,
+      right: 47,
       boxShadow: 'none',
-      '&:hover, &.Mui-focusVisible': { color: 'red' },
+      '&:hover, &.Mui-focusVisible': { color: '#ffffff' },
+      backgroundColor: 'transparent',
     },
     btnStyle: {
       position: 'relative',
       top: 50,
       margin: '0 auto',
-      color: 'rgb(255, 243, 72)',
-      backgroundColor: 'grey',
+      color: '#e0e7ef',
+      backgroundColor: 'transparent',
     },
     fontStyles: {
       fontSize: '3rem',
       [theme.breakpoints.up('lg')]: {
         fontSize: '2.75rem',
+        // MAIN PAGE SQUARE BUTTON FONTS
+        fontFamily: 'Montserrat'
       },
     },
   }));
@@ -89,6 +94,7 @@ const Applications = () => {
         <Grid item lg={4} md={6} sm={12} key={i}>
           <div id="card-hover">
             <Card
+              id={`card-${i}`}
               className={classes.paper}
               variant="outlined"
               onClick={event => handleClick(event, app[0], i)}
diff --git a/app/components/Copyright.tsx b/app/components/Copyright.tsx
@@ -1,16 +1,26 @@
 import React from 'react';
 import { Typography, Link } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import '../stylesheets/Applications.css';
 
 export interface CopyrightProps {}
 
-const Copyright = () => (
-  <Typography variant="body2" color="textSecondary" align="center">
+const Copyright = () => {
+  const useStyles = makeStyles(theme => ({
+    copyright: {
+      fontFamily: 'Montserrat',
+      position: 'fixed',
+    }
+  }))
+  const classes = useStyles();
+  return (
+  <Typography className={classes.copyright} variant="body2" color="textSecondary" align="center">
     {'Copyright © '}
     <Link color="inherit" href="https://chronoslany.com/" target="_blank">
       Team Chronos
     </Link>{' '}
     {new Date().getFullYear()}
     {'.'}
   </Typography>
-);
+)};
 export default Copyright;
diff --git a/app/components/Home.tsx b/app/components/Home.tsx
@@ -6,7 +6,7 @@ import '../stylesheets/Home.scss';
 const Home = () => (
   <div className="home">
     <div className="pangolin-container">
-      <img src={'../assets/chronos-v4-pangolin.png'} alt="Chronos logo" />
+      <img src={'../assets/icon.png'} alt="Chronos logo" />
     </div>
     <h1 id="welcome">Welcome to Chronos</h1>
     <p>Your all-in-one application monitoring tool.</p>
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -10,16 +10,18 @@ const Occupied: React.FC = () => {
   const [open, setOpen] = useState(false);
 
   const useStyles = makeStyles(theme => ({
+    // card: "+" button only
     paper: {
       color: 'rgba(33, 34, 41, 0.75)',
       height: 340,
       width: '100%',
-      backgroundColor: 'rgba(33, 34, 41, 0.2)',
-      border: '3px ridge #808080',
+      backgroundColor: '#ffffff',
+      // border: '3px ridge #808080',
+      border: '0',
       boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: 'rgba(33, 34, 41, 1.2)',
-        color: 'rgb(255, 243, 72)',
+        backgroundColor: 'rgb(61, 67, 78)',
+        color: '#ffffff',
       },
     },
     grid: {
@@ -28,31 +30,37 @@ const Occupied: React.FC = () => {
       maxHeight: '75vh',
     },
     icon: {
-      width: '100px',
-      height: '100px',
+      width: '75px',
+      height: '75px',
       boxShadow: 'none',
     },
-    heroContent: {
+    // APPLICATION HEADER
+    applicationHeader: {
       fontWeight: 700,
-      color: '#333',
+      fontFamily: 'Montserrat',
+      color: '#ffffff',
       padding: theme.spacing(8, 0, 6),
-      backgroundColor: '#e8e8e8',
+      backgroundColor: '#5490c8',
+      boxShadow: '2px 2px 2px 2px rgba(0,0,0,0.5)',
     },
+    subTitle: {
+      fontFamily: 'Montserrat',
+    }
   }));
 
   const classes = useStyles();
 
   return (
     <>
       <Typography
-        className={classes.heroContent}
+        className={classes.applicationHeader}
         variant="h2"
         align="center"
         color="textPrimary"
         gutterBottom
       >
         Applications
-        <Typography>Click a Card to Begin!</Typography>
+        <Typography className={classes.subTitle}>Select A Microservice</Typography>
       </Typography>
       <Modal open={open} onClose={() => setOpen(false)}>
         <AddModal setOpen={setOpen} />
diff --git a/app/components/Splash.tsx b/app/components/Splash.tsx
@@ -14,7 +14,7 @@ const Splash: React.FC<SplashProps> = ({ setFirstVisit }) => {
   return (
     <div id="splash">
       <img src={'../assets/icon.png'} alt="Chronos Logo" />
-      <span>chronos</span>
+      <span>CHRONOS</span>
     </div>
   );
 };
diff --git a/app/containers/SidebarContainer.tsx b/app/containers/SidebarContainer.tsx
@@ -10,8 +10,8 @@ import '../stylesheets/SidebarContainer.css';
 const SidebarContainer: React.FC = (): JSX.Element => (
   <div className="sidebar-container" id="mySidebar">
     <div className="sidebar">
-      <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon2Cropped.png'} />
-      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/chronos-v4-pangolin.png'} />
+      <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon.png'} />
+      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/icon.png'} />
       <Link className="sidebar-link" to="/" id="home">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Home
diff --git a/app/index.html b/app/index.html
@@ -4,11 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Chronos</title>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-    />
+    <title>CHRONOS</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Peta&display=swap" />
     <script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
   </head>
   <body>
diff --git a/app/index.tsx b/app/index.tsx
@@ -6,7 +6,8 @@ import { createMuiTheme, ThemeProvider } from '@material-ui/core';
 
 const theme = createMuiTheme({
   typography: {
-    fontFamily: ['Nunito sans', 'sans-serif'].join(','),
+    // Graph font when you shrink window
+    fontFamily: ['Montserrat', 'sans-serif'].join(','),
   },
 });
 
diff --git a/app/stylesheets/Applications.css b/app/stylesheets/Applications.css
@@ -1,25 +1,25 @@
 #card-hover {
   cursor: pointer;
-  transition: all 1s;
+  transition: all 0.5s;
   &:after,
   &:before {
     content: ' ';
     width: 10px;
     height: 10px;
     position: absolute;
-    transition: all 1s;
+    transition: all 0.5s;
   }
   &:after {
     top: -1px;
     right: -1px;
-    border-top: 2px solid rgba(255, 243, 72, 0.7);
-    border-right: 2px solid rgba(255, 243, 72, 0.7);
+    border-top: 2px solid rgba(132, 216, 255, 0.7);
+    border-right: 2px solid rgba(132, 216, 255, 0.7);
   }
   &:before {
     bottom: -1px;
     left: -1px;
-    border-bottom: 2px solid rgba(255, 243, 72, 0.7);
-    border-left: 2px solid rgba(255, 243, 72, 0.7);
+    border-bottom: 2px solid rgba(132, 216, 255, 0.7);
+    border-left: 2px solid rgba(132, 216, 255, 0.7);
   }
   &:hover {
     position: relative;
diff --git a/app/stylesheets/GraphsContainer.scss b/app/stylesheets/GraphsContainer.scss
@@ -43,19 +43,22 @@
 @media screen and (min-width: 601px) and (max-width: 980px) {
   .graphsGrid {
     grid-template-columns: repeat(1, 1fr);
+    font-family: 'Montserrat', sans-serif;
   }
 }
 
 /* Normal */
 @media screen and (min-width: 1000px) and (max-width: 1500px) {
   .graphsGrid {
     grid-template-columns: repeat(2, 1fr);
+    font-family: 'Montserrat', sans-serif;
   }
 }
 
 /* Lg Screen */
 @media screen and (min-width: 1600px) {
   .graphsGrid {
     grid-template-columns: repeat(3, 1fr);
+    font-family: 'Montserrat', sans-serif;
   }
 }
diff --git a/app/stylesheets/Home.scss b/app/stylesheets/Home.scss
@@ -40,7 +40,7 @@
     padding: 10px 15px;
     letter-spacing: 0.5px;
     text-decoration: none;
-    border: thin solid $sidebarblue;
+    // border: thin solid $sidebarblue;
     border-radius: 30px;
     background-color: $sidebarblue;
     color: #fff;
@@ -49,8 +49,9 @@
     animation: glow linear 2s infinite;
 
     &:hover {
-      background-color: $brandgold;
-      color: #333;
+      background-color: #bc0b0b;
+      opacity: 0.85;
+      // color: rgb(132, 132, 132);
       animation: none;
     }
   }
diff --git a/app/stylesheets/MainContainer.scss b/app/stylesheets/MainContainer.scss
@@ -1,6 +1,7 @@
 @import './constants.scss';
 
 .main-container {
+  background-color: #e0e7ef;
   flex: 1;
   min-height: 100vh;
   @include centerWithFlex(space-between);
@@ -15,8 +16,10 @@
 
   .copyright-container {
     @include centerWithFlex(center);
+    position: fixed;
     bottom: 0;
     width: 100%;
     padding: 10px;
+    margin-top: 30px;
   }
 }
diff --git a/app/stylesheets/ServicesList.css b/app/stylesheets/ServicesList.css
@@ -1,4 +1,4 @@
-.services-btn {
+/* .services-btn {
   font-family: 'Nunito', sans-serif;
   background-color: #24262F;
   width: 13em;
@@ -18,4 +18,4 @@
   font-weight: 400;
   box-shadow: #333;
   cursor: pointer;
-}
+} */
diff --git a/app/stylesheets/SidebarContainer.css b/app/stylesheets/SidebarContainer.css
@@ -1,9 +1,9 @@
 .sidebar-container {
   color: white;
-  background-color: #24262f;
+  /* background-color: #24262f; */
   width: 100px;
   position: absolute;
-  transition: 300ms;
+  transition: 200ms;
   overflow: hidden;
   z-index: 1;
   white-space: nowrap;
@@ -39,11 +39,13 @@
 }
 
 #serviceDashLogo {
+  animation: twirl 20s infinite linear;
   opacity: 0;
   width: 160px;
   margin-top: 20px;
   transition: 300ms;
 }
+
 #miniLogo {
   position: absolute;
   animation: twirl 20s infinite linear;
@@ -55,8 +57,9 @@
   transition: 200ms;
   margin-top: 10px;
 }
+
 .sidebar {
-  background-color: #24262f;
+  background-color: #161b2d;
   padding-left: 20px;
   width: 100px;
   height: 100%;
@@ -81,11 +84,12 @@
   display: flex;
   align-items: center;
   justify-content: left;
-  background-color: #24262f;
+  background-color: #161b2d;
   height: 40px;
   width: 50px;
-  border: thin solid rgb(79, 79, 85);
-  border-radius: 8px;
+  border: 0.3px solid #ffffff;
+  border: 0;
+  border-radius: 3px;
   font-size: 125%;
   color: whitesmoke;
   text-decoration: none;
@@ -94,6 +98,6 @@
 }
 
 .sidebar-link:hover {
-  background-color: #494fee;
-  color: azure;
+  /* background-color: #494fee; */
+  color:#5490c8;
 }
diff --git a/app/stylesheets/Splash.css b/app/stylesheets/Splash.css
diff --git a/app/stylesheets/index.scss b/app/stylesheets/index.scss
