Fix mobile UI bugs in setup (#19509)

frontend/src/metabase/admin/databases/components/widgets/EngineWidget/EngineWidget.styled.jsx

 import styled from "styled-components";
 import { color, lighten } from "metabase/lib/colors";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
 import Icon from "metabase/components/Icon";
 import IconButtonWrapper from "metabase/components/IconButtonWrapper";
 import Button from "metabase/components/Button";
@@ -10,9 +11,13 @@ export const EngineSearchRoot = styled.div`
 
 export const EngineListRoot = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 1fr;
   gap: 1.5rem;
   margin: 1.5rem 0;
+
+  ${breakpointMinSmall} {
+    grid-template-columns: repeat(3, 1fr);
+  }
 `;
 
 export const EngineCardRoot = styled(IconButtonWrapper)`

frontend/src/metabase/components/Toggle.css

-:local(.toggle) {
-  position: relative;
-  display: inline-block;
-  color: var(--color-brand);
-  box-sizing: border-box;
-  width: 48px;
-  height: 24px;
-  border-radius: 99px;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-bg-medium);
-  transition: all 0.3s;
-}
-
-:local(.toggle.selected) {
-  background-color: currentColor;
-}
-
-:local(.toggle):after {
-  content: "";
-  width: 20px;
-  height: 20px;
-  border-radius: 99px;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  background-color: white;
-  transition: all 0.3s;
-  box-shadow: 2px 2px 6px var(--color-shadow);
-}
-
-:local(.toggle.selected):after {
-  left: 25px;
-
-  background-color: white;
-}
-
-:local(.toggle.small) {
-  width: 28px;
-  height: 17px;
-}
-
-:local(.toggle.small):after {
-  width: 13px;
-  height: 13px;
-}
-
-:local(.toggle.small.selected):after {
-  left: 12px;
-}

frontend/src/metabase/components/Toggle.jsx

-/* eslint-disable react/prop-types */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import styles from "./Toggle.css";
-
-import cx from "classnames";
-
-export default class Toggle extends Component {
-  static propTypes = {
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func,
-    small: PropTypes.bool,
-  };
-
-  handleClick = () => {
-    if (this.props.onChange) {
-      this.props.onChange(!this.props.value);
-    }
-  };
-
-  render() {
-    const { value, small, className, color, onChange, ...props } = this.props;
-    return (
-      <a
-        {...props}
-        role="checkbox"
-        aria-checked={value}
-        className={cx(
-          styles.toggle,
-          "no-decoration",
-          {
-            [styles.selected]: value,
-            [styles.small]: small,
-          },
-          className,
-        )}
-        style={{ color: color || null }}
-        onClick={onChange ? this.handleClick : null}
-      />
-    );
-  }
-}

frontend/src/metabase/components/Toggle/Toggle.styled.tsx

+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+
+export interface ToggleRootProps {
+  isSmall?: boolean;
+  isSelected?: boolean;
+  currentColor?: string;
+}
+
+const getLeft = ({ isSmall, isSelected }: ToggleRootProps): string => {
+  if (!isSelected) {
+    return "1px";
+  } else if (!isSmall) {
+    return "25px";
+  } else {
+    return "12px";
+  }
+};
+
+const getBackgroundColor = ({
+  isSelected,
+  currentColor,
+}: ToggleRootProps): string => {
+  if (isSelected) {
+    return currentColor ?? color("brand");
+  } else {
+    return color("white");
+  }
+};
+
+export const ToggleRoot = styled.a<ToggleRootProps>`
+  position: relative;
+  display: inline-block;
+  color: ${props => props.currentColor ?? color("brand")};
+  box-sizing: border-box;
+  width: ${props => (props.isSmall ? "28px" : "48px")};
+  height: ${props => (props.isSmall ? "17px" : "24px")};
+  border-radius: 99px;
+  border: 1px solid ${color("border")};
+  background-color: ${color("bg-medium")};
+  background-color: ${getBackgroundColor};
+  transition: all 0.3s;
+  text-decoration: none;
+
+  &:after {
+    content: "";
+    width: ${props => (props.isSmall ? "13px" : "20px")};
+    height: ${props => (props.isSmall ? "13px" : "20px")};
+    border-radius: 99px;
+    position: absolute;
+    top: 1px;
+    left: ${getLeft};
+    background-color: ${color("white")};
+    transition: all 0.3s;
+    box-shadow: 2px 2px 6px ${color("shadow")};
+  }
+`;

frontend/src/metabase/components/Toggle/Toggle.tsx

+import React, { AnchorHTMLAttributes } from "react";
+import { ToggleRoot } from "metabase/components/Toggle/Toggle.styled";
+
+export interface ToggleProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onChange"> {
+  className?: string;
+  value: boolean;
+  small?: boolean;
+  color?: string;
+  onChange?: (value: boolean) => void;
+}
+
+const Toggle = ({
+  className,
+  value,
+  small,
+  color,
+  onChange,
+  ...rest
+}: ToggleProps): JSX.Element => {
+  const handleClick = () => {
+    onChange && onChange(!value);
+  };
+
+  return (
+    <ToggleRoot
+      {...rest}
+      className={className}
+      role="checkbox"
+      aria-checked={value}
+      isSmall={small}
+      isSelected={value}
+      currentColor={color}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default Toggle;

frontend/src/metabase/components/Toggle/index.ts

+export { default } from "./Toggle";

frontend/src/metabase/setup/components/ActiveStep/ActiveStep.styled.tsx

 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
 
 export const StepRoot = styled.section`
   position: relative;
-  padding: 4rem;
+  padding: 2rem;
   margin-bottom: 1.75rem;
   border: 1px solid ${color("border")};
   border-radius: 0.5rem;
   background-color: ${color("white")};
+
+  ${breakpointMinSmall} {
+    padding: 4rem;
+  }
 `;
 
 export const StepTitle = styled.div`

frontend/src/metabase/setup/components/PreferencesStep/PreferencesStep.styled.tsx

 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
+import Toggle from "metabase/components/Toggle";
 
 export const StepDescription = styled.div`
   margin: 0.875rem 0 1.25rem;
   color: ${color("text-medium")};
 `;
 
-export const StepToggle = styled.div`
+export const StepToggleContainer = styled.div`
   display: flex;
   align-items: center;
   margin: 0 2rem 1.25rem 0;
@@ -15,6 +16,10 @@ export const StepToggle = styled.div`
   border-radius: 0.5rem;
 `;
 
+export const StepToggle = styled(Toggle)`
+  flex: 0 0 auto;
+`;
+
 export const StepToggleLabel = styled.div`
   color: ${color("text-medium")};
   margin-left: 0.5rem;

frontend/src/metabase/setup/components/PreferencesStep/PreferencesStep.tsx

@@ -4,15 +4,15 @@ import { getIn } from "icepick";
 import Settings from "metabase/lib/settings";
 import ActionButton from "metabase/components/ActionButton";
 import ExternalLink from "metabase/components/ExternalLink";
-import Toggle from "metabase/components/Toggle";
 import ActiveStep from "../ActiveStep";
 import InactiveStep from "../InvactiveStep";
 import {
   StepDescription,
-  StepToggle,
+  StepToggleContainer,
   StepToggleLabel,
   StepInfoList,
   StepError,
+  StepToggle,
 } from "./PreferencesStep.styled";
 
 export interface PreferencesStepProps {
@@ -68,8 +68,8 @@ const PreferencesStep = ({
           href={Settings.docsUrl("information-collection")}
         >{t`Here's a full list of what we track and why.`}</ExternalLink>
       </StepDescription>
-      <StepToggle>
-        <Toggle
+      <StepToggleContainer>
+        <StepToggle
           value={isTrackingAllowed}
           onChange={onTrackingChange}
           aria-labelledby="anonymous-usage-events-label"
@@ -77,7 +77,7 @@ const PreferencesStep = ({
         <StepToggleLabel id="anonymous-usage-events-label">
           {t`Allow Metabase to anonymously collect usage events`}
         </StepToggleLabel>
-      </StepToggle>
+      </StepToggleContainer>
       {isTrackingAllowed && (
         <StepInfoList>
           <li>{jt`Metabase ${(

frontend/src/metabase/setup/components/UserStep/UserStep.styled.tsx

 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
 import User from "metabase/entities/users";
 
 export const StepDescription = styled.div`
@@ -12,7 +13,9 @@ export const UserFormRoot = styled(User.Form)`
 `;
 
 export const UserFormGroup = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
+  ${breakpointMinSmall} {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
 `;