fix: border opacity 0.4

src/components/CommonKit/Card/StyledCard.tsx

@@ -18,19 +18,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 

src/components/CommonKit/Card/StyledIconCard.tsx

@@ -23,19 +23,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 

src/styles/base/_color.scss

@@ -71,16 +71,19 @@ $accordion-active-background: #34353a;
 $text-color: white;
 
 $elec-color: #d87b39;
+$elec-color-40: rgba(216, 123, 57, 0.4);
 $elec-off-color: #5d3d2a;
 $elec-compare-color: #e2bca1;
 $elec-compare-off-color: #795c47;
 
 $gas-color: #45d1b8;
+$gas-color-40: rgba(69, 209, 184, 0.4);
 $gas-off-color: #184940;
 $gas-compare-color: #a8f7e9;
 $gas-compare-off-color: #597773;
 
 $water-color: #3a98ec;
+$water-color-40: rgba(58, 152, 236, 0.4);
 $water-off-color: #20415e;
 $water-compare-color: #abd4fa;
 $water-compare-off-color: #4d5c6e;

src/styles/index.scss

@@ -34,10 +34,13 @@
   --blueRadialGradient: #{$blue-radial-gradient};
   --blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
   --elecColor: #{$elec-color};
+  --elecColor40: #{$elec-color-40};
   --elecCompareColor: #{$elec-compare-color};
   --gasColor: #{$gas-color};
+  --gasColor40: #{$gas-color-40};
   --gasCompareColor: #{$gas-compare-color};
   --waterColor: #{$water-color};
+  --waterColor40: #{$water-color-40};
   --waterCompareColor: #{$water-compare-color};
   --multiColor: #{$multi-color};
   --multiCompareColor: #{$multi-compare-color};