From 8a24a1ead819466f5661131ca3de55fa5d32100a Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Fri, 12 Jan 2024 10:13:17 +0100
Subject: [PATCH 1/2] Remove custom styling for toggles

---
 .../src/ui/Search/pickers/ActionPicker.tsx       | 11 +----------
 .../ShareFeedback/ShareFeedbackFormFields.tsx    | 16 ++++------------
 2 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
index b95765ae20819..a67034c70fc1b 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
@@ -1030,16 +1030,7 @@ function ContentAndAdvancedSearch(
     <Flex gap={2} justifyContent="space-between" alignItems="flex-start">
       {props.children}
       {props.advancedSearch && (
-        <AdvancedSearchToggle
-          {...props.advancedSearch}
-          css={`
-            //TODO(gzdunek): Remove when we get a toggle that can be displayed
-            // on a white background
-            label > div {
-              border: 1px solid ${props => props.theme.colors.spotBackground[1]};
-            }
-          `}
-        />
+        <AdvancedSearchToggle {...props.advancedSearch} />
       )}
     </Flex>
   );
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
index 704192b4e08f8..a501e3fda3f1a 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -85,7 +85,7 @@ export function ShareFeedbackFormFields({
         onChange={e => updateFormField('feedback', e.target.value)}
         placeholder="Type your suggestions here"
       />
-      <ToggleWithCustomStyling
+      <Toggle
         disabled={disabled}
         isToggled={formValues.newsletterEnabled}
         onToggle={() => {
@@ -95,8 +95,8 @@ export function ShareFeedbackFormFields({
         <Text ml={2} color="text.main">
           Sign me up for the newsletter
         </Text>
-      </ToggleWithCustomStyling>
-      <ToggleWithCustomStyling
+      </Toggle>
+      <Toggle
         disabled={disabled}
         isToggled={formValues.salesContactEnabled}
         onToggle={() => {
@@ -115,15 +115,7 @@ export function ShareFeedbackFormFields({
         >
           I would like a demo of Teleport&nbsp;Enterprise features
         </Text>
-      </ToggleWithCustomStyling>
+      </Toggle>
     </>
   );
 }
-
-// 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]};
-  }
-`;

From a47291f2e4bceb66a46856518ee628e39608f12f Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Fri, 12 Jan 2024 16:17:22 +0100
Subject: [PATCH 2/2] Remove unused import and unneeded props interface

---
 .../ShareFeedback/ShareFeedbackFormFields.tsx      | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
index a501e3fda3f1a..a4a2e16055cae 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -17,7 +17,6 @@
  */
 
 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';
@@ -25,18 +24,15 @@ import { Text, Toggle } from 'design';
 
 import { ShareFeedbackFormValues } from './types';
 
-interface ShareFeedbackFormProps {
-  disabled: boolean;
-  formValues: ShareFeedbackFormValues;
-
-  setFormValues(values: ShareFeedbackFormValues): void;
-}
-
 export function ShareFeedbackFormFields({
   formValues,
   setFormValues,
   disabled,
-}: ShareFeedbackFormProps) {
+}: {
+  disabled: boolean;
+  formValues: ShareFeedbackFormValues;
+  setFormValues(values: ShareFeedbackFormValues): void;
+}) {
   function updateFormField<T extends keyof ShareFeedbackFormValues>(
     field: T,
     value: ShareFeedbackFormValues[T]