From 39daca90476635cb7af2d4bc850c1632ef995ee2 Mon Sep 17 00:00:00 2001
From: Pawan Jain <jainpawan211199@gmail.com>
Date: Wed, 3 Jan 2024 17:11:40 +0530
Subject: [PATCH] feat: add switch description and label

---
 .../components/IntegrationInput.tsx           | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/pages/integrations/components/IntegrationInput.tsx b/apps/web/src/pages/integrations/components/IntegrationInput.tsx
index e000f158991..28b6f74a7bc 100644
--- a/apps/web/src/pages/integrations/components/IntegrationInput.tsx
+++ b/apps/web/src/pages/integrations/components/IntegrationInput.tsx
@@ -1,17 +1,28 @@
-import { useMantineTheme } from '@mantine/core';
 import styled from '@emotion/styled';
 import { CredentialsKeyEnum, IConfigCredentials, secureCredentials } from '@novu/shared';
-
-import { Input, PasswordInput, Switch, Textarea, Text, Tooltip, Select } from '@novu/design-system';
+import { Input, PasswordInput, Switch, Textarea, Tooltip, Select } from '@novu/design-system';
 import { IntegrationSecretTextarea } from './IntegrationSecretTextarea';
 
 const SwitchWrapper = styled.div`
   display: flex;
   align-items: center;
+`;
 
-  > .mantine-Text-root {
-    margin-right: auto;
-  }
+const SwitchDescription = styled.div`
+  color: ${({ theme }) => `${theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[6]}`};
+  font-size: 14px !important;
+  font-weight: 400;
+  margin-top: '0px';
+  margin-bottom: '10px';
+  line-height: '17px';
+`;
+
+const SwitchLabel = styled.div`
+  color: ${({ theme }) => `${theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[8]}`};
+  font-size: 14px !important;
+  font-weight: 700;
+  margin: 5px auto 5px 0px;
+  line-height: 17px;
 `;
 
 export function IntegrationInput({
@@ -27,8 +38,6 @@ export function IntegrationInput({
   register?: any;
   ignoreTls?: boolean;
 }) {
-  const theme = useMantineTheme();
-
   if (isNeededToHide(credential.key)) {
     if (credential.type === 'text') {
       return <IntegrationSecretTextarea credential={credential} errors={errors} field={field} register={register} />;
@@ -90,7 +99,6 @@ export function IntegrationInput({
         label={field.value ? 'Active' : 'Disabled'}
         required={credential.required}
         placeholder={credential.displayName}
-        description={credential.description ?? ''}
         data-test-id={credential.key}
         error={errors[credential.key]?.message}
         {...register?.(credential.key)}
@@ -115,28 +123,33 @@ export function IntegrationInput({
     }
 
     return (
-      <SwitchWrapper>
-        {credential.displayName && <Text>{credential.displayName}</Text>}
-        {switchComponent}
-      </SwitchWrapper>
+      <>
+        <SwitchWrapper>
+          {credential.displayName && <SwitchLabel>{credential.displayName}</SwitchLabel>}
+          {switchComponent}
+        </SwitchWrapper>
+        {credential.description && <SwitchDescription>{credential.description}</SwitchDescription>}
+      </>
     );
   }
 
   if (credential.type === 'boolean') {
     return (
-      <SwitchWrapper>
-        {credential.displayName && <Text>{credential.displayName}</Text>}
-        <Switch
-          required={credential.required}
-          placeholder={credential.displayName}
-          description={credential.description ?? ''}
-          data-test-id={credential.key}
-          error={errors[credential.key]?.message}
-          {...register?.(credential.key)}
-          checked={field.value}
-          onChange={field.onChange}
-        />
-      </SwitchWrapper>
+      <>
+        <SwitchWrapper>
+          {credential.displayName && <SwitchLabel>{credential.displayName}</SwitchLabel>}
+          <Switch
+            required={credential.required}
+            placeholder={credential.displayName}
+            data-test-id={credential.key}
+            error={errors[credential.key]?.message}
+            {...register?.(credential.key)}
+            checked={field.value}
+            onChange={field.onChange}
+          />
+        </SwitchWrapper>
+        {credential.description && <SwitchDescription>{credential.description}</SwitchDescription>}
+      </>
     );
   }