From 3b69d9809e1f310c37c694c0eef36f2c9c9c7f3e Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Wed, 10 Nov 2021 15:25:05 -0800
Subject: [PATCH] Match Checkbox Design (#1216)

* Match Checkbox Design

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* unselected shadow box

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../FormComponents/common/styleLibrary.ts     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 3ba159530..34f49d84e 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -106,17 +106,39 @@ export const tooltipHelper = {
 };
 
 const checkBoxBasic = {
-  width: 14,
-  height: 14,
+  width: 16,
+  height: 16,
   borderRadius: 2,
 };
 
 export const checkboxIcons = {
-  unCheckedIcon: { ...checkBoxBasic, border: "1px solid #c3c3c3" },
+  unCheckedIcon: {
+    ...checkBoxBasic,
+    border: "1px solid #c3c3c3",
+    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
+  },
   checkedIcon: {
     ...checkBoxBasic,
-    border: "1px solid #081C42",
-    backgroundColor: "#081C42",
+    border: "1px solid #FFFFFF",
+    backgroundColor: "#4CCB92",
+    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
+    width: 14,
+    height: 14,
+    marginLeft: 1,
+    "&:before": {
+      content: "''",
+      display: "block",
+      marginLeft: -2,
+      marginTop: -2,
+      width: 16,
+      height: 16,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      borderRadius: 2,
+      border: "1px solid #ccc",
+    },
   },
 };