feat: Styles for option buttons

theopensystemslab · Nov 28, 2023 · 18ff5f2 · 18ff5f2
1 parent e31971d
commit 18ff5f2
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/editor.planx.uk/src/ui/OptionButton.tsx b/editor.planx.uk/src/ui/OptionButton.tsx
@@ -12,27 +12,29 @@ const Root = styled(ButtonBase, {
     !["selected", "backgroundColor"].includes(prop.toString()),
 })<Props>(({ theme, selected, backgroundColor }) => ({
   height: 50,
-  paddingLeft: 50,
-  paddingRight: theme.spacing(3),
+  padding: theme.spacing(0, 3, 0, 5),
+  marginBottom: theme.spacing(0.5),
   fontSize: 15,
   position: "relative",
   fontFamily: "inherit",
   display: "block",
   width: "auto",
   minWidth: 200,
   textAlign: "left",
+  border: `1px solid ${theme.palette.border.light}`,
+  backgroundColor: theme.palette.common.white,
   "&::before": {
     content: "''",
     position: "absolute",
-    height: 10,
-    width: 10,
-    left: 20,
-    top: 20,
+    height: 12,
+    width: 12,
+    left: 18,
+    top: 18,
     borderRadius: "50%",
-    backgroundColor: theme.palette.grey[500],
+    backgroundColor: theme.palette.grey[400],
     ...(selected && {
       color: "#fff",
-      backgroundColor: backgroundColor || theme.palette.success.light,
+      backgroundColor: backgroundColor || theme.palette.success.main,
     }),
   },
   ...(!selected && {
@@ -41,7 +43,7 @@ const Root = styled(ButtonBase, {
     },
   }),
   ...(selected && {
-    backgroundColor: theme.palette.grey[300],
+    backgroundColor: theme.palette.grey[200],
   }),
 }));