fix(frontend): fix toggle on settings page (#2923)

kubeshop · Jul 11, 2023 · 3a1ffc8 · 3a1ffc8
1 parent 0c190bc
commit 3a1ffc8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -39,22 +39,25 @@ 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 />}
 
       <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
@@ -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;