From 3a1ffc8c2a83ed93e2cd004c94b2d4b80765ef8e Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Wed, 12 Jul 2023 05:43:58 +0900
Subject: [PATCH] fix(frontend): fix toggle on settings page (#2923)

---
 web/src/components/Settings/Analytics/AnalyticsForm.tsx | 2 +-
 web/src/components/Settings/Demo/DemoForm.tsx           | 7 +++++--
 web/src/components/Settings/common/Settings.styled.ts   | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Settings/Analytics/AnalyticsForm.tsx b/web/src/components/Settings/Analytics/AnalyticsForm.tsx
index 0cec544c45..7a23b4f230 100644
--- a/web/src/components/Settings/Analytics/AnalyticsForm.tsx
+++ b/web/src/components/Settings/Analytics/AnalyticsForm.tsx
@@ -33,10 +33,10 @@ const AnalyticsForm = () => {
       <Form.Item hidden name="name" />
 
       <S.SwitchContainer>
-        <label htmlFor={`${FORM_ID}_analyticsEnabled`}>Enable analytics</label>
         <Form.Item name="analyticsEnabled" valuePropName="checked">
           <Switch />
         </Form.Item>
+        <S.SwitchLabel htmlFor={`${FORM_ID}_analyticsEnabled`}>Enable analytics</S.SwitchLabel>
       </S.SwitchContainer>
 
       <S.FooterContainer>
diff --git a/web/src/components/Settings/Demo/DemoForm.tsx b/web/src/components/Settings/Demo/DemoForm.tsx
index b81225a2b5..a609b19778 100644
--- a/web/src/components/Settings/Demo/DemoForm.tsx
+++ b/web/src/components/Settings/Demo/DemoForm.tsx
@@ -39,10 +39,10 @@ const DemoForm = () => {
       <Form.Item name={[SupportedDemosFormField.Pokeshop, 'name']} hidden />
 
       <S.SwitchContainer>
-        <label htmlFor={`${FORM_ID}_pokeshopEnabled`}>Enable Pokeshop</label>
         <Form.Item name={[SupportedDemosFormField.Pokeshop, 'enabled']} valuePropName="checked">
           <Switch />
         </Form.Item>
+        <S.SwitchLabel htmlFor={`${FORM_ID}_pokeshop_enabled`}>Enable Pokeshop</S.SwitchLabel>
       </S.SwitchContainer>
 
       {pokeshopEnabled && <PokeshopFields />}
@@ -50,11 +50,14 @@ const DemoForm = () => {
       <Form.Item name={[SupportedDemosFormField.OpentelemetryStore, 'type']} hidden />
       <Form.Item name={[SupportedDemosFormField.OpentelemetryStore, 'id']} hidden />
       <Form.Item name={[SupportedDemosFormField.OpentelemetryStore, 'name']} hidden />
+
       <S.SwitchContainer>
-        <label htmlFor={`${FORM_ID}_otelEnabled`}>Enable OpenTelemetry Astronomy Shop Demo</label>
         <Form.Item name={[SupportedDemosFormField.OpentelemetryStore, 'enabled']} valuePropName="checked">
           <Switch />
         </Form.Item>
+        <S.SwitchLabel htmlFor={`${FORM_ID}_opentelemetryStore_enabled`}>
+          Enable OpenTelemetry Astronomy Shop Demo
+        </S.SwitchLabel>
       </S.SwitchContainer>
 
       {otelEnabled && <OtelFields />}
diff --git a/web/src/components/Settings/common/Settings.styled.ts b/web/src/components/Settings/common/Settings.styled.ts
index 994bd0353a..6069a687bf 100644
--- a/web/src/components/Settings/common/Settings.styled.ts
+++ b/web/src/components/Settings/common/Settings.styled.ts
@@ -33,6 +33,10 @@ export const SwitchContainer = styled.div`
   gap: 8px;
 `;
 
+export const SwitchLabel = styled.label`
+  margin-bottom: 24px;
+`;
+
 export const LinterPluginsContainer = styled.div`
   margin-top: 10px;
   padding: 24px 24px 0;