diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx index 59e61f7..f997106 100644 --- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx +++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx @@ -128,6 +128,7 @@ export function DashboardTopbar({ user }: DashboardTopbarProps) { variant="ghost" size="sm" asChild + iconLeft={} className="text-muted-foreground [&.active]:bg-surface-1 [&.active]:text-foreground" > - {item.label} @@ -146,10 +146,10 @@ export function DashboardTopbar({ user }: DashboardTopbarProps) { + aria-label="More actions" + /> ); diff --git a/apps/dashboard/src/routes/login.tsx b/apps/dashboard/src/routes/login.tsx index fed8861..c72ef1b 100644 --- a/apps/dashboard/src/routes/login.tsx +++ b/apps/dashboard/src/routes/login.tsx @@ -1,11 +1,5 @@ +import { GitHubLogo } from "@quickhub/icons"; import { Button } from "@quickhub/ui/components/button"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@quickhub/ui/components/card"; import { Logo } from "@quickhub/ui/components/logo"; import { createFileRoute, redirect } from "@tanstack/react-router"; import { signIn } from "#/lib/auth.client"; @@ -21,37 +15,68 @@ export const Route = createFileRoute("/login")({ function LoginPage() { return ( -
- - -
- -
-

- QuickHub -

-

Placeholder logo

+
+
+
+
+
+ +
+

+ QuickHub +

+

+ Review workspace +

+
+
+ +
+
+

+ Review your GitHub work in one place +

+
+ +
{ + event.preventDefault(); + void signIn.social({ provider: "github" }); + }} + > + +
+
+ +
+
+
+
+ +
+
+
+
- - Sign in to QuickHub - - - Connect GitHub to start from the imported Circle base theme and grow - your own workflow from there. - - - - - - +
+
); } diff --git a/packages/icons/src/brand-logos.tsx b/packages/icons/src/brand-logos.tsx new file mode 100644 index 0000000..d3305eb --- /dev/null +++ b/packages/icons/src/brand-logos.tsx @@ -0,0 +1,53 @@ +import type * as React from "react"; + +function withClassName(className?: string) { + return className ? `shrink-0 ${className}` : "shrink-0"; +} + +// Source: https://api.svgl.app?search=github +// Assets: +// - https://svgl.app/library/github_light.svg +// - https://svgl.app/library/github_wordmark_light.svg +export function GitHubLogo(props: React.ComponentProps<"svg">) { + const { className, ...rest } = props; + + return ( + + ); +} + +export function GitHubWordmarkLogo(props: React.ComponentProps<"svg">) { + const { className, ...rest } = props; + + return ( + + ); +} diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index 4725aeb..acfe196 100644 --- a/packages/icons/src/index.ts +++ b/packages/icons/src/index.ts @@ -19,3 +19,4 @@ export { Settings01Icon as SettingsIcon, Sun01Icon as SunIcon, } from "@hugeicons/react"; +export { GitHubLogo, GitHubWordmarkLogo } from "./brand-logos"; diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx index 719fb6b..031316b 100644 --- a/packages/ui/src/components/button.tsx +++ b/packages/ui/src/components/button.tsx @@ -1,4 +1,4 @@ -import { Slot } from "@radix-ui/react-slot"; +import { Slot, Slottable } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import type * as React from "react"; @@ -21,11 +21,11 @@ const buttonVariants = cva( link: "text-primary underline-offset-4 hover:underline", }, size: { - default: "h-9 px-4 py-2 has-[>svg]:px-3", - xxs: "h-6 rounded-md gap-1.5 px-2.5 has-[>svg]:px-2", - xs: "h-7 rounded-md gap-1.5 px-2.5 has-[>svg]:px-2", - sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", - lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + default: "h-9 px-4 py-2", + xxs: "h-6 rounded-md gap-1.5 px-2.5", + xs: "h-7 rounded-md gap-1.5 px-2.5", + sm: "h-8 rounded-md gap-1.5 px-3", + lg: "h-10 rounded-md px-6", icon: "size-9", }, }, @@ -36,15 +36,22 @@ const buttonVariants = cva( }, ); +type ButtonIcon = React.ReactNode; + function Button({ + children, className, variant, size, asChild = false, + iconLeft, + iconRight, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean; + iconLeft?: ButtonIcon; + iconRight?: ButtonIcon; }) { const Comp = asChild ? Slot : "button"; @@ -53,7 +60,29 @@ function Button({ data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} - /> + > + {iconLeft ? ( + + ) : null} + {children} + {iconRight ? ( + + ) : null} + ); } diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx index f031f98..12da94a 100644 --- a/packages/ui/src/components/sidebar.tsx +++ b/packages/ui/src/components/sidebar.tsx @@ -268,6 +268,7 @@ function SidebarTrigger({ data-slot="sidebar-trigger" variant="ghost" size="icon" + iconLeft={} className={cn("h-7 w-7", className)} onClick={(event) => { onClick?.(event); @@ -275,7 +276,6 @@ function SidebarTrigger({ }} {...props} > - Toggle Sidebar );