styling changes, graphs, remove button

lu0713 · lu0713 · commit 814a3aefafcd · 2020-09-23T20:33:56.000-04:00
diff --git a/app/charts/LatencyChart.tsx b/app/charts/LatencyChart.tsx
@@ -16,7 +16,7 @@ const LatencyChart = React.memo(() => {
             type: 'scattergl',
             y: yAxis,
             mode: 'lines',
-            marker: { color: '#f7215b' },
+            marker: { color: '#fc4039' },
           },
         ]}
         layout={{
diff --git a/app/charts/MemoryChart.tsx b/app/charts/MemoryChart.tsx
@@ -15,7 +15,7 @@ const MemoryChart = React.memo(() => {
           {
             type: 'scattergl',
             fill: 'tonexty',
-            fillcolor: '#24d3f0',
+            fillcolor: '#fc4039',
             mode: 'none',
             y: free,
             name: 'Free Memory',
@@ -31,7 +31,7 @@ const MemoryChart = React.memo(() => {
           {
             type: 'scatter',
             fill: 'tonexty',
-            fillcolor: '#5e84fb',
+            fillcolor: '#3788fc',
             mode: 'none',
             y: active,
             name: 'Active Memory',
@@ -52,11 +52,16 @@ const MemoryChart = React.memo(() => {
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
+            y: -1.0,
+            font: {
+              size: 9
+            }
           },
           xaxis: {
             tickmode: 'linear',
             tick0: 0,
             dtick: 10,
+            title: 'Time Elapsed (min)',
           },
           yaxis: {
             title: 'Bytes'
diff --git a/app/charts/ProcessesChart.tsx b/app/charts/ProcessesChart.tsx
@@ -18,7 +18,7 @@ const ProcessesChart = React.memo(() => {
             mode: 'markers',
             name: 'Running Processes',
             marker: {
-              color: '#24d3f0',
+              color: '#3788fc',
               size: 3,
             },
           },
@@ -28,7 +28,7 @@ const ProcessesChart = React.memo(() => {
             mode: 'markers',
             name: 'Blocked Processes',
             marker: {
-              color: '#f7215b',
+              color: '#fc4039',
               size: 3,
             },
           },
@@ -58,9 +58,14 @@ const ProcessesChart = React.memo(() => {
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
+            y: -1.0,
+          font: {
+            size: 9
+          }
           },
           xaxis: {
             dtick: 10,
+            title: 'Time Elapsed (min)',
           },
           yaxis: {
             title: 'Number of Processes'
diff --git a/app/charts/RequestTypesChart.tsx b/app/charts/RequestTypesChart.tsx
@@ -45,7 +45,7 @@ const RequestTypesChart: React.FC = React.memo(() => {
             type: 'pie',
             textposition: 'inside',
             marker: {
-              colors: ['#fa1a58', '#4a4eee', '#00eda0', '#00d3f2', '#9c27b0', '#ff9800'],
+              colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
             },
             
           },
diff --git a/app/charts/ResponseCodesChart.tsx b/app/charts/ResponseCodesChart.tsx
@@ -61,7 +61,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
             textposition: 'inside',
             domain: { y: [0, 2] },
             marker: {
-              colors: ['#f7215b', '#4b54ea', '#24d3f0', '#27eba2', '#9c27b0'],
+              colors: ['#fc4039', '#4b54ea', '#3788fc', '#32b44f', '#9c27b0'],
             },
           },
         ]}
diff --git a/app/charts/RouteChart.jsx b/app/charts/RouteChart.jsx
@@ -158,17 +158,17 @@ const RouteLocations = React.memo(() => {
     nodes: {
       borderWidth: 0,
       color: {
-        background: '#24d3f0',
+        background: '#3788fc',
         hover: {
-          background: '#4b54ea',
+          background: '#febc2c',
         },
         highlight: {
-          background: '#f7215b',
+          background: '#fc4039',
         }
       },
       shape: 'circle',
       font: {
-        color: '#444d56',
+        color: '#ffffff',
         size: 10,
         face: 'roboto'
       },
diff --git a/app/charts/SpeedChart.tsx b/app/charts/SpeedChart.tsx
@@ -23,7 +23,7 @@ const SpeedChart = React.memo(() => {
             type: 'scatter',
             mode: 'lines+markers',
             marker: {
-              color: '#4b54ea'
+              color: '#3788fc'
             },
           },
         ]}
diff --git a/app/charts/TrafficChart.tsx b/app/charts/TrafficChart.tsx
@@ -32,7 +32,7 @@ const TrafficChart = React.memo(() => {
             x: [...xAxis],
             y: [...serverPings, 0, yAxisHeadRoom],
             fill: 'tozeroy',
-            marker: { color: '#fa1a58' },
+            marker: { color: '#fc4039' },
             mode: 'none',
             name: 'Times Server Pinged',
             showlegend: false,
diff --git a/app/components/Applications.tsx b/app/components/Applications.tsx
@@ -51,15 +51,14 @@ const Applications: React.FC = React.memo((props) => {
       height: 280,
       width: 280,
       textAlign: 'center',
-      color: 'rgba(33, 34, 41, 1.2)',
+      color: '#3788fc',
       whiteSpace: 'nowrap',
       backgroundColor: '#ffffff',
-      borderRadius: 8,
+      borderRadius: 3,
       border: '0',
       boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: `#ccd8e1`,
-        color: '#ffffff',
+        backgroundColor: `#3788fc`,
       },
     },
     hover: {
@@ -70,18 +69,6 @@ const Applications: React.FC = React.memo((props) => {
       '&:hover, &.Mui-focusVisible': { color: '#ffffff' },
       backgroundColor: 'transparent',
     },
-    btnStyle: {
-      position: 'relative',
-      top: 50,
-      margin: '0 auto',
-      color: '#eeeeee',
-      backgroundColor: '#ccd8e1',
-      opacity: 1,
-      '&:hover': {
-        color: '#ffffff',
-        backgroundColor: 'transparent'
-      }
-    },
     fontStyles: {
       fontSize: '16px',
       [theme.breakpoints.up('lg')]: {
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -75,24 +75,30 @@ const Occupied = React.memo(() => {
   };
 
   const useStyles = makeStyles<Theme, StyleProps>(theme => ({
+    // "+" Card Only
     paper: {
       height: 280,
       width: 280,
       textAlign: 'center',
-      color: '#888888',
+      color: '#3788fc',
       whiteSpace: 'nowrap',
       backgroundColor: '#ffffff',
-      borderRadius: 8,
+      borderRadius: 3,
       border: '0',
       boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: `#b5d3e9`,
-        color: '#ffffff',
+        backgroundColor: `#3788fc`,
+        color: '#fff',
+        fontWeight: 300,
       },
     },
-    hover: {
+    iconbutton: {
       boxShadow: 'none',
-      color: 'transparent'
+      color: 'none',
+      '&:hover, &.Mui-focusVisible': {
+        backgroundColor: `#3788fc`,
+        color: '#fff',
+      }
     },
     btnStyle: {
       position: 'absolute',
@@ -101,7 +107,7 @@ const Occupied = React.memo(() => {
       margin: '0',
       color: '#eeeeee',
       borderRadius: '0',
-      backgroundColor: 'transparent',
+      backgroundColor: 'none',
       '&:hover' : {
         backgroundColor: 'none'
       }
@@ -164,7 +170,7 @@ const Occupied = React.memo(() => {
                   avatar={
                     <IconButton
                       ref={element => (delRef.current[i] = element)}
-                      className={classes.hover}
+                      className={classes.iconbutton}
                       aria-label="Delete"
                       onClick={event => confirmDelete(event, app[0], i)}
                     >
diff --git a/app/stylesheets/AddModal.scss b/app/stylesheets/AddModal.scss
@@ -125,7 +125,7 @@
       text-transform: uppercase;
 
       &:hover {
-        background-color: $lightblue;
+        background-color: $gblue;
       }
     }
   }
diff --git a/app/stylesheets/Applications.scss b/app/stylesheets/Applications.scss
@@ -1,5 +1,18 @@
 @import './constants.scss';
 
 
+.card {
+  &:hover p {
+    color: $background;
+    font-weight: 400;
+  }
 
+  p {
+    font-size: 18px;
+    &:hover {
+      color: $background;
+      font-weight: 400;
+    }
+  }
+}
 
diff --git a/app/stylesheets/Contact.scss b/app/stylesheets/Contact.scss
@@ -151,14 +151,14 @@ input[type='file'] {
   background-color: transparent;
   border-radius: 8px;
   &:hover {
-    background-color: $lightblue;
+    background-color: $gblue;
   }
 }
 
 #issueLink {
   color: $header;
   text-decoration: none;
   &:hover {
-    color: $lightblue;
+    color: $gblue;
   }
 }
diff --git a/app/stylesheets/GraphsContainer.scss b/app/stylesheets/GraphsContainer.scss
@@ -9,6 +9,7 @@
   #tracesTitle {
     position: absolute;
     margin-top: 30px;
+    padding-top: 4px;
     font-weight: 400;
     font-family: 'Roboto';
     color: $darkgrey;
diff --git a/app/stylesheets/Header.scss b/app/stylesheets/Header.scss
@@ -6,12 +6,12 @@
   flex-direction: column;
   padding: 30px 0 50px;
   background-color: $grey;
-  color: #333;
+  color: $darkgrey;
   margin-bottom: 30px;
   margin-top: 20px;
 
   h1 {
-    font-weight: 300;
+    font-weight: 500;
     letter-spacing: 2px;
     margin: 0;
   }
@@ -48,7 +48,6 @@ select {
       margin: 10px;
       padding: 5px;
       text-decoration: none;
-      color: $darkgrey;
       transition: 0.1s;
       font-size: 90%;
     
@@ -78,14 +77,20 @@ select {
     
     &:hover{
       cursor: pointer;
-      color: $lightblue;
+      color: $gblue;
+      font-weight: 500;
     }
   }
 }
 .microserviceTitle {
   color: $header;
   font-size: 32px;
   font-family: 'Roboto';
+  &:hover {
+    color: $gblue;
+    font-weight: 700;
+    cursor: pointer;
+  }
 }
 
 #gatherLiveData {
@@ -96,7 +101,7 @@ select {
   padding: 10px;
   border-radius: 10px;
   &:hover {
-    background-color: $lightblue;
+    background-color: $gblue;
   }
 }
 
@@ -147,6 +152,6 @@ select {
   &:hover{
     cursor: pointer;
     box-shadow: $boxshadow3;
-    color: $lightblue;
+    color: $gblue;
   }
 }
diff --git a/app/stylesheets/Occupied.scss b/app/stylesheets/Occupied.scss
@@ -41,7 +41,7 @@
   &:hover{
     cursor: pointer;
     box-shadow: $boxshadow3;
-    color: $lightblue;
+    color: $gblue;
   }
 }
 
@@ -51,7 +51,9 @@
   left: 300px;
   margin-left: $logoPositionLeft - 34px;
   &:hover {
-    color: $lightblue;
+    color: $gblue;
+    font-weight: 500;
+    cursor: pointer;
   }
 }
 
diff --git a/app/stylesheets/ServicesModal.scss b/app/stylesheets/ServicesModal.scss
@@ -14,8 +14,8 @@
     text-align: center;
     margin-bottom: 30px;
     border-bottom: thin solid $grey;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
 
     h2 {
       @include modalHeader();
@@ -37,7 +37,7 @@
       font-size: 90%;
       text-decoration: none;
       border: 2px solid white;
-      border-radius: 8px;
+      border-radius: 3px;
       margin: 10px;
       padding: 12px;
       margin: 0 auto;
@@ -48,7 +48,7 @@
       font-weight: 100;
       &:hover { 
         color: #fff;
-        background-color: $header;
+        background-color: $gblue;
       }
     }
   }
@@ -62,4 +62,5 @@
   font-size: 14px;
   font-weight: 100;
   color: #444d56;
+  border-radius: 3px;
 }
diff --git a/app/stylesheets/constants.scss b/app/stylesheets/constants.scss
