codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add minor enhancements to components

This commit is contained in:
Arnaud 2024-08-28 10:04:50 +02:00
parent 7fe700c182
commit 8e86803448
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
8 changed files with 102 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Backdrop/backdrop.css
View File

@ -8,7 +8,7 @@
display: none;
backdrop-filter: blur(2px);
display: block;
z-index: 1;
z-index: 9;
}
.document-noOverflow {

5
src/components/Card/card.css
View File

@ -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 {

148
src/components/Input/Input.tsx
View File

@ -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<HTMLInputElement>) => 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 && (
<label className="input-label" htmlFor={id}>
{label}
</label>
)}
export const Input = forwardRef<HTMLInputElement, Props>(
(
{
id,
label,
helper,
disabled,
value,
onBlur,
onFocus,
placeholder,
onChange,
onMouseEnter,
onMouseLeave,
onClick,
onKeyUp,
className,
style,
Icon,
step,
type = "text",
},
ref
) => {
return (
<>
{label && (
<label className="input-label" htmlFor={id}>
{label}
</label>
)}
<div className={classnames(["input-icon", !!Icon])}>
{Icon && (
<div className="input-iconElement">
<Icon />
<div className={classnames(["input-icon", !!Icon])}>
{Icon && (
<div className="input-iconElement">
<Icon />
</div>
)}
<input
ref={ref}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={classnames(
["input"],
["input-icon-input", !!Icon],
[className || ""]
)}
id={id}
style={style}
{...attributes({
disabled,
"aria-disabled": disabled,
})}
value={value}
placeholder={placeholder}
onBlur={onBlur}
onFocus={onFocus}
onChange={onChange}
onKeyUp={onKeyUp}
type={type}
step={step}
/>
</div>
{helper && (
<div>
<SimpleText className="input-helper-text" variant="light">
{helper}
</SimpleText>
</div>
)}
<input
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={classnames(
["input"],
["input-icon-input", !!Icon],
[className || ""]
)}
id={id}
style={style}
{...attributes({
disabled,
"aria-disabled": disabled,
})}
value={value}
placeholder={placeholder}
onBlur={onBlur}
onFocus={onFocus}
onChange={onChange}
type={type}
step={step}
/>
</div>
{helper && (
<div>
<SimpleText className="input-helper-text" variant="light">
{helper}
</SimpleText>
</div>
)}
</>
);
}
</>
);
}
);

6
src/components/Logo/LogoInverse.tsx
View File

@ -10,10 +10,10 @@ export function LogoInverse({ width = 40 }: Props) {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_274_4287)">
<g clipPath="url(#clip0_274_4287)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M19.7001 32.7386C19.7705 32.7792 19.8502 32.8001 19.9306 32.8001C20.0111 32.8001 20.188 32.7225 20.188 32.7225L30.85 26.581C30.8555 26.5783 30.8632 26.5744 30.8706 26.5701C30.942 26.5295 31.0002 26.4707 31.0406 26.4008C31.0819 26.3302 31.1036 26.25 31.1036 26.1685C31.1036 26.1588 31.1032 26.1499 31.1028 26.1432V13.8597C31.1036 13.8486 31.1036 13.8387 31.1036 13.8337L31.1036 13.8324C31.1036 13.7507 31.0818 13.671 31.0413 13.6009C31.0008 13.5302 30.9421 13.4718 30.872 13.4313C30.8644 13.4268 30.8564 13.4225 30.8484 13.4186L20.1868 7.27756C20.179 7.27228 20.1714 7.26767 20.165 7.26389L20.1644 7.26354C20.0937 7.22255 20.0136 7.20151 19.9325 7.20151H19.9306C19.8495 7.20151 19.77 7.22295 19.701 7.26233C19.692 7.26733 19.6837 7.27257 19.6762 7.27763L9.01204 13.4202C9.00655 13.4229 8.99886 13.4269 8.99144 13.4311C8.92049 13.4717 8.86173 13.531 8.82123 13.6011C8.78067 13.6712 8.75879 13.7509 8.75879 13.8327C8.75879 13.8425 8.75919 13.8513 8.75956 13.858V26.1419C8.75876 26.153 8.75878 26.1629 8.75879 26.1679L8.75879 26.1692C8.75879 26.2508 8.78058 26.3312 8.82193 26.4018C8.86238 26.4712 8.92065 26.5296 8.98909 26.5693L8.99047 26.5701L8.99187 26.5708C9.00023 26.5754 9.00781 26.5793 9.01357 26.5822L19.6768 32.7241C19.6818 32.7275 19.6906 32.7332 19.7001 32.7386ZM30.8023 26.4503C30.7969 26.4533 30.7908 26.4564 30.7847 26.4594C30.788 26.4578 30.7915 26.4561 30.7946 26.4544C30.7973 26.4531 30.7999 26.4517 30.8023 26.4503ZM30.9649 26.1472C30.9651 26.1495 30.9652 26.152 30.9653 26.1545C30.9655 26.1589 30.9657 26.1636 30.9657 26.1685C30.9657 26.167 30.9657 26.1655 30.9656 26.164C30.9655 26.158 30.9652 26.1523 30.9649 26.1472ZM20.3983 26.9771L24.3592 29.2549L20.3951 31.538L20.3983 26.9771ZM15.5034 29.2548L19.4645 26.9769L19.4676 31.538L15.5034 29.2548ZM25.7528 23.8924L29.7137 26.1701L25.7497 28.4532L25.7528 23.8924ZM20.3984 25.3628V20.8084L24.3514 23.0856L20.3984 25.3628ZM15.0439 22.2784V17.724L18.9969 20.0012L15.0439 22.2784ZM20.3984 19.1932V14.6388L24.3514 16.916L20.3984 19.1932ZM19.4649 13.0247L15.5038 10.7468L19.468 8.4636L19.4649 13.0247ZM10.1491 26.1701L14.1131 28.4532L14.11 23.8921L10.1491 26.1701ZM24.8194 23.8927L24.8225 28.4527L20.8658 26.1705L24.8194 23.8927ZM15.0438 23.8927L15.0406 28.4527L18.9974 26.1705L15.0438 23.8927ZM26.2198 23.0856L30.178 20.8025V25.3687L26.2198 23.0856ZM9.68483 20.8025V25.3687L13.643 23.0856L9.68483 20.8025ZM15.5111 23.085L19.4644 25.3624V20.8076L15.5111 23.085ZM29.7125 20.0004L25.7529 17.7227V22.2781L29.7125 20.0004ZM10.1503 20.0008L14.1099 22.2785V17.7231L10.1503 20.0008ZM24.8189 17.7232V22.278L20.8656 20.0006L24.8189 17.7232ZM30.178 14.6329V19.1991L26.2198 16.916L30.178 14.6329ZM13.643 16.916L9.68483 19.1991V14.6329L13.643 16.916ZM19.4644 14.6384V19.1928L15.5114 16.9156L19.4644 14.6384ZM29.7141 13.8315L25.7497 11.5482L25.7528 16.1095L29.7141 13.8315ZM14.1135 11.5484L14.1104 16.1095L10.1491 13.8315L14.1135 11.5484ZM24.8225 11.5489L24.8194 16.1089L20.8658 13.8311L24.8225 11.5489ZM18.9974 13.8311L15.0438 16.1089L15.0406 11.5489L18.9974 13.8311ZM24.3596 10.7467L20.3951 8.46359L20.3983 13.0247L24.3596 10.7467Z"
fill="white"
/>

2
src/components/Menu/menu.css
View File

@ -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;

4
src/components/SimpleText/simpleText.css
View File

@ -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 {

7
src/components/Upload/UploadFile.tsx
View File

@ -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<CodexData["upload"]>;
// 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) => {

12
src/components/Upload/upload.css
View File

@ -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 {