Add custom styling for Toggle

gravitational · May 29, 2023 · a07d55c · a07d55c
1 parent db5edc2
commit a07d55c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -22,9 +22,10 @@ export default function Toggle({
   onToggle,
   children,
   disabled,
+  className,
 }: Props) {
   return (
-    <StyledWrapper disabled={disabled}>
+    <StyledWrapper disabled={disabled} className={className}>
       <StyledInput
         checked={isToggled}
         onChange={onToggle}
@@ -41,6 +42,7 @@ type Props = {
   onToggle: () => void;
   children?: ReactNode;
   disabled?: boolean;
+  className?: string;
 };
 
 const StyledWrapper = styled.label`

diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import styled from 'styled-components';
 import FieldInput from 'shared/components/FieldInput';
 import { requiredField } from 'shared/components/Validation/rules';
 import { FieldTextArea } from 'shared/components/FieldTextArea';
@@ -83,7 +84,7 @@ export function ShareFeedbackFormFields({
         onChange={e => updateFormField('feedback', e.target.value)}
         placeholder="Type your suggestions here"
       />
-      <Toggle
+      <ToggleWithCustomStyling
         disabled={disabled}
         isToggled={formValues.newsletterEnabled}
         onToggle={() => {
@@ -93,8 +94,8 @@ export function ShareFeedbackFormFields({
         <Text ml={2} color="text.main">
           Sign me up for the newsletter
         </Text>
-      </Toggle>
-      <Toggle
+      </ToggleWithCustomStyling>
+      <ToggleWithCustomStyling
         disabled={disabled}
         isToggled={formValues.salesContactEnabled}
         onToggle={() => {
@@ -113,7 +114,15 @@ export function ShareFeedbackFormFields({
         >
           I would like a demo of Teleport&nbsp;Enterprise features
         </Text>
-      </Toggle>
+      </ToggleWithCustomStyling>
     </>
   );
 }
+
+// Custom styling for the toggle to make it readable on a light background.
+// TODO(gzdunek): remove when design team finish work on this form control.
+const ToggleWithCustomStyling = styled(Toggle)`
+  > div:first-of-type {
+    border: 1px solid ${props => props.theme.colors.spotBackground[1]};
+  }
+`;