From 9ead8efee654b32e607897b3ee51fd27d28f4873 Mon Sep 17 00:00:00 2001
From: Anton SHEPILOV <ashepilov@linagora.com>
Date: Tue, 7 May 2024 15:16:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84Remove=20on-focus=20border=20for=20?=
 =?UTF-8?q?the=20select=20and=20radiobutton=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/atoms/input/input-checkbox-slider.tsx | 30 ++++++++++++-------
 .../src/app/atoms/input/input-select.tsx      |  8 ++++-
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx b/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx
index 8a18fd13..dc658dc7 100644
--- a/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx
+++ b/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx
@@ -1,17 +1,27 @@
+import { isUndefined } from "lodash";
+
 interface CheckboxSliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
   checked?: boolean;
   disabled?: boolean;
+  noFocusBorder?: boolean;
 }
 /** Just classes up a checkbox to look like a slider. Deviates from onChange etc for
  * compatibility with `InputHTMLAttributes<HTMLInputElement>`, to expose eg. id to use with htmlFor.
  */
-export const CheckboxSlider = (props: CheckboxSliderProps) =>
-  <input
-    {...props}
-    type="checkbox"
-    role="switch"
-    // @author https://tw-elements.com/docs/react/forms/switch/
-    className="!bg-none mr-2 mt-[0.3rem] h-7 w-14 appearance-none rounded-[0.9rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-7 before:w-5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:mt-[0.2rem] after:ml-[0.2rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:ml-[1.9625rem] checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-neutral-600 dark:after:bg-white dark:checked:bg-primary dark:checked:after:bg-primary disabled:cursor-default disabled:opacity-25 !focus:shadow-none"
-    checked={!!props.checked}
-    disabled={props.disabled}
-    />;
+export const CheckboxSlider = (props: CheckboxSliderProps) => {
+  let styles = {};
+  const noFocus = isUndefined(props.noFocusBorder) ? true : props.noFocusBorder;
+  if (noFocus) styles = {boxShadow: "none", borderColor: "inherit"};
+
+  return (
+    <input
+      {...props}
+      type="checkbox"
+      role="switch"
+      style={styles}
+      // @author https://tw-elements.com/docs/react/forms/switch/
+      className="!bg-none mr-2 mt-[0.3rem] h-7 w-14 appearance-none rounded-[0.9rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-7 before:w-5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:mt-[0.2rem] after:ml-[0.2rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:ml-[1.9625rem] checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-neutral-600 dark:after:bg-white dark:checked:bg-primary dark:checked:after:bg-primary disabled:cursor-default disabled:opacity-25 !focus:shadow-none"
+      checked={!!props.checked}
+      disabled={props.disabled}
+    />)
+}
diff --git a/tdrive/frontend/src/app/atoms/input/input-select.tsx b/tdrive/frontend/src/app/atoms/input/input-select.tsx
index 0557c50a..f9573e74 100644
--- a/tdrive/frontend/src/app/atoms/input/input-select.tsx
+++ b/tdrive/frontend/src/app/atoms/input/input-select.tsx
@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import _, { isUndefined } from "lodash";
 import { defaultInputClassName, errorInputClassName, ThemeName } from './input-text';
 
 export type SelectSize = 'md' | 'lg' | 'sm';
@@ -9,6 +9,7 @@ interface InputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>,
   size?: SelectSize;
   className?: string;
   children?: React.ReactNode;
+  noFocusBorder?: boolean;
 }
 
 export function Select(props: InputProps) {
@@ -21,8 +22,13 @@ export function Select(props: InputProps) {
   else if (props.size === 'sm') inputClassName = inputClassName + ' text-sm h-7 py-0 px-3';
   else inputClassName = inputClassName + ' text-base h-9 py-1';
 
+  let styles = {};
+  const noFocus = isUndefined(props.noFocusBorder) ? true : props.noFocusBorder;
+  if (noFocus) styles = {boxShadow: "none", borderColor: "inherit"};
+
   return (
     <select
+      style={styles}
       className={inputClassName + ' ' + props.className}
       {..._.omit(props, 'label', 'className', 'size')}
     >