From 058a2c69a34d6e5362ac3e523c716fa3d490ca86 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 16 May 2023 18:29:56 +0530
Subject: [PATCH] chore: fix switch on clipper

---
 .../Components/ClipperView/ClipperView.tsx        |  1 +
 .../Components/Menu/MenuSwitchButtonItem.tsx      | 15 ++++++++++++++-
 .../src/javascripts/Components/Switch/Switch.tsx  | 14 +++++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx b/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
index 9489d3d44..2e9fdc7cb 100644
--- a/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
+++ b/packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx
@@ -374,6 +374,7 @@ const ClipperView = ({
             setIsScreenshotMode(checked)
           }}
           className="flex-row-reverse gap-2"
+          forceDesktopStyle={true}
         >
           Clip as screenshot
         </MenuSwitchButtonItem>
diff --git a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
index 4d8367893..5edceb503 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
@@ -11,11 +11,23 @@ type Props = {
   children: ReactNode
   onChange: (checked: boolean) => void
   shortcut?: PlatformedKeyboardShortcut
+  forceDesktopStyle?: boolean
 } & Omit<ComponentPropsWithoutRef<'button'>, 'onChange'>
 
 const MenuSwitchButtonItem = forwardRef(
   (
-    { checked, onChange, disabled, onBlur, tabIndex, children, shortcut, className, ...props }: Props,
+    {
+      checked,
+      onChange,
+      disabled,
+      onBlur,
+      tabIndex,
+      children,
+      shortcut,
+      className,
+      forceDesktopStyle,
+      ...props
+    }: Props,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     return (
@@ -47,6 +59,7 @@ const MenuSwitchButtonItem = forwardRef(
               checked={checked}
               onChange={onChange}
               tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+              forceDesktopStyle={forceDesktopStyle}
             />
           </div>
         </button>
diff --git a/packages/web/src/javascripts/Components/Switch/Switch.tsx b/packages/web/src/javascripts/Components/Switch/Switch.tsx
index 73760a12c..51c1f8080 100644
--- a/packages/web/src/javascripts/Components/Switch/Switch.tsx
+++ b/packages/web/src/javascripts/Components/Switch/Switch.tsx
@@ -7,22 +7,25 @@ const Switch = ({
   className,
   disabled = false,
   tabIndex,
+  forceDesktopStyle,
 }: {
   checked: boolean
   onChange: (checked: boolean) => void
   className?: string
   disabled?: boolean
   tabIndex?: number
+  forceDesktopStyle?: boolean
 }) => {
   const isActive = checked && !disabled
 
   return (
     <label
       className={classNames(
-        'relative box-content inline-block h-8 w-13 flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out md:h-4.5 md:w-8',
+        'relative box-content inline-block flex-shrink-0 cursor-pointer rounded-full border-2 border-solid border-transparent bg-clip-padding transition-colors duration-150 ease-out',
         'ring-2 ring-transparent focus-within:border-default focus-within:shadow-none focus-within:outline-none focus-within:ring-info',
         disabled ? 'opacity-50' : '',
         isActive ? 'bg-info' : 'bg-neutral',
+        forceDesktopStyle ? 'h-4.5 w-8' : 'h-8 w-13 md:h-4.5 md:w-8',
         className,
       )}
     >
@@ -37,8 +40,13 @@ const Switch = ({
       </VisuallyHidden>
       <div
         className={classNames(
-          'absolute left-[0.275rem] top-1/2 block h-6 w-6 -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out md:left-[2px] md:h-3.5 md:w-3.5',
-          checked ? 'translate-x-[calc(3.25rem-1.5rem-0.5rem)] md:translate-x-[calc(2rem-1.125rem)]' : '',
+          'absolute left-[0.275rem] top-1/2 block -translate-y-1/2 rounded-full bg-default transition-transform duration-150 ease-out',
+          forceDesktopStyle ? 'left-[2px] h-3.5 w-3.5' : 'h-6 w-6 md:left-[2px] md:h-3.5 md:w-3.5',
+          checked
+            ? forceDesktopStyle
+              ? 'translate-x-[calc(2rem-1.125rem)]'
+              : 'translate-x-[calc(3.25rem-1.5rem-0.5rem)] md:translate-x-[calc(2rem-1.125rem)]'
+            : '',
         )}
       />
     </label>