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 { checked?: boolean; disabled?: boolean; + noFocusBorder?: boolean; } /** Just classes up a checkbox to look like a slider. Deviates from onChange etc for * compatibility with `InputHTMLAttributes`, to expose eg. id to use with htmlFor. */ -export const CheckboxSlider = (props: CheckboxSliderProps) => - ; +export const CheckboxSlider = (props: CheckboxSliderProps) => { + let styles = {}; + const noFocus = isUndefined(props.noFocusBorder) ? true : props.noFocusBorder; + if (noFocus) styles = {boxShadow: "none", borderColor: "inherit"}; + + return ( + ) +} 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, 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 (