From a02cd2604484f23eb663a41a2380edbe38b50eca Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 8 Sep 2025 21:45:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20replace=20switch=20tex?=
 =?UTF-8?q?t=20with=20icons=20for=20font-size=20independence?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace text elements in switch components with proper icons to eliminate
dependency on font size variations and ensure consistent visual
appearance.

Improves component reliability across different font scaling scenarios
and provides clearer visual indicators that remain legible regardless of
user font preferences or system scaling settings.
---
 src/frontend/src/primitives/Switch.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/primitives/Switch.tsx b/src/frontend/src/primitives/Switch.tsx
index 2f55b182..43b18b26 100644
--- a/src/frontend/src/primitives/Switch.tsx
+++ b/src/frontend/src/primitives/Switch.tsx
@@ -4,6 +4,7 @@ import {
 } from 'react-aria-components'
 import { styled } from '@/styled-system/jsx'
 import { StyledVariantProps } from '@/styled-system/types'
+import { RiCheckLine, RiCloseFill } from '@remixicon/react'
 
 export const StyledSwitch = styled(RACSwitch, {
   base: {
@@ -37,7 +38,7 @@ export const StyledSwitch = styled(RACSwitch, {
       position: 'absolute',
       display: 'block',
       top: '50%',
-      right: '0.25rem',
+      right: '0.1rem',
       transform: 'translateY(-50%)',
       color: 'primary.800',
       fontSize: '0.75rem',
@@ -50,7 +51,7 @@ export const StyledSwitch = styled(RACSwitch, {
       position: 'absolute',
       display: 'block',
       top: '50%',
-      left: '0.375rem',
+      left: '0.13rem',
       transform: 'translateY(-50%)',
       color: 'white',
       fontSize: '0.70rem',
@@ -110,10 +111,10 @@ export const Switch = ({ children, ...props }: SwitchProps) => (
       <>
         <div className="indicator">
           <span className="checkmark" aria-hidden="true">
-            ✓
+            <RiCheckLine size={16} />
           </span>
           <span className="cross" aria-hidden="true">
-            ✕
+            <RiCloseFill size={16} />
           </span>
         </div>
         {typeof children === 'function' ? children(renderProps) : children}