From 8e868034489bea9d3a5cde7d6469f4943961b4ea Mon Sep 17 00:00:00 2001 From: Arnaud Date: Wed, 28 Aug 2024 10:04:50 +0200 Subject: [PATCH] Add minor enhancements to components --- src/components/Backdrop/backdrop.css | 2 +- src/components/Card/card.css | 5 +- src/components/Input/Input.tsx | 148 +++++++++++++---------- src/components/Logo/LogoInverse.tsx | 6 +- src/components/Menu/menu.css | 2 +- src/components/SimpleText/simpleText.css | 4 +- src/components/Upload/UploadFile.tsx | 7 +- src/components/Upload/upload.css | 12 +- 8 files changed, 102 insertions(+), 84 deletions(-) diff --git a/src/components/Backdrop/backdrop.css b/src/components/Backdrop/backdrop.css index 8bb1052..54557ed 100644 --- a/src/components/Backdrop/backdrop.css +++ b/src/components/Backdrop/backdrop.css @@ -8,7 +8,7 @@ display: none; backdrop-filter: blur(2px); display: block; - z-index: 1; + z-index: 9; } .document-noOverflow { diff --git a/src/components/Card/card.css b/src/components/Card/card.css index 601e24c..52485f3 100644 --- a/src/components/Card/card.css +++ b/src/components/Card/card.css @@ -2,11 +2,14 @@ border-radius: var(--codex-border-radius); border: 1px solid var(--codex-border-color); font-family: var(--codex-font-family); + background-color: var(--codex-background-secondary); } .card-header { border-bottom: 1px solid var(--codex-border-color); - padding: 0.75rem 1.5rem; + padding: 1rem 1.5rem; + font-size: 1.15rem; + font-weight: bold; } .card-body { diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index a799938..f65774b 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -1,4 +1,10 @@ -import { ChangeEvent, ComponentType, CSSProperties } from "react"; +import { + ChangeEvent, + ComponentType, + CSSProperties, + forwardRef, + KeyboardEvent, +} from "react"; import { attributes } from "../utils/attributes"; import { classnames } from "../utils/classnames"; import "./input.css"; @@ -33,6 +39,8 @@ type Props = { onMouseLeave?: () => void; + onKeyUp?: (e: KeyboardEvent) => void; + placeholder?: string; value?: string; @@ -70,71 +78,79 @@ type Props = { step?: string; }; -export function Input({ - id, - label, - helper, - disabled, - value, - onBlur, - onFocus, - placeholder, - onChange, - onMouseEnter, - onMouseLeave, - onClick, - className, - style, - Icon, - step, - type = "text", -}: Props) { - return ( - <> - {label && ( - - )} +export const Input = forwardRef( + ( + { + id, + label, + helper, + disabled, + value, + onBlur, + onFocus, + placeholder, + onChange, + onMouseEnter, + onMouseLeave, + onClick, + onKeyUp, + className, + style, + Icon, + step, + type = "text", + }, + ref + ) => { + return ( + <> + {label && ( + + )} -
- {Icon && ( -
- +
+ {Icon && ( +
+ +
+ )} + +
+ + {helper && ( +
+ + {helper} +
)} - -
- - {helper && ( -
- - {helper} - -
- )} - - ); -} + + ); + } +); diff --git a/src/components/Logo/LogoInverse.tsx b/src/components/Logo/LogoInverse.tsx index f6cd391..476800b 100644 --- a/src/components/Logo/LogoInverse.tsx +++ b/src/components/Logo/LogoInverse.tsx @@ -10,10 +10,10 @@ export function LogoInverse({ width = 40 }: Props) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css index e29517f..b650f9f 100644 --- a/src/components/Menu/menu.css +++ b/src/components/Menu/menu.css @@ -7,7 +7,7 @@ transition: transform 0.25s; position: fixed; min-width: 200px; - z-index: 1; + z-index: 10; view-transition-name: main-menu; height: 100%; top: 0; diff --git a/src/components/SimpleText/simpleText.css b/src/components/SimpleText/simpleText.css index fbb6201..9231a94 100644 --- a/src/components/SimpleText/simpleText.css +++ b/src/components/SimpleText/simpleText.css @@ -15,11 +15,11 @@ } .text--error { - color: var(--codex-color-error); + color: rgb(var(--codex-color-error)); } .text--warning { - color: var(--codex-color-warning); + color: rgb(var(--codex-color-warning)); } .text--bold { diff --git a/src/components/Upload/UploadFile.tsx b/src/components/Upload/UploadFile.tsx index f25015e..e24aeda 100644 --- a/src/components/Upload/UploadFile.tsx +++ b/src/components/Upload/UploadFile.tsx @@ -28,7 +28,7 @@ type UploadFileProps = { file: File; onClose: (id: string) => void; id: string; - onSuccess: ((cid: string) => void) | undefined; + onSuccess: ((cid: string, file: File) => void) | undefined; provider: () => Promise; // useWorker: boolean; }; @@ -147,7 +147,6 @@ export function UploadFile({ return provider() .then((upload) => upload(file, onProgress)) .then((res) => { - console.info("abort", res.abort); abort.current = res.abort; return res.result; }) @@ -177,13 +176,13 @@ export function UploadFile({ }); if (onSuccess) { - onSuccess(cid); + onSuccess(cid, file); dispatch({ type: "reset" }); } else { dispatch({ type: "completed", cid }); } }, - [onSuccess, dispatch, queryClient] + [onSuccess, dispatch, queryClient, file] ); const onProgress = (loaded: number, total: number) => { diff --git a/src/components/Upload/upload.css b/src/components/Upload/upload.css index 0bb0716..22bfc81 100644 --- a/src/components/Upload/upload.css +++ b/src/components/Upload/upload.css @@ -24,7 +24,7 @@ ); border-radius: var(--codex-border-radius); border: 1px solid var(--codex-border-color); - padding: 0.5rem 2rem; + padding: 1em 2rem; margin-top: 0.5rem; } @@ -80,7 +80,7 @@ } .uploadFile-progressBar[aria-invalid]::-webkit-progress-value { - background-color: var(--codex-color-error); + background-color: rgb(var(--codex-color-error)); } .uploadFile-progressBar[aria-invalid]::-moz-progress-bar { @@ -89,7 +89,7 @@ } .uploadFile-progressBar[value]::-moz-progress-bar { - background-color: var(--codex-color-error); + background-color: rgb(var(--codex-color-error)); } .uploadFile-filename { @@ -111,7 +111,7 @@ } .upload-progress-cancelled { - color: var(--codex-color-error); + color: rgb(var(--codex-color-error)); } .uploadFile-preview { @@ -142,7 +142,7 @@ } .uploadFile-name[aria-invalid] { - color: var(--codex-color-error); + color: rgb(var(--codex-color-error)); } .uploadFile-name[data-done] { @@ -173,7 +173,7 @@ } .upload-warning { - border-color: var(--codex-color-warning); + border-color: rgb(var(--codex-color-warning)); } .upload-text {