Updated stylings on Volumes and Configurations page

Co-authored-by: Ellis <[email protected]>
Co-authored-by: Chris <[email protected]>
Co-authored-by: Joseph <[email protected]>
Co-authored-by: Dylan <[email protected]>
Co-authored-by: Aiden <[email protected]>

Author: 5 people

ui/src/_variables.scss

@@ -155,8 +155,7 @@ $palettes: (
 
 // card is in variables to allow for easy extending and customization in containers, images, and volume history. Keeps tha base option the same, but allows for easy customization. Simply change things here and it will change everywhere.
 .card {
-  background-color: color(background, base);
-  background: $background-bg;
+  background-color: rgba(0, 0, 0, 0.128);
   box-shadow: $shadow;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -169,8 +168,9 @@ $palettes: (
   border-width: 2px;
   border-style: solid;
   border-color: color(light, base);
-  // border-color: color(background, base);
   border-image: initial;
   transition: border 350ms ease 100ms, background-image 200ms ease;
   transition: all 0.3s ease-in-out;
 }
+
+

ui/src/components/Configuration/GlobalConfigs.tsx

@@ -37,7 +37,7 @@ const GlobalConfigs = ({ setIsModified }): React.JSX.Element => {
   return (
     <form action="" className={styles.containerCard}>
       <span>
-        <strong>Scrape Interval: </strong>
+        <strong style={{color: 'rgb(156, 171, 213)'}}>Scrape Interval: </strong>
         {isEdit ? (
           <input
             style={{ color: "black" }}
@@ -56,7 +56,7 @@ const GlobalConfigs = ({ setIsModified }): React.JSX.Element => {
       </span>
 
       <span>
-        <strong>Evaluation Interval: </strong>
+        <strong style={{color: 'rgb(156, 171, 213)'}}>Evaluation Interval: </strong>
         {isEdit ? (
           <input
             style={{ color: "black" }}

ui/src/components/Configuration/JobConfigs.tsx

@@ -66,15 +66,15 @@ const JobConfigs = ({ index, setIsModified }: {index: number, setIsModified : Fu
   return (
     <div className={styles.containerCard}>
       <span>
-        <strong>Job Name: </strong>
+        <strong style={{color: 'rgb(156, 171, 213)'}}>Job Name: </strong>
         {jobName}
       </span>
       <span>
-        <strong>Scrape Interval: </strong>
+        <strong style={{color: 'rgb(156, 171, 213)'}}>Scrape Interval: </strong>
         {scrapeInterval}
       </span>
       <span>
-        <strong>Targets: </strong>
+        <strong style={{color: 'rgb(156, 171, 213)'}}>Targets: </strong>
         {isEdit ? (
           <input
             style={{ color: 'black', width: '400px' }}

ui/src/components/Configuration/configuration.module.scss

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   margin: $default-page-margin;
-  backdrop-filter: blur(4px);
 }
 
 .configurationHeader {
@@ -100,8 +99,6 @@
   overflow-x: scroll;
   overflow-y: scroll;
   font-family: 'Roboto';
-
-  background-color: color(background, base);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   border-radius: 10px;

ui/src/components/VolumeHistory/SingleVolume.tsx

@@ -19,19 +19,19 @@ const SingleVolume = ({volName, onHover, removeClick, containers}: SVJSX): React
   return (
               <div className={`${styles.volumesCard}`}>
                 <div onMouseOver={onHover}>
-                  <h3>{`${volName.substring(0, 20)}...`}</h3>
+                  <h3 style={{ color: '#6cc6f0' }}>{`${volName.substring(0, 20)}...`}</h3>
                 </div>
                 <div>
                   {containers.length ? (
                     containers.map((container, j) => (
                       <div key={`vol-${j}`}>
-                        <strong>Container: </strong>
+                        <strong style={{color: 'rgb(156, 171, 213)'}}>Container: </strong>
                         {container.Names}
                         <br />
-                        <strong>Status: </strong>
+                        <strong style={{color: 'rgb(156, 171, 213)'}}>Status: </strong>
                         {container.State}
                         <br />
-                        <strong>Runtime: </strong>
+                        <strong style={{color: 'rgb(156, 171, 213)'}}>Runtime: </strong>
                         {container.Status}
                       </div>
                     ))

ui/styles.scss

@@ -1,7 +1,7 @@
 html {
     height: auto;
-    background: radial-gradient(ellipse at bottom, #1b2735 0%,#090a0f 100%);
-    background-color: rgb(73, 71, 71);
+    // background: radial-gradient(ellipse at bottom, #1b2735 0%,#090a0f 100%);
+    background-color: rgb(20, 20, 20);
 }
 
 .wrapper {