Adjust toggle components sizing (#5408)

(cherry picked from commit a9cbd23fcdcbacbdd2ca5f6bbe0bc7161e6591e3)

1 files changed, 10 insertions, 10 deletions

diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index 391b1c8b7..6dc387b23 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -351,8 +351,8 @@ export function Checkbox() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 20,
+          height: 24,
+          width: 24,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -383,9 +383,9 @@ export function Switch() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 32,
-          padding: 2,
+          height: 24,
+          width: 36,
+          padding: 3,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -395,8 +395,8 @@ export function Switch() {
         style={[
           a.rounded_full,
           {
-            height: 14,
-            width: 14,
+            height: 16,
+            width: 16,
           },
           selected
             ? {
@@ -436,8 +436,8 @@ export function Radio() {
         t.atoms.border_contrast_high,
         {
           borderWidth: 1,
-          height: 20,
-          width: 20,
+          height: 24,
+          width: 24,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
@@ -447,7 +447,7 @@ export function Radio() {
           style={[
             a.absolute,
             a.rounded_full,
-            {height: 12, width: 12},
+            {height: 16, width: 16},
             selected
               ? {
                   backgroundColor: t.palette.primary_500,