From 5561eecc64ed1405997e9766987ec9cbe10462f6 Mon Sep 17 00:00:00 2001 From: VampireChicken12 Date: Fri, 5 Jan 2024 20:25:41 -0500 Subject: [PATCH 01/49] refactor: center input arrows --- src/components/Inputs/Number/Arrow.tsx | 4 ++-- src/components/Inputs/Number/Number.css | 11 ++++++++--- src/components/Inputs/Number/Number.tsx | 24 +++++++++--------------- src/components/Inputs/Select/Select.tsx | 2 +- 4 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/Inputs/Number/Arrow.tsx b/src/components/Inputs/Number/Arrow.tsx index 9b0a84f6..f8e3a470 100644 --- a/src/components/Inputs/Number/Arrow.tsx +++ b/src/components/Inputs/Number/Arrow.tsx @@ -4,7 +4,7 @@ type RotationDirection = "down" | "left" | "right" | "up"; export default function Arrow({ rotation }: { rotation: RotationDirection }) { return ( - + ); } diff --git a/src/components/Inputs/Number/Number.css b/src/components/Inputs/Number/Number.css index 46de0261..af4b3463 100644 --- a/src/components/Inputs/Number/Number.css +++ b/src/components/Inputs/Number/Number.css @@ -1,5 +1,10 @@ -.number::-webkit-inner-spin-button, -.number::-webkit-outer-spin-button { +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { -webkit-appearance: none; - appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; } diff --git a/src/components/Inputs/Number/Number.tsx b/src/components/Inputs/Number/Number.tsx index bfab3f4e..202bfc0a 100644 --- a/src/components/Inputs/Number/Number.tsx +++ b/src/components/Inputs/Number/Number.tsx @@ -53,6 +53,8 @@ const NumberInput: React.FC = ({ className, disabled, id, labe "hover:bg-transparent": disabled, "text-[#4b5563]": disabled } satisfies ClassValue; + const buttonClasses = + "flex h-1/2 w-full cursor-default justify-center p-1 items-center text-black hover:bg-[rgba(24,26,27,0.5)] dark:bg-[#23272a] dark:text-white" satisfies ClassValue; return (