Fixing table design.

Author: renemadsen

eform-client/src/scss/styles.scss

@@ -125,32 +125,98 @@ a {
 .priority-low span {
   color: #000 !important;
 }
-
+//.background-yellow{background-color: var(--yellow) !important;}
 .grey-background {
-  background-color: #f3f4f6 !important;
-  border-right: 5px solid white !important;
-  padding-right: 5px !important;
-  border-bottom: 1px solid white !important;
+  background-color: white !important;
+  //background-color: #EBEFF2 !important;
+  border-right: 1px solid #EBEFF2 !important;
+  //padding-right: 5px !important;
+  border-bottom: 1px solid #EBEFF2 !important;
+  padding: 5px !important;
+}
+
+.grey-background .plan-container {
+  background-color: #EBEFF2 !important;
+  width: 96% !important;
+  height: 95% !important;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  //width: 100% !important;
+  min-height: 100px;
+  min-width: 250px !important;
+  padding: 5px;
+  //margin: 5px;
 }
 
 .white-background {
-  border-right: 5px solid white !important;
+  background-color: white !important;
+  border-right: 1px solid #EBEFF2 !important;
   margin-right: 5px !important;
-  border-bottom: 1px solid white !important;
+  border-bottom: 1px solid #EBEFF2 !important;
+}
+
+.white-background .plan-container {
+  width: 96% !important;
+  height: 95% !important;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  //width: 100% !important;
+  min-height: 100px;
+  min-width: 250px !important;
+  padding: 5px;
+  //margin: 5px;
 }
 
 .green-background {
-  background-color: #0bbe60 !important;
-  border-bottom: 1px solid white !important;
-  border-right: 5px solid white !important;
-  margin-right: 5px !important;
+  background-color: white !important;
+  //background-color: #EBEFF2 !important;
+  border-right: 1px solid #EBEFF2 !important;
+  //padding-right: 5px !important;
+  border-bottom: 1px solid #EBEFF2 !important;
+  padding: 5px !important;
+}
+
+.green-background .plan-container {
+  background-color: #E2F7E7 !important;
+  width: 96% !important;
+  height: 95% !important;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  //width: 100% !important;
+  min-height: 100px;
+  min-width: 250px !important;
+  padding: 5px;
+  //margin: 5px;
 }
 
 .red-background {
-  background-color: #da4259 !important;
-  border-bottom: 1px solid white !important;
-  border-right: 5px solid white !important;
-  margin-right: 5px !important;
+  background-color: white !important;
+  border-bottom: 1px solid #EBEFF2 !important;
+  border-right: 1px solid #EBEFF2 !important;
+  //margin-right: 5px !important;
+}
+
+.red-background .plan-container {
+  background-color: #FFE1E1 !important;
+  width: 96% !important;
+  height: 95% !important;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  //width: 100% !important;
+  min-height: 100px;
+  min-width: 250px !important;
+  padding: 5px;
+  //margin: 5px;
+}
+
+.device-icon {
+  position: relative !important;
+  top: 5px !important;
+  color: #B3B9BF !important;
 }
 
 .neutral-icon {
@@ -167,15 +233,19 @@ a {
 }
 
 .white-text {
-  color: white !important;
+  color: black !important;
 }
 
 .red-text {
-  color: #da4259 !important;
+  color: #DB0D0D !important;
 }
 
 .blue-text {
-  color: #007bff !important;
+  color: #0D96DB !important;
+}
+
+.grey-text {
+  color: #B3B9BF !important;
 }
 
 .progress-circle {
@@ -184,8 +254,8 @@ a {
   height: 50px;
   border-radius: 50%;
   background: conic-gradient(
-      #0bbe60 0%,
-      #0bbe60 calc(var(--percentage) * 1%),
+      #319C4C 0%,
+      #319C4C calc(var(--percentage) * 1%),
       lightgrey calc(var(--percentage) * 1%),
       lightgrey 100%
   );
@@ -220,6 +290,15 @@ a {
   padding-bottom: 4px;
   padding-top: 4px;
 }
+.plan-content {
+  flex-grow: 1;
+}
+
+.plan-icons {
+  display: flex;
+  gap: 8px;
+  padding-right: 5px;
+}
 
 .flex-column {
   display: flex;