Remove duplicative Toggle component (#3028)

fix: Tidy some styling and spacing issues in settings

app/components/Button.tsx

@@ -31,7 +31,7 @@ const RealButton = styled.button<{
     !props.borderOnHover &&
     `
       svg {
-        fill: ${props.iconColor || props.theme.buttonText};
+        fill: ${props.iconColor || "currentColor"};
       }
     `}
 
@@ -69,7 +69,7 @@ const RealButton = styled.button<{
       props.borderOnHover
         ? ""
         : `svg {
-      fill: ${props.iconColor || props.theme.buttonNeutralText};
+      fill: ${props.iconColor || "currentColor"};
     }`
     }
 
@@ -89,7 +89,7 @@ const RealButton = styled.button<{
       color: ${props.theme.textTertiary};
 
       svg {
-        fill: ${props.theme.textTertiary};
+        fill: currentColor;
       }
     }
   `}
@@ -162,7 +162,7 @@ const Button = <T extends React.ElementType = "button">(
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
+        {disclosure && <ExpandedIcon color="currentColor" />}
       </Inner>
     </RealButton>
   );

app/components/GroupListItem.tsx

@@ -61,7 +61,7 @@ class GroupListItem extends React.Component<Props> {
             </>
           }
           actions={
-            <Flex align="center">
+            <Flex align="center" gap={8}>
               {showFacepile && (
                 <Facepile
                   onClick={this.handleMembersModalOpen}
@@ -69,7 +69,6 @@ class GroupListItem extends React.Component<Props> {
                   overflow={overflow}
                 />
               )}
-              &nbsp;
               {renderActions({
                 openMembersModal: this.handleMembersModalOpen,
               })}

app/components/HelpText.ts

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const HelpText = styled.p<{ small?: boolean }>`
   margin-top: 0;
   color: ${(props) => props.theme.textSecondary};
-  font-size: ${(props) => (props.small ? "13px" : "inherit")};
+  font-size: ${(props) => (props.small ? "14px" : "inherit")};
 `;
 
 export default HelpText;

app/components/Input.tsx

@@ -88,6 +88,7 @@ export const Outline = styled(Flex)<{
   font-weight: normal;
   align-items: center;
   overflow: hidden;
+  background: ${(props) => props.theme.background};
 `;
 
 export const LabelText = styled.div`

app/components/Switch.tsx

@@ -1,20 +1,35 @@
 import * as React from "react";
 import styled from "styled-components";
+import HelpText from "~/components/HelpText";
 import { LabelText } from "~/components/Input";
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLInputElement> & {
   width?: number;
   height?: number;
   label?: string;
+  name?: string;
+  note?: React.ReactNode;
   checked?: boolean;
   disabled?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
   id?: string;
 };
 
-function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
+function Switch({
+  width = 32,
+  height = 18,
+  label,
+  disabled,
+  className,
+  note,
+  ...props
+}: Props) {
   const component = (
-    <Wrapper width={width} height={height}>
+    <Input
+      width={width}
+      height={height}
+      className={label ? undefined : className}
+    >
       <HiddenInput
         type="checkbox"
         width={width}
@@ -23,34 +38,45 @@ function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
         {...props}
       />
       <Slider width={width} height={height} />
-    </Wrapper>
+    </Input>
   );
 
   if (label) {
     return (
-      <Label disabled={disabled} htmlFor={props.id}>
-        {component}
-        <LabelText>{label}</LabelText>
-      </Label>
+      <Wrapper>
+        <Label disabled={disabled} htmlFor={props.id} className={className}>
+          {component}
+          <InlineLabelText>{label}</InlineLabelText>
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
     );
   }
 
   return component;
 }
 
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+`;
+
+const InlineLabelText = styled(LabelText)`
+  padding-bottom: 0;
+`;
+
 const Label = styled.label<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 
-const Wrapper = styled.label<{ width: number; height: number }>`
+const Input = styled.label<{ width: number; height: number }>`
   position: relative;
   display: inline-block;
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
-  margin-bottom: 4px;
   margin-right: 8px;
+  flex-shrink: 0;
 `;
 
 const Slider = styled.span<{ width: number; height: number }>`

app/components/Toggle.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
-import styled from "styled-components";
-import HelpText from "~/components/HelpText";
-
-export type Props = {
-  checked?: boolean;
-  label?: React.ReactNode;
-  labelHidden?: boolean;
-  className?: string;
-  name?: string;
-  disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-  note?: React.ReactNode;
-};
-
-const LabelText = styled.span`
-  font-weight: 500;
-  margin-left: 10px;
-`;
-
-const Wrapper = styled.div`
-  padding-bottom: 8px;
-  width: 100%;
-`;
-
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-  user-select: none;
-`;
-
-const SlideToggle = styled.label`
-  cursor: pointer;
-  text-indent: -9999px;
-  width: 26px;
-  height: 14px;
-  background: ${(props) => props.theme.slate};
-  display: block;
-  border-radius: 10px;
-  position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 10px;
-    height: 10px;
-    background: ${(props) => props.theme.white};
-    border-radius: 5px;
-    transition: width 100ms ease-in-out;
-  }
-
-  &:active:after {
-    width: 12px;
-  }
-`;
-
-const HiddenInput = styled.input`
-  height: 0;
-  width: 0;
-  visibility: hidden;
-
-  &:checked + ${SlideToggle} {
-    background: ${(props) => props.theme.primary};
-  }
-
-  &:checked + ${SlideToggle}:after {
-    left: calc(100% - 2px);
-    transform: translateX(-100%);
-  }
-`;
-
-let inputId = 0;
-
-export default function Toggle({
-  label,
-  labelHidden,
-  note,
-  className,
-  ...rest
-}: Props) {
-  const wrappedLabel = <LabelText>{label}</LabelText>;
-  const [id] = React.useState(`checkbox-input-${inputId++}`);
-
-  return (
-    <>
-      <Wrapper className={className}>
-        <Label>
-          <HiddenInput type="checkbox" id={id} {...rest} />
-          <SlideToggle htmlFor={id} />
-          {label &&
-            (labelHidden ? (
-              <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
-            ) : (
-              wrappedLabel
-            ))}
-        </Label>
-        {note && <HelpText small>{note}</HelpText>}
-      </Wrapper>
-    </>
-  );
-}