Use a toggle on mobile transaction's Cleared flag (#3622)

* Use a toggle on mobile transaction's Cleared flag

* Release notes

* Cleanup

* VRT

* Cleanup

* Remove glamor import

* Update light theme toggle color

packages/desktop-client/src/components/common/Menu.tsx

@@ -207,15 +207,20 @@ export function Menu<const NameType = string>({
                 <View style={{ flex: 1 }} />
               </>
             ) : (
-              <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  flex: 1,
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
                 <label htmlFor={String(item.name)} title={item.tooltip}>
                   {item.text}
                 </label>
-                <View style={{ flex: 1 }} />
                 <Toggle
                   id={String(item.name)}
-                  checked={item.toggle}
-                  onColor={theme.pageTextPositive}
+                  isOn={item.toggle}
                   style={{ marginLeft: 5 }}
                   onToggle={() =>
                     !item.disabled &&
@@ -224,7 +229,7 @@ export function Menu<const NameType = string>({
                     onMenuSelect?.(item.name)
                   }
                 />
-              </>
+              </View>
             )}
             {item.key && <Keybinding keyName={item.key} />}
           </View>

packages/desktop-client/src/components/common/Toggle.tsx

@@ -2,29 +2,34 @@ import React from 'react';
 
 import { css } from 'glamor';
 
-import { theme, type CSSProperties } from '../../style';
+import { type CSSProperties, theme } from '../../style';
+
+import { View } from './View';
 
 type ToggleProps = {
   id: string;
-  checked: boolean;
-  onToggle?: () => void;
-  onColor?: string;
+  isOn: boolean;
+  isDisabled?: boolean;
+  onToggle?: (isOn: boolean) => void;
+  className?: string;
   style?: CSSProperties;
 };
 
 export const Toggle = ({
   id,
-  checked,
+  isOn,
+  isDisabled = false,
   onToggle,
-  onColor,
+  className,
   style,
 }: ToggleProps) => {
   return (
-    <div style={{ marginTop: -20, ...style }}>
+    <View style={style} className={className}>
       <input
         id={id}
-        checked={checked}
-        onChange={onToggle}
+        checked={isOn}
+        disabled={isDisabled}
+        onChange={e => onToggle?.(e.target.checked)}
         className={`${css({
           height: 0,
           width: 0,
@@ -33,43 +38,53 @@ export const Toggle = ({
         type="checkbox"
       />
       <label
-        style={{
-          background: checked ? onColor : theme.checkboxToggleBackground,
-        }}
-        className={`${css({
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          cursor: 'pointer',
-          width: '32px',
-          height: '16px',
-          borderRadius: '100px',
-          position: 'relative',
-          transition: 'background-color .2s',
-        })}`}
+        data-toggle-container
+        data-on={isOn}
+        className={String(
+          css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            width: '32px',
+            height: '16px',
+            borderRadius: '100px',
+            position: 'relative',
+            transition: 'background-color .2s',
+            backgroundColor: isOn
+              ? theme.checkboxToggleBackgroundSelected
+              : theme.checkboxToggleBackground,
+          }),
+        )}
         htmlFor={id}
       >
         <span
-          className={`${css(
-            {
-              content: '',
-              position: 'absolute',
-              top: '2px',
-              left: '2px',
-              width: '12px',
-              height: '12px',
-              borderRadius: '100px',
-              transition: '0.2s',
-              background: '#fff',
-              boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
-            },
-            checked && {
-              left: 'calc(100% - 2px)',
-              transform: 'translateX(-100%)',
-            },
-          )}`}
+          data-toggle
+          data-on={isOn}
+          className={String(
+            css(
+              {
+                content: ' ',
+                position: 'absolute',
+                top: '2px',
+                left: '2px',
+                width: '12px',
+                height: '12px',
+                borderRadius: '100px',
+                transition: '0.2s',
+                boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+                backgroundColor: isDisabled
+                  ? theme.checkboxToggleDisabled
+                  : '#fff',
+              },
+              isOn && {
+                left: 'calc(100% - 2px)',
+                transform: 'translateX(-100%)',
+              },
+            ),
+          )}
         />
       </label>
-    </div>
+    </View>
   );
 };

packages/desktop-client/src/components/mobile/MobileForms.tsx

@@ -1,4 +1,5 @@
 import React, {
+  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
   forwardRef,
   type ReactNode,
@@ -10,6 +11,7 @@ import { theme, styles, type CSSProperties } from '../../style';
 import { Button } from '../common/Button';
 import { Input } from '../common/Input';
 import { Text } from '../common/Text';
+import { Toggle } from '../common/Toggle';
 import { View } from '../common/View';
 
 type FieldLabelProps = {
@@ -131,55 +133,38 @@ export const TapField = forwardRef<HTMLButtonElement, TapFieldProps>(
 
 TapField.displayName = 'TapField';
 
-type BooleanFieldProps = {
-  checked: boolean;
-  disabled?: boolean;
-  onUpdate?: (checked: boolean) => void;
-  style?: CSSProperties;
-};
+type ToggleFieldProps = ComponentPropsWithoutRef<typeof Toggle>;
 
-export function BooleanField({
-  checked,
-  onUpdate,
+export function ToggleField({
+  id,
+  isOn,
+  onToggle,
   style,
-  disabled = false,
-}: BooleanFieldProps) {
+  className,
+  isDisabled = false,
+}: ToggleFieldProps) {
   return (
-    <input
-      disabled={disabled ? true : undefined}
-      type="checkbox"
-      checked={checked}
-      onChange={e => onUpdate?.(e.target.checked)}
-      className={`${css([
-        {
-          marginInline: styles.mobileEditingPadding,
-          flexShrink: 0,
-          appearance: 'none',
-          outline: 0,
-          border: '1px solid ' + theme.formInputBorder,
-          borderRadius: 4,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: theme.checkboxText,
-          backgroundColor: theme.tableBackground,
-          ':checked': {
-            border: '1px solid ' + theme.checkboxBorderSelected,
-            backgroundColor: theme.checkboxBackgroundSelected,
-            '::after': {
-              display: 'block',
-              background:
-                theme.checkboxBackgroundSelected +
-                // eslint-disable-next-line rulesdir/typography
-                ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 15px 15px',
-              width: 15,
-              height: 15,
-              content: ' ',
+    <Toggle
+      id={id}
+      isOn={isOn}
+      isDisabled={isDisabled}
+      onToggle={onToggle}
+      style={style}
+      className={String(
+        css([
+          {
+            '& [data-toggle-container]': {
+              width: 50,
+              height: 24,
+            },
+            '& [data-toggle]': {
+              width: 20,
+              height: 20,
             },
           },
-        },
-        style,
-      ])}`}
+          className,
+        ]),
+      )}
     />
   );
 }