From e39fe68f2cfa9a623fc6a6dd0a2e6f5d4ddd1ccc Mon Sep 17 00:00:00 2001 From: Tuur Martens Date: Fri, 13 Oct 2023 09:22:04 +0200 Subject: [PATCH 1/4] start work on dash --- panda.config.ts | 23 ++++++ public/back-arrow.svg | 3 + public/logo-github.svg | 3 + src/app/dash/providers/github/page.tsx | 17 ++++ src/app/dash/providers/page.tsx | 7 ++ src/components/Dash/ConnectAccount/index.tsx | 19 +++++ src/components/Dash/ConnectAccount/styles.ts | 19 +++++ .../Dash/DestinationOrProvider/index.tsx | 37 +++++++++ .../Dash/DestinationOrProvider/styles.ts | 44 +++++++++++ src/components/Dash/MainContainer/styles.ts | 2 + src/components/Dash/PageHeader/index.tsx | 23 +++++- src/components/Dash/PageHeader/styles.ts | 25 +++++- src/components/Dash/Select/index.tsx | 34 ++++++++ src/components/Dash/Select/styles.ts | 78 +++++++++++++++++++ src/components/Dash/Sidebar/styles.ts | 4 +- src/components/Dash/WebhookSelect/styles.ts | 2 +- src/components/common/BackButton/index.tsx | 5 ++ src/components/common/BackButton/styles.ts | 23 ++++++ src/components/common/Button/styles.ts | 7 ++ src/components/common/Navbar/index.tsx | 2 +- 20 files changed, 367 insertions(+), 10 deletions(-) create mode 100644 public/back-arrow.svg create mode 100644 public/logo-github.svg create mode 100644 src/app/dash/providers/github/page.tsx create mode 100644 src/components/Dash/ConnectAccount/index.tsx create mode 100644 src/components/Dash/ConnectAccount/styles.ts create mode 100644 src/components/Dash/DestinationOrProvider/index.tsx create mode 100644 src/components/Dash/DestinationOrProvider/styles.ts create mode 100644 src/components/Dash/Select/index.tsx create mode 100644 src/components/Dash/Select/styles.ts create mode 100644 src/components/common/BackButton/index.tsx create mode 100644 src/components/common/BackButton/styles.ts diff --git a/panda.config.ts b/panda.config.ts index ab8ac66..b615ea3 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -27,6 +27,22 @@ export default defineConfig({ lineHeight: "1.2", }, }, + button: { + description: "Button text", + value: { + fontSize: "md", + lineHeight: "1.2", + fontWeight: "500", + }, + }, + medium: { + description: "Medium text", + value: { + fontSize: "md", + lineHeight: "1.2", + fontWeight: "500", + }, + }, hero: { description: "Hero text", value: { @@ -56,7 +72,14 @@ export default defineConfig({ }, }, colors: { + grey: { + 200: { value: "#EEEEEE" }, + }, + buttons: { + primary: { value: "#7A97FF" }, + }, neutral: { + 0: { value: "#fff" }, 100: { value: "#F4F8F6" }, 200: { value: "#D9DFDB" }, 300: { value: "#BCC5C0" }, diff --git a/public/back-arrow.svg b/public/back-arrow.svg new file mode 100644 index 0000000..939dec5 --- /dev/null +++ b/public/back-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logo-github.svg b/public/logo-github.svg new file mode 100644 index 0000000..59391ae --- /dev/null +++ b/public/logo-github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dash/providers/github/page.tsx b/src/app/dash/providers/github/page.tsx new file mode 100644 index 0000000..ab85dce --- /dev/null +++ b/src/app/dash/providers/github/page.tsx @@ -0,0 +1,17 @@ +import { PageHeader } from "@/components/Dash/PageHeader"; +import { ConnectAccount } from "@/components/Dash/ConnectAccount"; + +function GitHubProvider() { + return ( + <> + + + + ); +} + +export default GitHubProvider; diff --git a/src/app/dash/providers/page.tsx b/src/app/dash/providers/page.tsx index f6e92c8..4637b0a 100644 --- a/src/app/dash/providers/page.tsx +++ b/src/app/dash/providers/page.tsx @@ -1,4 +1,8 @@ import { PageHeader } from "@/components/Dash/PageHeader"; +import { + DestOrProviderList, + GithubProvider, +} from "@/components/Dash/DestinationOrProvider"; function Providers() { return ( @@ -7,6 +11,9 @@ function Providers() { title="Providers" subtitle="Define your providers for the WidgetBot webhook here." /> + + + ); } diff --git a/src/components/Dash/ConnectAccount/index.tsx b/src/components/Dash/ConnectAccount/index.tsx new file mode 100644 index 0000000..83b382d --- /dev/null +++ b/src/components/Dash/ConnectAccount/index.tsx @@ -0,0 +1,19 @@ +import * as Styles from "./styles"; +import { Button } from "@/components/common/Button"; +import Image from "next/image"; + +interface Props { + connectText: string; + brandName: string; + logoUrl: string; +} + +export function ConnectAccount({ connectText, brandName, logoUrl }: Props) { + return ( + + logo + {connectText} + + + ); +} diff --git a/src/components/Dash/ConnectAccount/styles.ts b/src/components/Dash/ConnectAccount/styles.ts new file mode 100644 index 0000000..b223ef9 --- /dev/null +++ b/src/components/Dash/ConnectAccount/styles.ts @@ -0,0 +1,19 @@ +import { styled } from "panda/jsx"; + +export const Container = styled("div", { + base: { + display: "flex", + flexDirection: "column", + gap: "4", + justifyContent: "center", + alignItems: "center", + flex: "1 0 auto", + }, +}); + +export const Text = styled("p", { + base: { + fontSize: "md", + fontWeight: "500", + }, +}); diff --git a/src/components/Dash/DestinationOrProvider/index.tsx b/src/components/Dash/DestinationOrProvider/index.tsx new file mode 100644 index 0000000..5852b7f --- /dev/null +++ b/src/components/Dash/DestinationOrProvider/index.tsx @@ -0,0 +1,37 @@ +"use client"; + +import * as Styles from "./styles"; +import Image from "next/image"; + +export { DestOrProviderList } from "./styles"; + +interface Props { + brandName: string; + logoUrl: string; + destination: string; +} + +export function DestinationOrProvider({ + brandName, + logoUrl, + destination, +}: Props) { + return ( + + + {`${brandName} + + {brandName} + + ); +} + +export function GithubProvider() { + return ( + + ); +} diff --git a/src/components/Dash/DestinationOrProvider/styles.ts b/src/components/Dash/DestinationOrProvider/styles.ts new file mode 100644 index 0000000..665b887 --- /dev/null +++ b/src/components/Dash/DestinationOrProvider/styles.ts @@ -0,0 +1,44 @@ +import { styled } from "panda/jsx"; +import Link from "next/link"; + +export const Container = styled(Link, { + base: { + border: "1px solid token(colors.neutral.300)", + borderRadius: "lg", + backgroundColor: "neutral.0", + overflow: "hidden", + display: "flex", + flexDirection: "column", + padding: "8", + color: "neutral.900", + alignItems: "center", + gap: "4", + cursor: "pointer", + }, +}); + +export const LogoContainer = styled("div", { + base: { + width: "64px", + height: "64px", + backgroundColor: "grey.200", + borderRadius: "full", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, +}); + +export const BrandName = styled("p", { + base: { + textStyle: "normal", + }, +}); + +export const DestOrProviderList = styled("ul", { + base: { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + }, +}); diff --git a/src/components/Dash/MainContainer/styles.ts b/src/components/Dash/MainContainer/styles.ts index 0d27edb..44e07ca 100644 --- a/src/components/Dash/MainContainer/styles.ts +++ b/src/components/Dash/MainContainer/styles.ts @@ -42,5 +42,7 @@ export const MainContent = styled("div", { export const PageContent = styled(Panel, { base: { flex: "1 0 auto", + display: "flex", + flexDirection: "column", }, }); diff --git a/src/components/Dash/PageHeader/index.tsx b/src/components/Dash/PageHeader/index.tsx index c261f31..53b3c4e 100644 --- a/src/components/Dash/PageHeader/index.tsx +++ b/src/components/Dash/PageHeader/index.tsx @@ -1,15 +1,30 @@ import * as Styles from "./styles"; +import { BackButton } from "@/components/common/BackButton"; +import Image from "next/image"; interface Props { title: string; - subtitle: string; + subtitle?: string; + hasBackButton?: boolean; + logoUrl?: string; } -export function PageHeader({ title, subtitle }: Props) { +export function PageHeader({ + title, + subtitle, + hasBackButton = false, + logoUrl, +}: Props) { return ( - {title} - {subtitle} + + + {logoUrl && }{" "} + {title} + + {subtitle && {subtitle}} + + {hasBackButton && } ); } diff --git a/src/components/Dash/PageHeader/styles.ts b/src/components/Dash/PageHeader/styles.ts index f239917..ae3bd83 100644 --- a/src/components/Dash/PageHeader/styles.ts +++ b/src/components/Dash/PageHeader/styles.ts @@ -3,11 +3,18 @@ import { styled } from "panda/jsx"; export const Container = styled("div", { base: { display: "flex", - flexDirection: "column", - gap: "1", borderBottom: "1px solid token(colors.neutral.300)", paddingBottom: "8", marginBottom: "8", + justifyContent: "space-between", + }, +}); + +export const TextContainer = styled("div", { + base: { + display: "flex", + gap: "1", + flexDirection: "column", }, }); @@ -15,6 +22,20 @@ export const Title = styled("p", { base: { fontSize: "2xl", color: "neutral.900", + display: "flex", + flexDirection: "row", + gap: "3", + fontWeight: "500", + }, + variants: { + hasBackButton: { + false: { + justifyContent: "left", + }, + true: { + justifyContent: "center", + }, + }, }, }); diff --git a/src/components/Dash/Select/index.tsx b/src/components/Dash/Select/index.tsx new file mode 100644 index 0000000..2899f22 --- /dev/null +++ b/src/components/Dash/Select/index.tsx @@ -0,0 +1,34 @@ +"use client"; + +import * as RadixSelect from "@radix-ui/react-select"; +import * as Styles from "./styles"; +import Image from "next/image"; + +interface Props { + options: Array<{ label: string; value: string }>; + value?: string; +} + +export function Select({ options, value }: Props) { + return ( + + + + + + + + + + + {options.map(({ label, value }) => ( + + {label} + + ))} + + + + + ); +} diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts new file mode 100644 index 0000000..2e3cef4 --- /dev/null +++ b/src/components/Dash/Select/styles.ts @@ -0,0 +1,78 @@ +import { styled } from "panda/jsx"; +import * as Select from "@radix-ui/react-select"; + +export const Container = styled("div", { + base: { + position: "relative", + }, +}); + +export const Trigger = styled(Select.Trigger, { + base: { + colorPalette: "neutral", + display: "flex", + flexDirection: "row", + alignItems: "center", + padding: "3", + minWidth: "250px", + border: "1px solid token(colors.neutral.400)", + borderRadius: "lg", + gap: "2", + cursor: "pointer", + }, +}); + +export const Caret = styled(Select.Icon, { + base: { + width: "12px", + height: "20px", + marginLeft: "auto", + }, +}); + +export const Content = styled(Select.Content, { + base: { + colorPalette: "neutral", + backgroundColor: "neutral.100", + width: "100%", + border: "1px solid token(colors.neutral.400)", + borderRadius: "lg", + padding: "2", + zIndex: "popup", + boxShadow: "md", + }, +}); + +export const Viewport = styled(Select.Viewport, { + base: { + display: "flex", + flexDirection: "column", + gap: "2", + }, +}); + +export const Item = styled(Select.SelectItem, { + base: { + display: "flex", + flexDirection: "row", + alignItems: "center", + padding: "4", + gap: "2", + cursor: "pointer", + outline: "none", + borderRadius: "md", + + '&[data-state="checked"]': { + colorPalette: "blue", + backgroundColor: "colorPalette.200", + }, + + '&[data-highlighted]:not([data-state="checked"])': { + backgroundColor: "colorPalette.200", + + [`& .arrow`]: { + translate: "4px 0", + }, + }, + }, +}); diff --git a/src/components/Dash/Sidebar/styles.ts b/src/components/Dash/Sidebar/styles.ts index d6a6120..dbf8edd 100644 --- a/src/components/Dash/Sidebar/styles.ts +++ b/src/components/Dash/Sidebar/styles.ts @@ -33,7 +33,7 @@ export const NavLink = styled(Link, { padding: "4", borderRadius: "lg", border: "1px solid token(colors.neutral.300)", - backgroundColor: "neutral.200", + backgroundColor: "neutral.0", display: "flex", alignItems: "center", flexDirection: "row", @@ -72,7 +72,7 @@ export const NavIcon = styled("div", { width: "32px", height: "32px", borderRadius: "full", - backgroundColor: "colorPalette.300", + backgroundColor: "colorPalette.100", border: "1px solid token(colors.colorPalette.400)", display: "flex", justifyContent: "center", diff --git a/src/components/Dash/WebhookSelect/styles.ts b/src/components/Dash/WebhookSelect/styles.ts index 68e7f2a..3986fc0 100644 --- a/src/components/Dash/WebhookSelect/styles.ts +++ b/src/components/Dash/WebhookSelect/styles.ts @@ -20,7 +20,7 @@ export const Trigger = styled(Select.Trigger, { borderRadius: "lg", gap: "2", cursor: "pointer", - backgroundColor: "neutral.100", + backgroundColor: "neutral.0", }, }); diff --git a/src/components/common/BackButton/index.tsx b/src/components/common/BackButton/index.tsx new file mode 100644 index 0000000..d8185f4 --- /dev/null +++ b/src/components/common/BackButton/index.tsx @@ -0,0 +1,5 @@ +import * as Styles from "./styles"; + +export function BackButton() { + return ; +} diff --git a/src/components/common/BackButton/styles.ts b/src/components/common/BackButton/styles.ts new file mode 100644 index 0000000..76b654d --- /dev/null +++ b/src/components/common/BackButton/styles.ts @@ -0,0 +1,23 @@ +import { styled } from "panda/jsx"; + +export const BackButton = styled("button", { + base: { + borderColor: "neutral.300", + borderStyle: "solid", + borderWidth: "1px", + backgroundImage: "url(/back-arrow.svg)", + borderRadius: "full", + width: "40px", + height: "40px", + backgroundColor: "neutral.0", + backgroundPosition: "center center", + backgroundRepeat: "no-repeat", + backgroundSize: "60%", + cursor: "pointer", + transition: "border-color 300ms", + + "&:hover": { + borderColor: "neutral.900", + }, + }, +}); diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts index 06ef626..f5d0ddc 100644 --- a/src/components/common/Button/styles.ts +++ b/src/components/common/Button/styles.ts @@ -19,6 +19,13 @@ export const Button = styled("button", { backgroundRepeat: "no-repeat", backgroundPosition: "right token(spacing.6) center", }, + primary: { + backgroundColor: "buttons.primary", + color: "neutral.100", + padding: "token(spacing.2) token(spacing.4)", + borderRadius: "lg", + textStyle: "button", + }, }, }, }); diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx index 5ebdbef..38bbe9f 100644 --- a/src/components/common/Navbar/index.tsx +++ b/src/components/common/Navbar/index.tsx @@ -7,7 +7,7 @@ export function Navbar() { - logo + logo Hookla Keep your community informed. From 1e36a3bd5118dc7d7e6c2a3b4f1c7fdf76c77793 Mon Sep 17 00:00:00 2001 From: Tuur Martens Date: Sat, 14 Oct 2023 12:42:52 +0200 Subject: [PATCH 2/4] provider and destination layout --- public/logo-discord.svg | 3 ++ src/app/dash/destinations/discord/page.tsx | 53 +++++++++++++++++++ src/app/dash/destinations/page.tsx | 7 +++ src/app/dash/providers/github/page.tsx | 46 ++++++++++++++-- src/components/Dash/ConnectAccount/index.tsx | 20 ++++--- src/components/Dash/ConnectAccount/styles.ts | 19 ------- .../Dash/DestinationOrProvider/index.tsx | 20 +++++-- .../Dash/DestinationOrProvider/styles.ts | 21 ++++++++ src/components/Dash/PageHeader/index.tsx | 6 ++- src/components/Dash/Select/styles.ts | 1 + src/components/Dash/SetUp/index.tsx | 19 +++++++ src/components/Dash/Sidebar/index.tsx | 2 +- src/components/common/BackButton/index.tsx | 18 ++++++- src/components/common/BackButton/styles.ts | 3 +- 14 files changed, 199 insertions(+), 39 deletions(-) create mode 100644 public/logo-discord.svg create mode 100644 src/app/dash/destinations/discord/page.tsx delete mode 100644 src/components/Dash/ConnectAccount/styles.ts create mode 100644 src/components/Dash/SetUp/index.tsx diff --git a/public/logo-discord.svg b/public/logo-discord.svg new file mode 100644 index 0000000..0e6fbb0 --- /dev/null +++ b/public/logo-discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dash/destinations/discord/page.tsx b/src/app/dash/destinations/discord/page.tsx new file mode 100644 index 0000000..cf02c97 --- /dev/null +++ b/src/app/dash/destinations/discord/page.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { PageHeader } from "@/components/Dash/PageHeader"; +import { ConnectAccount } from "@/components/Dash/ConnectAccount"; +import { useCallback, useState } from "react"; +import { SetUp } from "@/components/Dash/SetUp"; +import { Select } from "@/components/Dash/Select"; +import { Button } from "@/components/common/Button"; +import { styled } from "panda/jsx"; + +const SetUpChildren = styled("div", { + base: { + display: "flex", + flexDirection: "row", + gap: "4", + }, +}); + +function DiscordDestination() { + const [isAuthed, setIsAuthed] = useState(false); + + const onConnected = useCallback(() => setIsAuthed(true), [setIsAuthed]); + + return ( + <> + + {isAuthed ? ( + + + + + + + ) : ( + + )} ); } diff --git a/src/components/Dash/ConnectAccount/index.tsx b/src/components/Dash/ConnectAccount/index.tsx index 83b382d..d1e7a9b 100644 --- a/src/components/Dash/ConnectAccount/index.tsx +++ b/src/components/Dash/ConnectAccount/index.tsx @@ -1,4 +1,4 @@ -import * as Styles from "./styles"; +import * as ContentStyles from "../DestinationOrProvider"; import { Button } from "@/components/common/Button"; import Image from "next/image"; @@ -6,14 +6,22 @@ interface Props { connectText: string; brandName: string; logoUrl: string; + onConnect(): void; } -export function ConnectAccount({ connectText, brandName, logoUrl }: Props) { +export function ConnectAccount({ + connectText, + brandName, + logoUrl, + onConnect, +}: Props) { return ( - + logo - {connectText} - - + {connectText} + + ); } diff --git a/src/components/Dash/ConnectAccount/styles.ts b/src/components/Dash/ConnectAccount/styles.ts deleted file mode 100644 index b223ef9..0000000 --- a/src/components/Dash/ConnectAccount/styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { styled } from "panda/jsx"; - -export const Container = styled("div", { - base: { - display: "flex", - flexDirection: "column", - gap: "4", - justifyContent: "center", - alignItems: "center", - flex: "1 0 auto", - }, -}); - -export const Text = styled("p", { - base: { - fontSize: "md", - fontWeight: "500", - }, -}); diff --git a/src/components/Dash/DestinationOrProvider/index.tsx b/src/components/Dash/DestinationOrProvider/index.tsx index 5852b7f..5e8a0ed 100644 --- a/src/components/Dash/DestinationOrProvider/index.tsx +++ b/src/components/Dash/DestinationOrProvider/index.tsx @@ -3,23 +3,25 @@ import * as Styles from "./styles"; import Image from "next/image"; -export { DestOrProviderList } from "./styles"; +export { DestOrProviderList, ContentContainer, ContentText } from "./styles"; interface Props { brandName: string; logoUrl: string; destination: string; + group: "destinations" | "providers"; } export function DestinationOrProvider({ brandName, logoUrl, destination, + group, }: Props) { return ( - + - {`${brandName} + {`${brandName} {brandName} @@ -32,6 +34,18 @@ export function GithubProvider() { brandName="GitHub" logoUrl="/logo-github.svg" destination="github" + group="providers" + /> + ); +} + +export function DiscordDestination() { + return ( + ); } diff --git a/src/components/Dash/DestinationOrProvider/styles.ts b/src/components/Dash/DestinationOrProvider/styles.ts index 665b887..aacc9d0 100644 --- a/src/components/Dash/DestinationOrProvider/styles.ts +++ b/src/components/Dash/DestinationOrProvider/styles.ts @@ -42,3 +42,24 @@ export const DestOrProviderList = styled("ul", { flexWrap: "wrap", }, }); + +export const ContentContainer = styled("div", { + base: { + display: "flex", + flexDirection: "column", + gap: "4", + justifyContent: "center", + alignItems: "center", + flex: "1 0 auto", + }, +}); + +export const ContentText = styled("p", { + base: { + fontSize: "md", + fontWeight: "500", + maxWidth: "60%", + textWrap: "wrap", + textAlign: "center", + }, +}); diff --git a/src/components/Dash/PageHeader/index.tsx b/src/components/Dash/PageHeader/index.tsx index 53b3c4e..c6033ce 100644 --- a/src/components/Dash/PageHeader/index.tsx +++ b/src/components/Dash/PageHeader/index.tsx @@ -6,13 +6,15 @@ interface Props { title: string; subtitle?: string; hasBackButton?: boolean; + backButtonUrl?: string; logoUrl?: string; } export function PageHeader({ title, subtitle, - hasBackButton = false, + backButtonUrl, + hasBackButton, logoUrl, }: Props) { return ( @@ -24,7 +26,7 @@ export function PageHeader({ {subtitle && {subtitle}} - {hasBackButton && } + {hasBackButton && } ); } diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts index 2e3cef4..42b9dcc 100644 --- a/src/components/Dash/Select/styles.ts +++ b/src/components/Dash/Select/styles.ts @@ -19,6 +19,7 @@ export const Trigger = styled(Select.Trigger, { borderRadius: "lg", gap: "2", cursor: "pointer", + backgroundColor: "neutral.0", }, }); diff --git a/src/components/Dash/SetUp/index.tsx b/src/components/Dash/SetUp/index.tsx new file mode 100644 index 0000000..8b5d034 --- /dev/null +++ b/src/components/Dash/SetUp/index.tsx @@ -0,0 +1,19 @@ +import * as ContentStyles from "@/components/Dash/DestinationOrProvider"; +import Image from "next/image"; +import { ReactNode } from "react"; + +interface Props { + setUpText: string; + logoUrl: string; + children: ReactNode; +} + +export function SetUp({ setUpText, logoUrl, children }: Props) { + return ( + + logo + {setUpText} + {children} + + ); +} diff --git a/src/components/Dash/Sidebar/index.tsx b/src/components/Dash/Sidebar/index.tsx index 756ac19..b9cd7e3 100644 --- a/src/components/Dash/Sidebar/index.tsx +++ b/src/components/Dash/Sidebar/index.tsx @@ -63,7 +63,7 @@ export function Sidebar() { href={href} iconUrl={icon} key={href} - isActive={href === pathname} + isActive={pathname.startsWith(href)} > {label} diff --git a/src/components/common/BackButton/index.tsx b/src/components/common/BackButton/index.tsx index d8185f4..baa0f8a 100644 --- a/src/components/common/BackButton/index.tsx +++ b/src/components/common/BackButton/index.tsx @@ -1,5 +1,19 @@ +"use client"; + import * as Styles from "./styles"; +import { useRouter } from "next/navigation"; + +interface Props { + backPath?: string; +} + +export function BackButton({ backPath }: Props) { + const router = useRouter(); -export function BackButton() { - return ; + return ( + + ); } diff --git a/src/components/common/BackButton/styles.ts b/src/components/common/BackButton/styles.ts index 76b654d..81a62b6 100644 --- a/src/components/common/BackButton/styles.ts +++ b/src/components/common/BackButton/styles.ts @@ -1,6 +1,7 @@ import { styled } from "panda/jsx"; +import Link from "next/link"; -export const BackButton = styled("button", { +export const BackButton = styled(Link, { base: { borderColor: "neutral.300", borderStyle: "solid", From fbdf23b937d91d52caa6e533c9461d2decbe4a17 Mon Sep 17 00:00:00 2001 From: Tuur Martens Date: Sun, 15 Oct 2023 10:54:59 +0200 Subject: [PATCH 3/4] make small style changes --- package.json | 2 +- panda.config.ts | 54 +++- pnpm-lock.yaml | 251 ++++++++++-------- src/app/dash/destinations/discord/page.tsx | 12 +- src/app/dash/settings/page.tsx | 3 + .../Dash/DestinationOrProvider/styles.ts | 9 +- src/components/Dash/PageHeader/styles.ts | 4 +- src/components/Dash/Select/styles.ts | 11 +- src/components/Dash/Sidebar/styles.ts | 5 +- src/components/Dash/WebhookSelect/styles.ts | 11 +- src/components/common/BackButton/styles.ts | 4 +- src/components/common/Navbar/styles.ts | 2 + .../common/SearchDocumentation/styles.ts | 9 +- src/components/common/TextInput/index.tsx | 8 + src/components/common/TextInput/styles.ts | 13 + 15 files changed, 260 insertions(+), 138 deletions(-) create mode 100644 src/components/common/TextInput/index.tsx create mode 100644 src/components/common/TextInput/styles.ts diff --git a/package.json b/package.json index ddae80f..90b46ed 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "typescript": "5.1.6" }, "devDependencies": { - "@pandacss/dev": "^0.11.1", + "@pandacss/dev": "^0.16.0", "prettier": "^3.0.2" } } diff --git a/panda.config.ts b/panda.config.ts index b615ea3..88112e9 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -16,6 +16,33 @@ export default defineConfig({ jsxStyleProps: "none", + utilities: { + inputBorder: { + className: "input-border", + values: { type: "boolean" }, + transform(value: boolean, { token }) { + if (!value) return {}; + + return { + borderWidth: "1px", + borderColor: token("colors.borders.normal"), + borderStyle: "solid", + borderRadius: token("radii.input"), + outline: "none", + transition: `border-color ${token("durations.fast")}`, + + "&:hover:not(:focus)": { + borderColor: token("colors.borders.hover"), + }, + + "&:focus": { + borderColor: token("colors.borders.focus"), + }, + }; + }, + }, + }, + // Useful for theme customization theme: { extend: { @@ -53,6 +80,15 @@ export default defineConfig({ }, }, tokens: { + durations: { + fast: { value: "150ms" }, + normal: { value: "300ms" }, + }, + radii: { + input: { + value: "{radii.lg}", + }, + }, spacing: { paddingToMaxWidth: { value: "3rem", @@ -78,8 +114,24 @@ export default defineConfig({ buttons: { primary: { value: "#7A97FF" }, }, + input: { + bg: { + value: "#fff", + }, + placeholder: { + value: "#ACACAC", + }, + }, + borders: { + normal: { value: "#BCC5C0" }, + hover: { value: "#707070" }, + focus: { value: "black" }, + }, + text: { + primary: { value: "#343434" }, + secondary: { value: "#535353" }, + }, neutral: { - 0: { value: "#fff" }, 100: { value: "#F4F8F6" }, 200: { value: "#D9DFDB" }, 300: { value: "#BCC5C0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6b827a..dd0771e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,8 +38,8 @@ dependencies: devDependencies: '@pandacss/dev': - specifier: ^0.11.1 - version: 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) + specifier: ^0.16.0 + version: 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) prettier: specifier: ^3.0.2 version: 3.0.2 @@ -414,6 +414,23 @@ packages: '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 + /@clack/core@0.3.3: + resolution: {integrity: sha512-5ZGyb75BUBjlll6eOa1m/IZBxwk91dooBWhPSL67sWcLS0zt9SnswRL0l26TVdBhb0wnWORRxUn//uH6n4z7+A==} + dependencies: + picocolors: 1.0.0 + sisteransi: 1.0.5 + dev: true + + /@clack/prompts@0.6.3: + resolution: {integrity: sha512-AM+kFmAHawpUQv2q9+mcB6jLKxXGjgu/r2EQjEwujgpCdzrST6BJqYw00GRn56/L/Izw5U7ImoLmy00X/r80Pw==} + dependencies: + '@clack/core': 0.3.3 + picocolors: 1.0.0 + sisteransi: 1.0.5 + dev: true + bundledDependencies: + - is-unicode-supported + /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -1055,29 +1072,29 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - /@pandacss/config@0.11.1: - resolution: {integrity: sha512-yzBLfYgd64OawAfMPj9xZXsYVGa1hJyBUuxvpOg8amuEwtoLJKUflEeuRlIDtS5n0o3Y3/09SfBgDGHakF7Rmg==} + /@pandacss/config@0.16.0: + resolution: {integrity: sha512-Be610sA7/UsOyCFgLQDzkjhhPqkTyPtky6fc1UKEyCnE6IXEeSeIJ55XzM30GpF38NcrqBX29ncfIYZLHMXGiA==} dependencies: - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/preset-base': 0.11.1 - '@pandacss/preset-panda': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/preset-base': 0.16.0 + '@pandacss/preset-panda': 0.16.0 + '@pandacss/types': 0.16.0 bundle-n-require: 1.0.1 escalade: 3.1.1 jiti: 1.19.3 merge-anything: 5.1.7 - typescript: 5.1.6 + typescript: 5.2.2 dev: true - /@pandacss/core@0.11.1: - resolution: {integrity: sha512-Noh27KZMEKg+Y9X71J1wKRfeJKLzl5GSiRhNkOJqVb+nELabdnHAJD0YzFr+wLLeDxG5HBuilTaldnmD7Xn0oQ==} + /@pandacss/core@0.16.0: + resolution: {integrity: sha512-eILsUAQ1LTjwlPpb0+xK5/wbDBW2Jk+qvqY9awV8zA5tXUV43cLMj9wEnU05lB3ZWEL6pkEQEk1dQi9/zjp7vg==} dependencies: - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 autoprefixer: 10.4.15(postcss@8.4.27) hookable: 5.5.3 lodash.merge: 4.6.2 @@ -1085,26 +1102,28 @@ packages: postcss-discard-duplicates: 6.0.0(postcss@8.4.27) postcss-discard-empty: 6.0.0(postcss@8.4.27) postcss-merge-rules: 6.0.1(postcss@8.4.27) + postcss-minify-selectors: 6.0.0(postcss@8.4.27) postcss-nested: 6.0.1(postcss@8.4.27) postcss-normalize-whitespace: 6.0.0(postcss@8.4.27) postcss-selector-parser: 6.0.13 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 dev: true - /@pandacss/dev@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): - resolution: {integrity: sha512-2MrW9ML1Q1FeCrtP6DqLN6ij1Ccf+14x0Pi2WjwCoi/k6KfuYIYEw8ZIokEd64LNlnqALwpDmrzUxHCJICurYw==} + /@pandacss/dev@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): + resolution: {integrity: sha512-LCDLM9zlq61NPAPeD14qk9ri3flUJY8WyihTPyFb93C5tkYTQY+l7xk1NyrtBwEc48/5NDg17wNPeCgv6KvSVQ==} hasBin: true dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/error': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/node': 0.11.1(typescript@5.1.6) - '@pandacss/postcss': 0.11.1(typescript@5.1.6) - '@pandacss/preset-panda': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/studio': 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@clack/prompts': 0.6.3 + '@pandacss/config': 0.16.0 + '@pandacss/error': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/node': 0.16.0(typescript@5.1.6) + '@pandacss/postcss': 0.16.0(typescript@5.1.6) + '@pandacss/preset-panda': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/studio': 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6) + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 cac: 6.7.14 pathe: 1.1.1 perfect-debounce: 1.0.0 @@ -1125,64 +1144,64 @@ packages: - typescript dev: true - /@pandacss/error@0.11.1: - resolution: {integrity: sha512-BGJYI6EGrz8IL2UI9St3bJdcSDxkQ2YcSaqg1lA6FHgwoqpKy6GKWbX/OGBFeDPk1aXhjmD+IObGCFjdaELC0A==} + /@pandacss/error@0.16.0: + resolution: {integrity: sha512-Nj/WNREKELsv4CoexswacWsz1hSwH70kErgGnsprR6DVPje+wKQKoF3YMhW0NdKqscKO0I7wHa501z9JBnOx9Q==} dev: true - /@pandacss/extractor@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-n8VFRehmnTfeODvZ7nsZVDu/Di5sRTDJDNrHLM8e0s5d3MNQA0BH8txSF4+/a77v0S6HWKwQ7t/KsA8YbEP9NA==} + /@pandacss/extractor@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-WXDHNhjNqjzCEGVjcsy3/T8i+mJ50XWwXAE+2gJ5UEvtMw5ghFEnLbrBsxGfnRF6GCkwoERJzDI5APCgHZUD5Q==} dependencies: lil-fp: 1.4.5 ts-evaluator: 1.2.0(typescript@5.1.6) ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/generator@0.11.1: - resolution: {integrity: sha512-YS+CA2UMbMURWyxV2ddXUk5BrTXFjMwdM/EQX+b/smiEgx1uv8Nk95K0B77n3hRB3xi836EZBydvWHwhQX72dQ==} + /@pandacss/generator@0.16.0: + resolution: {integrity: sha512-bEtVvbtR3DFzwO6sWSG53Sb72TX+4OQrXJoJtoHly9+YlYKpas0hPkQtuh7M712p3gJyYBXfPCm81Pvg5uzvaw==} dependencies: - '@pandacss/core': 0.11.1 - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/core': 0.16.0 + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 javascript-stringify: 2.1.0 lil-fp: 1.4.5 outdent: 0.8.0 pluralize: 8.0.0 postcss: 8.4.27 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 dev: true - /@pandacss/is-valid-prop@0.11.1: - resolution: {integrity: sha512-os3y8wlvPWBhg3Hufz3TyEfXgLX+hLwp76et7x3Ov9j6I0zj+S48EWsWiLvwUlJH1MKe/zoLijjCKXw/tguo3A==} + /@pandacss/is-valid-prop@0.16.0: + resolution: {integrity: sha512-r9vNdupeQNbXnHiCNw96Aj8sMBRhEEzWlubKChSl0oziT3VfccAGR++7pAgsHA6l/UPjs2aLzhUw225sHHIgFg==} dev: true - /@pandacss/logger@0.11.1: - resolution: {integrity: sha512-qHeC65BJDLFHCSl6wOSEZTSLIb0J3LjaBKK6L9OyQlLvJ7/BMwaH1M4JSEFHPhTYnYISuv1MaEpsvSeszI5Zwg==} + /@pandacss/logger@0.16.0: + resolution: {integrity: sha512-PfDRSsnFAH4qjZGOQuySpdiQu1vgoVIPEEG9B0HXWkcm4bWEsFC+N4DgO3m/OMDCEL7SkYvOPFpblAz/TwRYTw==} dependencies: kleur: 4.1.5 lil-fp: 1.4.5 dev: true - /@pandacss/node@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-Qpkn3CHcEF3ERYkCx1akQWaDZckKO70g6I0TDGJJzTX9X0AoruonYblLJCLyb1dsm1AzPYoRggJSIygjnc2MVA==} - dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/core': 0.11.1 - '@pandacss/error': 0.11.1 - '@pandacss/extractor': 0.11.1(typescript@5.1.6) - '@pandacss/generator': 0.11.1 - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/parser': 0.11.1(typescript@5.1.6) - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + /@pandacss/node@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-pqTDEvg9fS8ixynx6evplBYUI96Z4gfI8fQMgg1MjVxS0GzuzGaMdMu1664bT8/oSvAwe3ttx3ztBFubXUqUxA==} + dependencies: + '@pandacss/config': 0.16.0 + '@pandacss/core': 0.16.0 + '@pandacss/error': 0.16.0 + '@pandacss/extractor': 0.16.0(typescript@5.1.6) + '@pandacss/generator': 0.16.0 + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/parser': 0.16.0(typescript@5.1.6) + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 chokidar: 3.5.3 fast-glob: 3.3.1 file-size: 1.0.0 @@ -1201,74 +1220,74 @@ packages: postcss: 8.4.27 preferred-pm: 3.0.3 ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 tsconfck: 2.1.2(typescript@5.1.6) transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/parser@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-m3Hk8fJlQ31IOOATF3rkRxskDzb2VaOIisTcwsBbz44TG2HWfaRuI5ogBPY8soEoVUd0gho9sxFpgrm0WjlvFA==} + /@pandacss/parser@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-ldM7qUAVJt7AENwPYVtG252x6FWwhcYPRGYLRJAX6dMRC0Zkypnq3q5rkYuPYfvaueJsBfQTI9hlwZCoU+QCZA==} dependencies: - '@pandacss/config': 0.11.1 - '@pandacss/extractor': 0.11.1(typescript@5.1.6) - '@pandacss/is-valid-prop': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/shared': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/config': 0.16.0 + '@pandacss/extractor': 0.16.0(typescript@5.1.6) + '@pandacss/is-valid-prop': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/shared': 0.16.0 + '@pandacss/types': 0.16.0 '@vue/compiler-sfc': 3.3.4 lil-fp: 1.4.5 magic-string: 0.30.3 ts-morph: 19.0.0 - ts-pattern: 5.0.4 + ts-pattern: 5.0.5 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/postcss@0.11.1(typescript@5.1.6): - resolution: {integrity: sha512-T8i2nX2F4cnW+fafQ0y/supKP0v3fwRctvuZTa/5Rr1SMNF7c7uqyWZcERfCH2AppVixsspKLVEixeu+UC2/wQ==} + /@pandacss/postcss@0.16.0(typescript@5.1.6): + resolution: {integrity: sha512-diY9dMD4LcL9VnUJJr7Odb+d/8MN2UDeiTquZCkE2hfRcAFjasUikv81KrofzKYHayBaYKQN9dT2Xbh+cVCE3w==} dependencies: - '@pandacss/node': 0.11.1(typescript@5.1.6) + '@pandacss/node': 0.16.0(typescript@5.1.6) postcss: 8.4.28 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/preset-base@0.11.1: - resolution: {integrity: sha512-dOXjXInLLwQFtTqvfzLKas+zBSATjRdu7stPLUjsQAlCyZyhUqByFZAiyQ6I9tyKP4+YQwbQZzMm+UtrmAokvA==} + /@pandacss/preset-base@0.16.0: + resolution: {integrity: sha512-NgWKha0eHzTUF8P1+g4XayTI7vDEESNHRl9NxFEJYZaF4wlC6hJfd8aXnRTmm6dK7qFIOwmRokss5WfN3tpSXw==} dependencies: - '@pandacss/types': 0.11.1 + '@pandacss/types': 0.16.0 dev: true - /@pandacss/preset-panda@0.11.1: - resolution: {integrity: sha512-ZaX9DQAP87FDgXrou4S9RUh9fAby4fDuWt3pMwvtjqTJEBgwPgPdJaVv7bg3jwRYm2UjaAtw92NRSXj6yUAIdg==} + /@pandacss/preset-panda@0.16.0: + resolution: {integrity: sha512-rxgChw/8m7vEE+ffoRs72JE20XKtV7Bv+ANmtQnYM0lw0hRzj37ZBO7Rq5Of6J7cFalgXfWSj1FChinlsk0uSA==} dependencies: - '@pandacss/types': 0.11.1 + '@pandacss/types': 0.16.0 dev: true - /@pandacss/shared@0.11.1: - resolution: {integrity: sha512-g4mnSEXON9xv7SiSdHD2Q71F11NKDXIGhtuFegL9tVxdnuvQEXJh52qQmCA4XhPKdHNovwcsA0+GdryIJir0WA==} + /@pandacss/shared@0.16.0: + resolution: {integrity: sha512-kWqAzEDVIJ2KjizJMLoDQqU21y0pyOVF3zWfxfrzwrG7Y0BzHrm/9Rk0rSoI3+33z0GqFc4/UMbKuFI1qIl4Wg==} dev: true - /@pandacss/studio@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): - resolution: {integrity: sha512-fKHr2YbSTJJS9z1hhfmQ58hhkqcRGkbE95EHbl4vA+O9ABdZqqD/Zw6Aw5ttqCKv/DmlipEN1e9LBTZIUFMPMQ==} + /@pandacss/studio@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6): + resolution: {integrity: sha512-XadiHCXDCzkfGvnY64SEgcEBPW9x3FHsyI/0XMFzr0t1vZ4MRszQ6szMb0lb60PzSKuNI0VNlcbHelsHHOwcrw==} dependencies: '@ark-ui/react': 0.9.0(@internationalized/date@3.4.0)(react-dom@18.2.0)(react@18.2.0) '@astrojs/react': 2.2.1(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0) - '@pandacss/config': 0.11.1 - '@pandacss/logger': 0.11.1 - '@pandacss/node': 0.11.1(typescript@5.1.6) - '@pandacss/shared': 0.11.1 - '@pandacss/token-dictionary': 0.11.1 - '@pandacss/types': 0.11.1 + '@pandacss/config': 0.16.0 + '@pandacss/logger': 0.16.0 + '@pandacss/node': 0.16.0(typescript@5.1.6) + '@pandacss/shared': 0.16.0 + '@pandacss/token-dictionary': 0.16.0 + '@pandacss/types': 0.16.0 astro: 2.9.6(@types/node@20.5.1) javascript-stringify: 2.1.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - vite: 4.4.8(@types/node@20.5.1) + vite: 4.4.11(@types/node@20.5.1) transitivePeerDependencies: - '@internationalized/date' - '@types/node' @@ -1286,16 +1305,16 @@ packages: - typescript dev: true - /@pandacss/token-dictionary@0.11.1: - resolution: {integrity: sha512-eQqAHScC7qH55iOY+JOTGl7D+Xfng0iiA60DIHVa8Q4YY6izeB90JTJ6vUIupwiQ5lX2P7Gm9X8v4bnIjOydDQ==} + /@pandacss/token-dictionary@0.16.0: + resolution: {integrity: sha512-nEYi0k8TFaG+mNTmaeMHYEOaf4X/cUTDw2QL7Y0Wey6jQKwqa5yzikKuUBu03B6r8evbUuZQNfQ81ZD9p+jdyg==} dependencies: - '@pandacss/shared': 0.11.1 - '@pandacss/types': 0.11.1 - ts-pattern: 5.0.4 + '@pandacss/shared': 0.16.0 + '@pandacss/types': 0.16.0 + ts-pattern: 5.0.5 dev: true - /@pandacss/types@0.11.1: - resolution: {integrity: sha512-h/wOIO+YEapnNIFYMpS3hYXWH0DlqB+OivrADYtapOf2Y4sFg3ReyQdkwRKQ4ZWIfJKH8jEXd/xTvMQhvZ3arw==} + /@pandacss/types@0.16.0: + resolution: {integrity: sha512-CjKLutg6Hb/lWSSm85fEGZmdlFJZtYjhJbHQ7Iiicb5V4KK3J6XbxHIghGpHhsoUR4OzGizmIK6/rc2ae+MVyA==} dev: true /@pkgr/utils@2.4.2: @@ -1975,7 +1994,7 @@ packages: '@vue/shared': 3.3.4 estree-walker: 2.0.2 magic-string: 0.30.3 - postcss: 8.4.27 + postcss: 8.4.28 source-map-js: 1.0.2 dev: true @@ -2764,8 +2783,8 @@ packages: typescript: 5.1.6 unist-util-visit: 4.1.2 vfile: 5.3.7 - vite: 4.4.8(@types/node@20.5.1) - vitefu: 0.2.4(vite@4.4.8) + vite: 4.4.11(@types/node@20.5.1) + vitefu: 0.2.4(vite@4.4.11) which-pm: 2.0.0 yargs-parser: 21.1.1 zod: 3.21.4 @@ -5555,6 +5574,16 @@ packages: postcss-selector-parser: 6.0.13 dev: true + /postcss-minify-selectors@6.0.0(postcss@8.4.27): + resolution: {integrity: sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==} + engines: {node: ^14 || ^16 || >=18.0} + peerDependencies: + postcss: ^8.2.15 + dependencies: + postcss: 8.4.27 + postcss-selector-parser: 6.0.13 + dev: true + /postcss-nested@6.0.1(postcss@8.4.27): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -6330,8 +6359,8 @@ packages: code-block-writer: 12.0.0 dev: true - /ts-pattern@5.0.4: - resolution: {integrity: sha512-D5iVliqugv2C9541W2CNXFYNEZxr4TiHuLPuf49tKEdQFp/8y8fR0v1RExUvXkiWozKCwE7zv07C6EKxf0lKuQ==} + /ts-pattern@5.0.5: + resolution: {integrity: sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA==} dev: true /tsconfck@2.1.2(typescript@5.1.6): @@ -6435,6 +6464,12 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typescript@5.2.2: + resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + /ufo@1.2.0: resolution: {integrity: sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==} dev: true @@ -6616,8 +6651,8 @@ packages: vfile-message: 3.1.4 dev: true - /vite@4.4.8(@types/node@20.5.1): - resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==} + /vite@4.4.11(@types/node@20.5.1): + resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -6652,7 +6687,7 @@ packages: fsevents: 2.3.2 dev: true - /vitefu@0.2.4(vite@4.4.8): + /vitefu@0.2.4(vite@4.4.11): resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==} peerDependencies: vite: ^3.0.0 || ^4.0.0 @@ -6660,7 +6695,7 @@ packages: vite: optional: true dependencies: - vite: 4.4.8(@types/node@20.5.1) + vite: 4.4.11(@types/node@20.5.1) dev: true /vscode-css-languageservice@6.2.6: diff --git a/src/app/dash/destinations/discord/page.tsx b/src/app/dash/destinations/discord/page.tsx index cf02c97..9540c85 100644 --- a/src/app/dash/destinations/discord/page.tsx +++ b/src/app/dash/destinations/discord/page.tsx @@ -16,6 +16,12 @@ const SetUpChildren = styled("div", { }, }); +const channelNames = ["message-renderer", "hookla", "github-notifications"]; +const selectOptions = channelNames.map((name) => ({ + label: name, + value: name, +})); + function DiscordDestination() { const [isAuthed, setIsAuthed] = useState(false); @@ -30,11 +36,7 @@ function DiscordDestination() { logoUrl="/logo-discord.svg" > - diff --git a/src/app/dash/settings/page.tsx b/src/app/dash/settings/page.tsx index c5417ad..a3ff1c9 100644 --- a/src/app/dash/settings/page.tsx +++ b/src/app/dash/settings/page.tsx @@ -1,4 +1,6 @@ import { PageHeader } from "@/components/Dash/PageHeader"; +import React from "react"; +import { TextInput } from "@/components/common/TextInput"; function Settings() { return ( @@ -7,6 +9,7 @@ function Settings() { title="Settings" subtitle="Configure generic settings for your webhook." /> + ); } diff --git a/src/components/Dash/DestinationOrProvider/styles.ts b/src/components/Dash/DestinationOrProvider/styles.ts index aacc9d0..bc0d6d4 100644 --- a/src/components/Dash/DestinationOrProvider/styles.ts +++ b/src/components/Dash/DestinationOrProvider/styles.ts @@ -5,15 +5,18 @@ export const Container = styled(Link, { base: { border: "1px solid token(colors.neutral.300)", borderRadius: "lg", - backgroundColor: "neutral.0", + backgroundColor: "input.bg", overflow: "hidden", display: "flex", flexDirection: "column", padding: "8", - color: "neutral.900", alignItems: "center", gap: "4", cursor: "pointer", + + _hover: { + borderColor: "borders.hover", + }, }, }); @@ -32,6 +35,7 @@ export const LogoContainer = styled("div", { export const BrandName = styled("p", { base: { textStyle: "normal", + color: "text.primary", }, }); @@ -61,5 +65,6 @@ export const ContentText = styled("p", { maxWidth: "60%", textWrap: "wrap", textAlign: "center", + color: "text.primary", }, }); diff --git a/src/components/Dash/PageHeader/styles.ts b/src/components/Dash/PageHeader/styles.ts index ae3bd83..89dc887 100644 --- a/src/components/Dash/PageHeader/styles.ts +++ b/src/components/Dash/PageHeader/styles.ts @@ -21,11 +21,11 @@ export const TextContainer = styled("div", { export const Title = styled("p", { base: { fontSize: "2xl", - color: "neutral.900", display: "flex", flexDirection: "row", gap: "3", fontWeight: "500", + color: "text.primary", }, variants: { hasBackButton: { @@ -41,7 +41,7 @@ export const Title = styled("p", { export const Subtitle = styled("p", { base: { - color: "neutral.700", + color: "text.secondary", fontSize: "md", }, }); diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts index 42b9dcc..604d3de 100644 --- a/src/components/Dash/Select/styles.ts +++ b/src/components/Dash/Select/styles.ts @@ -15,11 +15,11 @@ export const Trigger = styled(Select.Trigger, { alignItems: "center", padding: "3", minWidth: "250px", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + inputBorder: true, + borderRadius: "input", gap: "2", cursor: "pointer", - backgroundColor: "neutral.0", + backgroundColor: "input.bg", }, }); @@ -36,8 +36,9 @@ export const Content = styled(Select.Content, { colorPalette: "neutral", backgroundColor: "neutral.100", width: "100%", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + border: "1px solid token(colors.borders.normal)", + borderRadius: "input", + gap: "2", padding: "2", zIndex: "popup", boxShadow: "md", diff --git a/src/components/Dash/Sidebar/styles.ts b/src/components/Dash/Sidebar/styles.ts index dbf8edd..e5fb3c3 100644 --- a/src/components/Dash/Sidebar/styles.ts +++ b/src/components/Dash/Sidebar/styles.ts @@ -14,7 +14,7 @@ export const Section = styled("div", {}); export const Label = styled("p", { base: { - color: "neutral.600", + color: "text.secondary", fontSize: "sm", marginBottom: "2", }, @@ -33,7 +33,7 @@ export const NavLink = styled(Link, { padding: "4", borderRadius: "lg", border: "1px solid token(colors.neutral.300)", - backgroundColor: "neutral.0", + backgroundColor: "input.bg", display: "flex", alignItems: "center", flexDirection: "row", @@ -45,6 +45,7 @@ export const NavLink = styled(Link, { backgroundRepeat: "no-repeat", backgroundPosition: "right token(spacing.4) center", userSelect: "none", + color: "text.primary", _hover: { boxShadow: "md", diff --git a/src/components/Dash/WebhookSelect/styles.ts b/src/components/Dash/WebhookSelect/styles.ts index 3986fc0..4821d78 100644 --- a/src/components/Dash/WebhookSelect/styles.ts +++ b/src/components/Dash/WebhookSelect/styles.ts @@ -16,11 +16,11 @@ export const Trigger = styled(Select.Trigger, { alignItems: "center", padding: "4", minWidth: "250px", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + inputBorder: true, gap: "2", cursor: "pointer", - backgroundColor: "neutral.0", + backgroundColor: "input.bg", + color: "text.primary", }, }); @@ -49,11 +49,12 @@ export const Content = styled(Select.Content, { colorPalette: "neutral", backgroundColor: "neutral.100", width: "100%", - border: "1px solid token(colors.neutral.400)", - borderRadius: "lg", + border: "1px solid token(colors.borders.normal)", + borderRadius: "input", padding: "2", zIndex: "popup", boxShadow: "md", + color: "text.primary", }, }); diff --git a/src/components/common/BackButton/styles.ts b/src/components/common/BackButton/styles.ts index 81a62b6..302f6c3 100644 --- a/src/components/common/BackButton/styles.ts +++ b/src/components/common/BackButton/styles.ts @@ -10,12 +10,12 @@ export const BackButton = styled(Link, { borderRadius: "full", width: "40px", height: "40px", - backgroundColor: "neutral.0", + backgroundColor: "input.bg", backgroundPosition: "center center", backgroundRepeat: "no-repeat", backgroundSize: "60%", cursor: "pointer", - transition: "border-color 300ms", + transition: "border-color token(durations.fast)", "&:hover": { borderColor: "neutral.900", diff --git a/src/components/common/Navbar/styles.ts b/src/components/common/Navbar/styles.ts index 1b18505..7880c86 100644 --- a/src/components/common/Navbar/styles.ts +++ b/src/components/common/Navbar/styles.ts @@ -53,6 +53,7 @@ export const LogoText = styled("div", { export const Title = styled("h1", { base: { textStyle: "normal", + color: "text.primary", }, }); @@ -95,6 +96,7 @@ export const UserText = styled("div", { export const WelcomeUsername = styled("p", { base: { textStyle: "normal", + color: "text.primary", }, }); diff --git a/src/components/common/SearchDocumentation/styles.ts b/src/components/common/SearchDocumentation/styles.ts index 5b6a06e..45c1616 100644 --- a/src/components/common/SearchDocumentation/styles.ts +++ b/src/components/common/SearchDocumentation/styles.ts @@ -4,20 +4,19 @@ export const SearchDocumentation = styled("input", { base: { padding: "token(spacing.4) token(spacing.4) token(spacing.4) token(spacing.10)", - borderRadius: "lg", - borderWidth: "1px", - borderColor: "neutral.500", + inputBorder: true, boxSizing: "border-box", - backgroundColor: "neutral.100", + backgroundColor: "input.bg", fontSize: "sm", lineHeight: "1", backgroundImage: "url('/search.svg')", backgroundRepeat: "no-repeat", backgroundPosition: "token(spacing.4) center", outline: "none", + color: "text.primary", _placeholder: { - color: "neutral.500", + color: "input.placeholder", }, }, }); diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx new file mode 100644 index 0000000..8c59485 --- /dev/null +++ b/src/components/common/TextInput/index.tsx @@ -0,0 +1,8 @@ +import * as Styles from "./styles"; +import { ComponentPropsWithRef } from "react"; + +interface Props extends ComponentPropsWithRef<"input"> {} + +export function TextInput({ ...rest }: Props) { + return ; +} diff --git a/src/components/common/TextInput/styles.ts b/src/components/common/TextInput/styles.ts new file mode 100644 index 0000000..2b9c568 --- /dev/null +++ b/src/components/common/TextInput/styles.ts @@ -0,0 +1,13 @@ +import { styled } from "panda/jsx"; + +export const Input = styled("input", { + base: { + backgroundColor: "input.bg", + inputBorder: true, + padding: "token(spacing.2) token(spacing.4)", + + _placeholder: { + color: "input.placeholder", + }, + }, +}); From df516ecf4d78f0c01f50f2bdc2dd330572c3f3bd Mon Sep 17 00:00:00 2001 From: Tuur Martens Date: Sun, 15 Oct 2023 14:14:33 +0200 Subject: [PATCH 4/4] finish implementation --- panda.config.ts | 45 +++++++++++++++--- public/edit.svg | 3 ++ public/person.svg | 3 ++ src/app/dash/destinations/discord/page.tsx | 20 ++++---- src/app/dash/destinations/page.tsx | 11 ++--- src/app/dash/embed-builder/page.tsx | 2 +- src/app/dash/layout.tsx | 27 ++++++++++- src/app/dash/providers/github/page.tsx | 22 +++------ src/app/dash/providers/page.tsx | 11 ++--- src/app/dash/settings/page.tsx | 4 +- src/app/page.tsx | 6 +-- src/app/teams/layout.tsx | 38 +++++++++++++++ src/app/teams/page.tsx | 5 ++ src/app/teams/settings/page.tsx | 18 +++++++ src/app/teams/users/page.tsx | 47 +++++++++++++++++++ src/components/Dash/ConnectAccount/index.tsx | 2 +- .../index.tsx | 18 +++---- .../styles.ts | 23 ++++++--- src/components/Dash/MainContainer/styles.ts | 11 ++--- src/components/Dash/Select/index.tsx | 37 ++++++++++----- src/components/Dash/Select/styles.ts | 27 +++++++---- src/components/Dash/SetUp/index.tsx | 2 +- src/components/Dash/Sidebar/index.tsx | 35 +++++--------- src/components/Dash/Sidebar/styles.ts | 11 ++--- src/components/Dash/WebhookSelect/styles.ts | 12 ++--- src/components/{home => Home}/Hero/index.tsx | 2 +- src/components/{home => Home}/Hero/styles.ts | 6 +-- .../{home => Home}/NotificationList/index.tsx | 0 .../{home => Home}/NotificationList/styles.ts | 3 +- .../{home => Home}/Submit/index.tsx | 2 +- .../{home => Home}/Submit/styles.ts | 6 +-- .../{home => Home}/WebhookInput/index.tsx | 0 .../{home => Home}/WebhookInput/styles.ts | 0 src/components/Teams/TeamMember/index.tsx | 40 ++++++++++++++++ src/components/Teams/TeamMember/styles.ts | 26 ++++++++++ src/components/common/Button/styles.ts | 9 +++- src/components/common/Navbar/styles.ts | 17 +++---- src/components/common/Notification/styles.ts | 6 +-- src/components/common/PageFooter/index.tsx | 1 + src/components/common/PageFooter/styles.ts | 9 ++++ .../{Dash => common}/PageHeader/index.tsx | 2 +- .../{Dash => common}/PageHeader/styles.ts | 16 +++++-- src/components/common/Route/styles.ts | 6 +-- src/components/common/RouteList/styles.ts | 15 ++---- src/components/common/TextInput/index.tsx | 13 +++-- src/components/common/TextInput/styles.ts | 8 ++++ 46 files changed, 439 insertions(+), 188 deletions(-) create mode 100644 public/edit.svg create mode 100644 public/person.svg create mode 100644 src/app/teams/layout.tsx create mode 100644 src/app/teams/page.tsx create mode 100644 src/app/teams/settings/page.tsx create mode 100644 src/app/teams/users/page.tsx rename src/components/Dash/{DestinationOrProvider => GraphNode}/index.tsx (78%) rename src/components/Dash/{DestinationOrProvider => GraphNode}/styles.ts (79%) rename src/components/{home => Home}/Hero/index.tsx (89%) rename src/components/{home => Home}/Hero/styles.ts (88%) rename src/components/{home => Home}/NotificationList/index.tsx (100%) rename src/components/{home => Home}/NotificationList/styles.ts (95%) rename src/components/{home => Home}/Submit/index.tsx (90%) rename src/components/{home => Home}/Submit/styles.ts (87%) rename src/components/{home => Home}/WebhookInput/index.tsx (100%) rename src/components/{home => Home}/WebhookInput/styles.ts (100%) create mode 100644 src/components/Teams/TeamMember/index.tsx create mode 100644 src/components/Teams/TeamMember/styles.ts create mode 100644 src/components/common/PageFooter/index.tsx create mode 100644 src/components/common/PageFooter/styles.ts rename src/components/{Dash => common}/PageHeader/index.tsx (93%) rename src/components/{Dash => common}/PageHeader/styles.ts (80%) diff --git a/panda.config.ts b/panda.config.ts index 88112e9..3a5dd27 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -17,6 +17,36 @@ export default defineConfig({ jsxStyleProps: "none", utilities: { + displayFlex: { + className: "flex", + values: ["column", "row", "start"], + transform(value) { + return { + display: "flex", + flexDirection: value, + }; + }, + }, + paddingX: { + className: "padding-x", + values: "spacing", + transform(value: string) { + return { + paddingLeft: value, + paddingRight: value, + }; + }, + }, + paddingY: { + className: "padding-y", + values: "spacing", + transform(value: string) { + return { + paddingTop: value, + paddingBottom: value, + }; + }, + }, inputBorder: { className: "input-border", values: { type: "boolean" }, @@ -31,12 +61,14 @@ export default defineConfig({ outline: "none", transition: `border-color ${token("durations.fast")}`, - "&:hover:not(:focus)": { - borderColor: token("colors.borders.hover"), - }, + "&:not([disabled])": { + "&:hover:not(:focus)": { + borderColor: token("colors.borders.hover"), + }, - "&:focus": { - borderColor: token("colors.borders.focus"), + "&:focus": { + borderColor: token("colors.borders.focus"), + }, }, }; }, @@ -57,7 +89,7 @@ export default defineConfig({ button: { description: "Button text", value: { - fontSize: "md", + fontSize: "sm", lineHeight: "1.2", fontWeight: "500", }, @@ -113,6 +145,7 @@ export default defineConfig({ }, buttons: { primary: { value: "#7A97FF" }, + danger: { value: "#FF6868" }, }, input: { bg: { diff --git a/public/edit.svg b/public/edit.svg new file mode 100644 index 0000000..752b3e6 --- /dev/null +++ b/public/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/person.svg b/public/person.svg new file mode 100644 index 0000000..e199275 --- /dev/null +++ b/public/person.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dash/destinations/discord/page.tsx b/src/app/dash/destinations/discord/page.tsx index 9540c85..f0931b1 100644 --- a/src/app/dash/destinations/discord/page.tsx +++ b/src/app/dash/destinations/discord/page.tsx @@ -1,20 +1,12 @@ "use client"; -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; import { ConnectAccount } from "@/components/Dash/ConnectAccount"; import { useCallback, useState } from "react"; import { SetUp } from "@/components/Dash/SetUp"; -import { Select } from "@/components/Dash/Select"; +import { Option, Select } from "@/components/Dash/Select"; import { Button } from "@/components/common/Button"; -import { styled } from "panda/jsx"; - -const SetUpChildren = styled("div", { - base: { - display: "flex", - flexDirection: "row", - gap: "4", - }, -}); +import { SetUpChildren } from "@/components/Dash/GraphNode"; const channelNames = ["message-renderer", "hookla", "github-notifications"]; const selectOptions = channelNames.map((name) => ({ @@ -36,7 +28,11 @@ function DiscordDestination() { logoUrl="/logo-discord.svg" > - + {selectOptions.map(({ label, value }) => ( + diff --git a/src/app/dash/destinations/page.tsx b/src/app/dash/destinations/page.tsx index d8816cc..e07c15b 100644 --- a/src/app/dash/destinations/page.tsx +++ b/src/app/dash/destinations/page.tsx @@ -1,8 +1,5 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; -import { - DestOrProviderList, - DiscordDestination, -} from "@/components/Dash/DestinationOrProvider"; +import { PageHeader } from "@/components/common/PageHeader"; +import { GraphNodeList, DiscordDestination } from "@/components/Dash/GraphNode"; function Destinations() { return ( @@ -11,9 +8,9 @@ function Destinations() { title="Destinations" subtitle="Define your destinations for the WidgetBot webhook here." /> - + - + ); } diff --git a/src/app/dash/embed-builder/page.tsx b/src/app/dash/embed-builder/page.tsx index 3924cef..bb96659 100644 --- a/src/app/dash/embed-builder/page.tsx +++ b/src/app/dash/embed-builder/page.tsx @@ -1,4 +1,4 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; function EmbedBuilder() { return ( diff --git a/src/app/dash/layout.tsx b/src/app/dash/layout.tsx index 08a6db2..1133d10 100644 --- a/src/app/dash/layout.tsx +++ b/src/app/dash/layout.tsx @@ -4,7 +4,7 @@ import { MainContent, PageContent, } from "@/components/Dash/MainContainer"; -import { Sidebar } from "@/components/Dash/Sidebar"; +import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar"; import React from "react"; interface Props { @@ -12,10 +12,33 @@ interface Props { } function DashLayout({ children }: Props) { + const links: Array = [ + { + href: "/dash/providers", + label: "Providers", + icon: "/providers.svg", + }, + { + href: "/dash/destinations", + label: "Destinations", + icon: "/destinations.svg", + }, + { + href: "/dash/embed-builder", + label: "Embed Builder", + icon: "/embed.svg", + }, + { + href: "/dash/settings", + label: "Settings", + icon: "/settings.svg", + }, + ]; + return ( - + {children} diff --git a/src/app/dash/providers/github/page.tsx b/src/app/dash/providers/github/page.tsx index 4582d2f..a0d44ee 100644 --- a/src/app/dash/providers/github/page.tsx +++ b/src/app/dash/providers/github/page.tsx @@ -1,20 +1,12 @@ "use client"; -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; import { ConnectAccount } from "@/components/Dash/ConnectAccount"; import { useCallback, useState } from "react"; import { SetUp } from "@/components/Dash/SetUp"; -import { Select } from "@/components/Dash/Select"; +import { Option, Select } from "@/components/Dash/Select"; import { Button } from "@/components/common/Button"; -import { styled } from "panda/jsx"; - -const SetUpChildren = styled("div", { - base: { - display: "flex", - flexDirection: "row", - gap: "4", - }, -}); +import { SetUpChildren } from "@/components/Dash/GraphNode"; function GitHubProvider() { const [isAuthed, setIsAuthed] = useState(false); @@ -30,11 +22,9 @@ function GitHubProvider() { logoUrl="/logo-github.svg" > - + diff --git a/src/app/dash/providers/page.tsx b/src/app/dash/providers/page.tsx index 4637b0a..f475fc3 100644 --- a/src/app/dash/providers/page.tsx +++ b/src/app/dash/providers/page.tsx @@ -1,8 +1,5 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; -import { - DestOrProviderList, - GithubProvider, -} from "@/components/Dash/DestinationOrProvider"; +import { PageHeader } from "@/components/common/PageHeader"; +import { GraphNodeList, GithubProvider } from "@/components/Dash/GraphNode"; function Providers() { return ( @@ -11,9 +8,9 @@ function Providers() { title="Providers" subtitle="Define your providers for the WidgetBot webhook here." /> - + - + ); } diff --git a/src/app/dash/settings/page.tsx b/src/app/dash/settings/page.tsx index a3ff1c9..12d788f 100644 --- a/src/app/dash/settings/page.tsx +++ b/src/app/dash/settings/page.tsx @@ -1,4 +1,4 @@ -import { PageHeader } from "@/components/Dash/PageHeader"; +import { PageHeader } from "@/components/common/PageHeader"; import React from "react"; import { TextInput } from "@/components/common/TextInput"; @@ -9,7 +9,7 @@ function Settings() { title="Settings" subtitle="Configure generic settings for your webhook." /> - + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 35d2c01..a1bceca 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ -import { Hero } from "@/components/home/Hero"; -import { WebhookInputSection } from "@/components/home/WebhookInput"; +import { Hero } from "@/components/Home/Hero"; +import { WebhookInputSection } from "@/components/Home/WebhookInput"; import { RouteList } from "@/components/common/RouteList"; -import { Submit } from "@/components/home/Submit"; +import { Submit } from "@/components/Home/Submit"; export default function Home() { return ( diff --git a/src/app/teams/layout.tsx b/src/app/teams/layout.tsx new file mode 100644 index 0000000..de1647b --- /dev/null +++ b/src/app/teams/layout.tsx @@ -0,0 +1,38 @@ +import type { ReactNode } from "react"; +import { + MainContainer, + MainContent, + PageContent, +} from "@/components/Dash/MainContainer"; +import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar"; +import React from "react"; + +interface Props { + children: ReactNode; +} + +function TeamsLayout({ children }: Props) { + const links: Array = [ + { + label: "Users", + href: "/teams/users", + icon: "/person.svg", + }, + { + label: "Settings", + href: "/teams/settings", + icon: "/settings.svg", + }, + ]; + + return ( + + + + {children} + + + ); +} + +export default TeamsLayout; diff --git a/src/app/teams/page.tsx b/src/app/teams/page.tsx new file mode 100644 index 0000000..e7a954d --- /dev/null +++ b/src/app/teams/page.tsx @@ -0,0 +1,5 @@ +function Teams() { + return null; +} + +export default Teams; diff --git a/src/app/teams/settings/page.tsx b/src/app/teams/settings/page.tsx new file mode 100644 index 0000000..3cf4fb4 --- /dev/null +++ b/src/app/teams/settings/page.tsx @@ -0,0 +1,18 @@ +import { PageHeader } from "@/components/common/PageHeader"; +import { TextInput } from "@/components/common/TextInput"; +import { Button } from "@/components/common/Button"; +import { PageFooter } from "@/components/common/PageFooter"; + +function Settings() { + return ( + <> + + + + + + + ); +} + +export default Settings; diff --git a/src/app/teams/users/page.tsx b/src/app/teams/users/page.tsx new file mode 100644 index 0000000..ff3256e --- /dev/null +++ b/src/app/teams/users/page.tsx @@ -0,0 +1,47 @@ +import { PageHeader } from "@/components/common/PageHeader"; +import { TextInput } from "@/components/common/TextInput"; +import { TeamMember, TeamRole } from "@/components/Teams/TeamMember"; +import { styled } from "panda/jsx"; + +const List = styled("ul", { + base: { + displayFlex: "column", + gap: "2", + marginTop: "4", + }, +}); + +function Users() { + const members: Array = [ + { + email: "john.doe@example.com", + role: TeamRole.Owner, + }, + { + email: "sus@mog.us", + role: TeamRole.Admin, + }, + { + email: "johny@roingus.dev", + role: TeamRole.Member, + }, + ]; + + return ( + <> + + + + {members.map((member) => ( + + ))} + + + ); +} + +export default Users; diff --git a/src/components/Dash/ConnectAccount/index.tsx b/src/components/Dash/ConnectAccount/index.tsx index d1e7a9b..5c31f81 100644 --- a/src/components/Dash/ConnectAccount/index.tsx +++ b/src/components/Dash/ConnectAccount/index.tsx @@ -1,4 +1,4 @@ -import * as ContentStyles from "../DestinationOrProvider"; +import * as ContentStyles from "../GraphNode"; import { Button } from "@/components/common/Button"; import Image from "next/image"; diff --git a/src/components/Dash/DestinationOrProvider/index.tsx b/src/components/Dash/GraphNode/index.tsx similarity index 78% rename from src/components/Dash/DestinationOrProvider/index.tsx rename to src/components/Dash/GraphNode/index.tsx index 5e8a0ed..97945f7 100644 --- a/src/components/Dash/DestinationOrProvider/index.tsx +++ b/src/components/Dash/GraphNode/index.tsx @@ -3,7 +3,12 @@ import * as Styles from "./styles"; import Image from "next/image"; -export { DestOrProviderList, ContentContainer, ContentText } from "./styles"; +export { + GraphNodeList, + ContentContainer, + ContentText, + SetUpChildren, +} from "./styles"; interface Props { brandName: string; @@ -12,12 +17,7 @@ interface Props { group: "destinations" | "providers"; } -export function DestinationOrProvider({ - brandName, - logoUrl, - destination, - group, -}: Props) { +export function GraphNode({ brandName, logoUrl, destination, group }: Props) { return ( @@ -30,7 +30,7 @@ export function DestinationOrProvider({ export function GithubProvider() { return ( - + {label} + + ); +} interface Props { - options: Array<{ label: string; value: string }>; value?: string; + children: ReactNode; + onSelect?(value: string): void; + disabled?: boolean; + size?: "sm" | "md"; } -export function Select({ options, value }: Props) { +export function Select({ value, children, onSelect, disabled, size }: Props) { return ( - - + + - - {options.map(({ label, value }) => ( - - {label} - - ))} - + {children} diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts index 604d3de..39ddd2b 100644 --- a/src/components/Dash/Select/styles.ts +++ b/src/components/Dash/Select/styles.ts @@ -10,17 +10,30 @@ export const Container = styled("div", { export const Trigger = styled(Select.Trigger, { base: { colorPalette: "neutral", - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", - padding: "3", - minWidth: "250px", + minWidth: "200px", inputBorder: true, borderRadius: "input", gap: "2", cursor: "pointer", backgroundColor: "input.bg", }, + variants: { + size: { + sm: { + paddingY: "1", + paddingLeft: "3", + paddingRight: "2", + }, + md: { + padding: "3", + }, + }, + }, + defaultVariants: { + size: "md", + }, }); export const Caret = styled(Select.Icon, { @@ -47,16 +60,14 @@ export const Content = styled(Select.Content, { export const Viewport = styled(Select.Viewport, { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); export const Item = styled(Select.SelectItem, { base: { - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", padding: "4", gap: "2", diff --git a/src/components/Dash/SetUp/index.tsx b/src/components/Dash/SetUp/index.tsx index 8b5d034..ef0a0a0 100644 --- a/src/components/Dash/SetUp/index.tsx +++ b/src/components/Dash/SetUp/index.tsx @@ -1,4 +1,4 @@ -import * as ContentStyles from "@/components/Dash/DestinationOrProvider"; +import * as ContentStyles from "../GraphNode"; import Image from "next/image"; import { ReactNode } from "react"; diff --git a/src/components/Dash/Sidebar/index.tsx b/src/components/Dash/Sidebar/index.tsx index b9cd7e3..b705432 100644 --- a/src/components/Dash/Sidebar/index.tsx +++ b/src/components/Dash/Sidebar/index.tsx @@ -23,31 +23,18 @@ function SidebarLink({ href, children, iconUrl, isActive }: SidebarLinkProps) { ); } -export function Sidebar() { - const pathname = usePathname(); +export interface SidebarLink { + href: string; + label: string; + icon: `/${string}`; +} - const links = [ - { - href: "/dash/providers", - label: "Providers", - icon: "/providers.svg", - }, - { - href: "/dash/destinations", - label: "Destinations", - icon: "/destinations.svg", - }, - { - href: "/dash/embed-builder", - label: "Embed Builder", - icon: "/embed.svg", - }, - { - href: "/dash/settings", - label: "Settings", - icon: "/settings.svg", - }, - ]; +interface Props { + links: Array; +} + +export function Sidebar({ links }: Props) { + const pathname = usePathname(); return ( diff --git a/src/components/Dash/Sidebar/styles.ts b/src/components/Dash/Sidebar/styles.ts index e5fb3c3..e0cfabd 100644 --- a/src/components/Dash/Sidebar/styles.ts +++ b/src/components/Dash/Sidebar/styles.ts @@ -4,8 +4,7 @@ import Link from "next/link"; export const Sidebar = styled(Panel, { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "6", }, }); @@ -22,21 +21,19 @@ export const Label = styled("p", { export const Nav = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); export const NavLink = styled(Link, { base: { - padding: "4", + padding: "token(spacing.4) 64px token(spacing.4) token(spacing.4)", borderRadius: "lg", border: "1px solid token(colors.neutral.300)", backgroundColor: "input.bg", - display: "flex", + displayFlex: "row", alignItems: "center", - flexDirection: "row", gap: "2", colorPalette: "neutral", transition: diff --git a/src/components/Dash/WebhookSelect/styles.ts b/src/components/Dash/WebhookSelect/styles.ts index 4821d78..2a01426 100644 --- a/src/components/Dash/WebhookSelect/styles.ts +++ b/src/components/Dash/WebhookSelect/styles.ts @@ -11,11 +11,11 @@ export const Container = styled("div", { export const Trigger = styled(Select.Trigger, { base: { colorPalette: "neutral", - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", padding: "4", - minWidth: "250px", + minWidth: "200px", + width: "100%", inputBorder: true, gap: "2", cursor: "pointer", @@ -60,8 +60,7 @@ export const Content = styled(Select.Content, { export const Viewport = styled(Select.Viewport, { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); @@ -73,8 +72,7 @@ export const Arrow = css({ export const Item = styled(Select.SelectItem, { base: { - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", padding: "4", gap: "2", diff --git a/src/components/home/Hero/index.tsx b/src/components/Home/Hero/index.tsx similarity index 89% rename from src/components/home/Hero/index.tsx rename to src/components/Home/Hero/index.tsx index 7eeff41..cc6957a 100644 --- a/src/components/home/Hero/index.tsx +++ b/src/components/Home/Hero/index.tsx @@ -1,4 +1,4 @@ -import { NotificationList } from "@/components/home/NotificationList"; +import { NotificationList } from "@/components/Home/NotificationList"; import * as Styles from "./styles"; import { css } from "panda/css"; diff --git a/src/components/home/Hero/styles.ts b/src/components/Home/Hero/styles.ts similarity index 88% rename from src/components/home/Hero/styles.ts rename to src/components/Home/Hero/styles.ts index 1b27e22..5325bbd 100644 --- a/src/components/home/Hero/styles.ts +++ b/src/components/Home/Hero/styles.ts @@ -2,10 +2,9 @@ import { styled } from "panda/jsx"; export const HeroContainer = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", height: "700px", - flexDirection: "row", justifyContent: "center", backgroundColor: "colorPalette.500", backgroundImage: "url(/graph.svg)", @@ -14,8 +13,7 @@ export const HeroContainer = styled("section", { export const HeroContent = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "center", maxWidth: "homeMaxWidth", diff --git a/src/components/home/NotificationList/index.tsx b/src/components/Home/NotificationList/index.tsx similarity index 100% rename from src/components/home/NotificationList/index.tsx rename to src/components/Home/NotificationList/index.tsx diff --git a/src/components/home/NotificationList/styles.ts b/src/components/Home/NotificationList/styles.ts similarity index 95% rename from src/components/home/NotificationList/styles.ts rename to src/components/Home/NotificationList/styles.ts index 2d7a5dd..7ce3897 100644 --- a/src/components/home/NotificationList/styles.ts +++ b/src/components/Home/NotificationList/styles.ts @@ -59,8 +59,7 @@ export const NotificationListContainer = styled("div", { export const NotificationList = styled("ul", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "4", translate: "0 -10%", }, diff --git a/src/components/home/Submit/index.tsx b/src/components/Home/Submit/index.tsx similarity index 90% rename from src/components/home/Submit/index.tsx rename to src/components/Home/Submit/index.tsx index 1300a9e..3b6635e 100644 --- a/src/components/home/Submit/index.tsx +++ b/src/components/Home/Submit/index.tsx @@ -1,4 +1,4 @@ -import * as Styles from "@/components/home/Submit/styles"; +import * as Styles from "@/components/Home/Submit/styles"; import { token } from "panda/tokens"; import { Button } from "@/components/common/Button"; diff --git a/src/components/home/Submit/styles.ts b/src/components/Home/Submit/styles.ts similarity index 87% rename from src/components/home/Submit/styles.ts rename to src/components/Home/Submit/styles.ts index de3db9d..eb892f0 100644 --- a/src/components/home/Submit/styles.ts +++ b/src/components/Home/Submit/styles.ts @@ -3,9 +3,8 @@ import { styled } from "panda/jsx"; export const SubmitSection = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", - flexDirection: "row", justifyContent: "center", }, }); @@ -21,8 +20,7 @@ export const SubmitBoxContainer = styled("div", { export const SubmitBox = styled(Box, { base: { padding: "8", - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", alignItems: "flex-start", diff --git a/src/components/home/WebhookInput/index.tsx b/src/components/Home/WebhookInput/index.tsx similarity index 100% rename from src/components/home/WebhookInput/index.tsx rename to src/components/Home/WebhookInput/index.tsx diff --git a/src/components/home/WebhookInput/styles.ts b/src/components/Home/WebhookInput/styles.ts similarity index 100% rename from src/components/home/WebhookInput/styles.ts rename to src/components/Home/WebhookInput/styles.ts diff --git a/src/components/Teams/TeamMember/index.tsx b/src/components/Teams/TeamMember/index.tsx new file mode 100644 index 0000000..19943c4 --- /dev/null +++ b/src/components/Teams/TeamMember/index.tsx @@ -0,0 +1,40 @@ +import * as Styles from "./styles"; +import { Option, Select } from "@/components/Dash/Select"; +import { Button } from "@/components/common/Button"; + +export enum TeamRole { + Owner, + Admin, + Member, +} + +export interface TeamMember { + email: string; + role: TeamRole; +} + +interface Props { + member: TeamMember; +} + +export function TeamMember({ member }: Props) { + return ( + + {member.email} + + + + + + ); +} diff --git a/src/components/Teams/TeamMember/styles.ts b/src/components/Teams/TeamMember/styles.ts new file mode 100644 index 0000000..e3dcb82 --- /dev/null +++ b/src/components/Teams/TeamMember/styles.ts @@ -0,0 +1,26 @@ +import { styled } from "panda/jsx"; + +export const TeamMember = styled("li", { + base: { + inputBorder: true, + listStyle: "none", + paddingX: "8", + paddingY: "4", + backgroundColor: "input.bg", + displayFlex: "column", + justifyContent: "space-between", + alignItems: "center", + gap: "2", + + md: { + flexDirection: "row", + }, + }, +}); + +export const Controls = styled("div", { + base: { + displayFlex: "row", + gap: "2", + }, +}); diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts index f5d0ddc..8717d31 100644 --- a/src/components/common/Button/styles.ts +++ b/src/components/common/Button/styles.ts @@ -14,7 +14,7 @@ export const Button = styled("button", { border: "1px solid token(colors.neutral.900)", borderRadius: "lg", boxSizing: "border-box", - textStyle: "normal", + textStyle: "button", backgroundImage: "url(/arrow_white.svg)", backgroundRepeat: "no-repeat", backgroundPosition: "right token(spacing.6) center", @@ -26,6 +26,13 @@ export const Button = styled("button", { borderRadius: "lg", textStyle: "button", }, + danger: { + backgroundColor: "buttons.danger", + textStyle: "button", + color: "neutral.100", + padding: "token(spacing.2) token(spacing.4)", + borderRadius: "lg", + }, }, }, }); diff --git a/src/components/common/Navbar/styles.ts b/src/components/common/Navbar/styles.ts index 7880c86..5af980c 100644 --- a/src/components/common/Navbar/styles.ts +++ b/src/components/common/Navbar/styles.ts @@ -5,8 +5,7 @@ export const Navbar = styled("nav", { base: { padding: "token(spacing.6) token(spacing.4) token(spacing.4) token(spacing.4)", - display: "flex", - flexDirection: "row", + displayFlex: "row", gap: "4", flexWrap: "wrap", justifyContent: "space-between", @@ -27,8 +26,7 @@ export const NavbarContainer = styled("div", { top: 0, zIndex: "nav", backgroundColor: "neutral.100", - display: "flex", - flexDirection: "row", + displayFlex: "row", justifyContent: "center", }, }); @@ -44,8 +42,7 @@ export const LogoContainer = styled("div", { export const LogoText = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "0.5", }, }); @@ -63,7 +60,7 @@ export const Slogan = styled("p", { color: "magenta.400", textWrap: "nowrap", - hideBelow: "sm", + hideBelow: "md", }, }); @@ -86,8 +83,7 @@ export const UserAvatar = css({ export const UserText = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "0.5", hideBelow: "sm", }, @@ -112,8 +108,7 @@ export const SearchContainer = styled("div", { boxSizing: "border-box", order: 2, flexBasis: "100%", - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "stretch", sm: { diff --git a/src/components/common/Notification/styles.ts b/src/components/common/Notification/styles.ts index b967de0..8a51d8b 100644 --- a/src/components/common/Notification/styles.ts +++ b/src/components/common/Notification/styles.ts @@ -5,16 +5,14 @@ import { css } from "panda/css"; export const Notification = styled(Box, { base: { padding: "6", - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); export const NotificationSection = styled("div", { base: { - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", gap: "2", textStyle: "normal", diff --git a/src/components/common/PageFooter/index.tsx b/src/components/common/PageFooter/index.tsx new file mode 100644 index 0000000..737bec0 --- /dev/null +++ b/src/components/common/PageFooter/index.tsx @@ -0,0 +1 @@ +export * from "./styles"; diff --git a/src/components/common/PageFooter/styles.ts b/src/components/common/PageFooter/styles.ts new file mode 100644 index 0000000..0e7e452 --- /dev/null +++ b/src/components/common/PageFooter/styles.ts @@ -0,0 +1,9 @@ +import { styled } from "panda/jsx"; + +export const PageFooter = styled("div", { + base: { + displayFlex: "row", + gap: "4", + marginTop: "auto", + }, +}); diff --git a/src/components/Dash/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx similarity index 93% rename from src/components/Dash/PageHeader/index.tsx rename to src/components/common/PageHeader/index.tsx index c6033ce..0d6ed42 100644 --- a/src/components/Dash/PageHeader/index.tsx +++ b/src/components/common/PageHeader/index.tsx @@ -22,7 +22,7 @@ export function PageHeader({ {logoUrl && }{" "} - {title} + {title} {subtitle && {subtitle}} diff --git a/src/components/Dash/PageHeader/styles.ts b/src/components/common/PageHeader/styles.ts similarity index 80% rename from src/components/Dash/PageHeader/styles.ts rename to src/components/common/PageHeader/styles.ts index 89dc887..592a074 100644 --- a/src/components/Dash/PageHeader/styles.ts +++ b/src/components/common/PageHeader/styles.ts @@ -12,17 +12,25 @@ export const Container = styled("div", { export const TextContainer = styled("div", { base: { - display: "flex", + displayFlex: "column", gap: "1", - flexDirection: "column", + }, +}); + +export const TitleText = styled("span", { + base: { + display: "none", + + sm: { + display: "unset", + }, }, }); export const Title = styled("p", { base: { fontSize: "2xl", - display: "flex", - flexDirection: "row", + displayFlex: "row", gap: "3", fontWeight: "500", color: "text.primary", diff --git a/src/components/common/Route/styles.ts b/src/components/common/Route/styles.ts index fbb43dd..90d7813 100644 --- a/src/components/common/Route/styles.ts +++ b/src/components/common/Route/styles.ts @@ -4,8 +4,7 @@ import { css } from "panda/css"; export const Route = styled("label", { base: { padding: "8", - display: "flex", - flexDirection: "row", + displayFlex: "row", alignItems: "center", gap: "4", cursor: "pointer", @@ -15,8 +14,7 @@ export const Route = styled("label", { export const RouteInfo = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", alignItems: "flex-start", justifyContent: "center", gap: "1", diff --git a/src/components/common/RouteList/styles.ts b/src/components/common/RouteList/styles.ts index 6bc8b83..fa980f7 100644 --- a/src/components/common/RouteList/styles.ts +++ b/src/components/common/RouteList/styles.ts @@ -3,9 +3,8 @@ import { css } from "panda/css"; export const RouteSection = styled("section", { base: { - display: "flex", + displayFlex: "row", width: "100%", - flexDirection: "row", justifyContent: "center", }, }); @@ -13,8 +12,7 @@ export const RouteSection = styled("section", { export const RouteSectionContent = styled("div", { base: { padding: "paddingToMaxWidth", - display: "flex", - flexDirection: "column", + displayFlex: "column", justifyContent: "center", width: "homeMaxWidth", gap: "14", @@ -27,8 +25,7 @@ export const RouteSectionContent = styled("div", { export const ListContainer = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "8", flex: "1 0 auto", }, @@ -36,8 +33,7 @@ export const ListContainer = styled("div", { export const ListHeader = styled("div", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", }, }); @@ -57,8 +53,7 @@ export const ListSubtitle = styled("p", { export const List = styled("ul", { base: { - display: "flex", - flexDirection: "column", + displayFlex: "column", gap: "2", }, }); diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx index 8c59485..aa54be6 100644 --- a/src/components/common/TextInput/index.tsx +++ b/src/components/common/TextInput/index.tsx @@ -1,8 +1,15 @@ import * as Styles from "./styles"; import { ComponentPropsWithRef } from "react"; -interface Props extends ComponentPropsWithRef<"input"> {} +interface Props extends ComponentPropsWithRef<"input"> { + label?: string; +} -export function TextInput({ ...rest }: Props) { - return ; +export function TextInput({ label, ...rest }: Props) { + return ( + + {label} + + + ); } diff --git a/src/components/common/TextInput/styles.ts b/src/components/common/TextInput/styles.ts index 2b9c568..a4b2cfe 100644 --- a/src/components/common/TextInput/styles.ts +++ b/src/components/common/TextInput/styles.ts @@ -1,5 +1,13 @@ import { styled } from "panda/jsx"; +export const InputLabel = styled("label", { + base: { + color: "text.secondary", + displayFlex: "column", + gap: "2", + }, +}); + export const Input = styled("input", { base: { backgroundColor: "input.bg",