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>
2021-11-10 15:25:05 -08:00
parent 09a5dfebbc
commit 3b69d9809e
1 changed files with 27 additions and 5 deletions
--- 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",
+    },
  },
 };