-
+ {label &&
}
{filtered.length ? (
filtered.map((o) => (
- - onSelect(o)} key={o.title}>
+
- onSelect(o)} key={o.title + o.subtitle}>
{o.Icon && }
{o.title}
{o.subtitle && {o.subtitle}}
diff --git a/src/components/Dropdown/dropdown.css b/src/components/Dropdown/dropdown.css
index 87db971..621bfb0 100644
--- a/src/components/Dropdown/dropdown.css
+++ b/src/components/Dropdown/dropdown.css
@@ -71,10 +71,7 @@
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
-
- &:focus {
- z-index: 11;
- }
+ z-index: 11;
}
p {
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 3c93922..e40b574 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,8 +1,10 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ComponentType, ReactNode, useEffect, useState } from "react";
import { Backdrop } from "../Backdrop/Backdrop";
import { Button } from "../Button/Button";
import { classnames } from "../utils/classnames";
import "./modal.css";
+import CloseIcon from "../../assets/icons/close.svg?react";
+import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
type Props = {
open: boolean;
@@ -55,6 +57,10 @@ type Props = {
children: ReactNode;
className?: string;
+
+ title?: string;
+
+ Icon?: ComponentType<{ width: number | string | undefined }>;
};
export function Modal({
@@ -68,6 +74,8 @@ export function Modal({
labelActionButton = "Action",
labelCloseButton = "Close",
children,
+ title,
+ Icon,
onAction,
}: Props) {
const [internalOpen, setInternalOpen] = useState(open);
@@ -94,26 +102,43 @@ export function Modal({
);
diff --git a/src/components/Modal/modal.css b/src/components/Modal/modal.css
index 3105790..eca071f 100644
--- a/src/components/Modal/modal.css
+++ b/src/components/Modal/modal.css
@@ -3,7 +3,6 @@
transition:
transform 0.25s,
opacity 0.25s;
- max-width: 800px;
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
@@ -15,16 +14,54 @@
position: fixed;
display: flex;
flex-direction: column;
- background-color: var(--codex-background);
- padding: 1.5rem;
- border-radius: var(--codex-border-radius);
+ background: #232323;
+ border-radius: 16px;
border: none;
width: calc(100% - 6rem);
- @media (min-width: 801px) {
- & {
- min-width: 500px;
+ & {
+ min-width: 500px;
+ }
+
+ > header {
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ > div {
+ display: flex;
+ gap: 8px;
+ align-items: center;
}
+
+ .button-icon {
+ background-color: transparent;
+ border: 1px solid #96969633;
+ }
+
+ svg {
+ min-width: 20px;
+ }
+
+ h6 {
+ margin: 0;
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: -0.011em;
+ }
+ }
+
+ > main {
+ flex: 1;
+ }
+
+ > footer {
+ margin-top: 1rem;
+ display: flex;
+ justify-content: center;
}
}
@@ -37,16 +74,6 @@
z-index: 10;
}
- main {
- flex: 1;
- }
-
- footer {
- margin-top: 1rem;
- display: flex;
- justify-content: center;
- }
-
&.modal--actions footer {
margin-top: 1rem;
display: flex;
diff --git a/src/components/Stepper/Step.css b/src/components/Stepper/Step.css
index 8b2f116..b373553 100644
--- a/src/components/Stepper/Step.css
+++ b/src/components/Stepper/Step.css
@@ -1,119 +1,124 @@
.step {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- transition: opacity 0.35s;
-
- &:not([disabled]):not(.step--active):hover {
- cursor: pointer;
- opacity: 0.8;
+ &:not(:last-child) {
+ flex: 1;
}
- @media (min-width: 801px) {
- &:not(:last-child) {
- flex: 1;
- }
+ --codex-step-background-color: white;
+ --codex-step-border-color: #e1e4ea;
+ --codex-step-label-color: #969696;
+ --codex-step-small-color: #96969699;
+ --codex-step-hr-color: #96969699;
+ --codex-step-animation: step-back;
+
+ &.step--done {
+ --codex-step-background-color: transparent;
+ --codex-step-border-color: transparent;
+ --codex-step-small-color: #1fc16b99;
+ --codex-step-label-color: #1fc16b;
+ --codex-step-hr-color: #1fc16b;
+ --codex-step-animation: step;
}
> div:first-child {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- transition: opacity 0.35s;
-
- width: 1.75rem;
- height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
- border-radius: 50%;
- transition: background-color 0.35s;
- background-color: var(
- --codex-stepper-background,
- var(--codex-background-light)
- );
+ gap: 16px;
+ transition:
+ box-shadow 0.35s,
+ background-color 0.35s;
+ flex: 1;
+ height: 20px;
+ position: relative;
span {
display: flex;
align-items: center;
justify-content: center;
- mix-blend-mode: difference;
+ background-color: var(--codex-step-background-color);
+ border: 1px solid var(--codex-step-border-color);
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ color: #525866;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ text-align: center;
+ cursor: pointer;
+ transition: box-shadow 0.35s;
+
+ &:hover {
+ box-shadow: 0 0 0 2px var(--codex-border-color);
+ }
}
- }
-
- &.step--active > div:first-child,
- &.step--done > div:first-child {
- background-color: var(--codex-color-primary);
- }
-
- div:nth-child(2) {
- display: flex;
- flex: 1;
- position: relative;
- place-items: center;
hr {
border: 0;
- height: 1px;
+ height: 4px;
flex: 1;
- background-color: var(
- --codex-stepper-background,
- var(--codex-background-light)
- );
+ background-color: #969696;
+ border-radius: 40px;
position: relative;
margin-bottom: 8px;
- @media (max-width: 800px) {
- & {
- display: none;
- }
+ &::before {
+ background-color: var(--codex-step-hr-color);
+ height: 4px;
+ content: " ";
+ position: absolute;
+ z-index: 1;
+ animation-duration: 1s;
+ animation-name: var(--codex-step-animation);
+ animation-fill-mode: forwards;
+ border-radius: 40px;
}
}
+ }
- &::before {
- background-color: var(--codex-color-primary);
- height: 1px;
- content: " ";
- position: absolute;
- top: 8px;
- animation-duration: 1s;
- animation-name: step-back;
- animation-fill-mode: forwards;
- opacity: 0;
- /* animation-direction: reverse; */
+ > div:nth-child(2) {
+ display: block;
+ padding-left: 38px;
+
+ small {
+ font-family: Inter;
+ font-size: 8px;
+ font-weight: 700;
+ line-height: 8px;
+ text-align: left;
+ color: var(--codex-step-small-color);
+ display: block;
}
span {
- position: absolute;
- top: 10px;
+ font-family: Inter;
font-size: 14px;
-
- @media (max-width: 800px) {
- & {
- display: none;
- }
- }
- }
- }
-
- &.step--done {
- div:nth-child(2) {
- &::before {
- background-color: var(--codex-color-primary);
- display: inline-block;
- animation-duration: 1s;
- animation-name: step;
- animation-fill-mode: forwards;
- opacity: 1;
- }
- }
- }
-
- &.step--mounted {
- div:nth-child(2) {
- &::before {
- opacity: 1;
- }
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: -0.006em;
+ text-align: left;
+ color: var(--codex-step-label-color);
}
}
}
+
+@keyframes step-back {
+ 0% {
+ width: 100%;
+ }
+
+ 100% {
+ width: 0%;
+ }
+}
+
+@keyframes step {
+ 0% {
+ width: 0;
+ }
+
+ 100% {
+ width: 100%;
+ }
+}
diff --git a/src/components/Stepper/Step.tsx b/src/components/Stepper/Step.tsx
index 2a557e9..3721283 100644
--- a/src/components/Stepper/Step.tsx
+++ b/src/components/Stepper/Step.tsx
@@ -1,8 +1,8 @@
-import { Check } from "lucide-react";
import { useEffect, useRef } from "react";
import { attributes } from "../utils/attributes";
import { classnames } from "../utils/classnames";
import "./Step.css";
+import ValidIcon from "../../assets/icons/valid.svg?react";
type StepProps = {
/**
@@ -34,6 +34,8 @@ type StepProps = {
* Event triggered when a step number is clicked on
*/
onClick?: (step: number) => void;
+
+ index: number;
};
export function Step({
@@ -42,6 +44,7 @@ export function Step({
isLast,
isDone,
title,
+ index,
onClick,
}: StepProps) {
const mounted = useRef(false);
@@ -62,12 +65,13 @@ export function Step({
{...attributes({ disabled: !onClick })}
>
- {isDone ? : step + 1}
+ {isDone ? : step + 1}
+
{!isLast && (
-
+ STEP {index}
{title}
)}
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index cbbf783..ba1f6bb 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -5,6 +5,8 @@ import { Spinner } from "../Spinner/Spinner";
import { Step } from "./Step";
import { StepperAction, StepperState } from "./useStepperReducer";
import { classnames } from "../utils/classnames";
+import PreviousIcon from "../../assets/icons/previous.svg?react";
+import NextIcon from "../../assets/icons/next.svg?react";
type Props = {
/**
@@ -94,6 +96,7 @@ export function Stepper({
{titles.map((title, index) => (
onChangeStep(state.step - 1)}
disabled={!state.isBackEnable}
+ Icon={PreviousIcon}
/>