Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: setup tailwind themer #120

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: setup tailwind themer #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
01d1c23
feat: setup tailwind themer
rjt-rockx Aug 19, 2024
bfd40af
Merge branch 'main' of https://github.com/ChatSift/chatsift into rjt/…
rjt-rockx Aug 29, 2024
b707c67
update styling
rjt-rockx Sep 9, 2024
d620dcb
Merge branch 'main' of https://github.com/ChatSift/chatsift into rjt/…
rjt-rockx Sep 11, 2024
7511198
feat: new color palette
rjt-rockx Sep 15, 2024
eda1cdf
fix: update dashboard layout
rjt-rockx Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"prettier": "^3.3.3",
"storybook": "^8.2.8",
"tailwindcss": "^3.4.3",
"typescript": "^5.5.4",
Expand All @@ -49,14 +50,15 @@
"lucide-react": "^0.424.0",
"next": "^14.2.5",
"next-themes": "^0.3.0",
"prettier-plugin-tailwindcss": "^0.6.5",
"prettier-plugin-tailwindcss": "^0.6.6",
"react": "^18.3.1",
"react-aria": "^3.34.1",
"react-aria-components": "^1.3.1",
"react-dom": "^18.3.1",
"react-spring": "^9.7.4",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
"tailwindcss-themer": "^4.0.0",
"usehooks-ts": "^3.1.0"
}
}
8 changes: 4 additions & 4 deletions apps/website/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ export const metadata: Metadata = {
export default async function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en" suppressHydrationWarning>
<body className="bg-base dark:bg-base-dark">
<body className="bg-base-100">
<Providers>
<HydrationBoundary state={await server.me.prefetch()}>
<div className="h-scren flex min-h-screen flex-col">
<div className="flex h-screen min-h-screen flex-col">
<Navbar />
<div className="flex flex-[1_1_auto] flex-grow flex-col gap-8">
<div className="flex w-full flex-grow flex-col gap-8">
<main
className={cn(
'mx-auto mb-auto flex max-w-[80vw] flex-col justify-center gap-6 pt-6 md:min-w-[912px]',
'mx-auto mb-auto flex w-full max-w-screen-2xl flex-col justify-center gap-4 p-4 md:p-6',
)}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function NotFound() {
return (
<div className="flex flex-col items-center justify-center gap-4">
<Heading title="The page you're looking for could not be found" />
<Button className="flex justify-center gap-2 rounded-md bg-misc-accent px-4 py-3 text-lg font-[550] text-primary-dark md:inline-flex">
<Button className="flex justify-center gap-2 rounded-md bg-accent px-4 py-3 text-lg font-medium text-primary md:inline-flex">
<Link href="/">Go back</Link>
</Button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ import { ExternalLink } from 'lucide-react';

export default async function HomePage() {
return (
<>
<h1 className="text-3xl font-medium">Modern solutions for your Discord communities</h1>
<div className="flex flex-col items-start justify-center gap-6">
<h1 className="max-w-full text-balance text-3xl font-medium">Modern solutions for your Discord communities</h1>

<div>
<a
className="flex justify-center gap-2 rounded-md bg-misc-accent px-4 py-3 text-lg font-[550] text-primary-dark md:inline-flex"
className="flex justify-center gap-2 rounded-md bg-accent px-4 py-2 text-lg text-on-accent md:inline-flex"
href="/support"
rel="noopener noreferrer"
target="_blank"
>
Join our Discord server <ExternalLink aria-hidden size={20} className="my-auto" />
</a>
</div>
</>
</div>
);
}
2 changes: 1 addition & 1 deletion apps/website/src/app/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function Providers({ children }: PropsWithChildren) {
<JotaiProvider>
<ThemeProvider attribute="class">{children}</ThemeProvider>
</JotaiProvider>
<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
{/* <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" /> */}
</QueryClientProvider>
);
}
2 changes: 1 addition & 1 deletion apps/website/src/components/common/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const AvatarFallback = React.forwardRef<
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
className={cn('flex h-full w-full items-center justify-center rounded-full bg-base-200', className)}
{...props}
/>
));
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/common/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Button(props: ButtonProps) {
<AriaButton
{...rest}
className={cn(
'bg-transparent flex h-fit items-center gap-2 whitespace-nowrap rounded-md px-1.5 py-1.5 text-lg hover:bg-on-tertiary active:bg-on-secondary dark:hover:bg-on-tertiary-dark dark:active:bg-on-secondary-dark',
'hover:bg-on-tertiary flex h-fit items-center gap-2 whitespace-nowrap rounded-md bg-transparent px-4 py-2 font-medium active:bg-static',
props.className,
)}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/common/Heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ interface HeadingProps {
export default function Heading({ title, subtitle }: HeadingProps) {
return (
<div className="g-3 flex flex-col">
<p className="text-2xl font-medium text-primary dark:text-primary-dark">{title}</p>
{subtitle && <p className="text-lg font-normal text-secondary dark:text-secondary-dark">{subtitle}</p>}
<p className="text-2xl font-medium text-primary">{title}</p>
{subtitle && <p className="text-lg font-normal text-secondary">{subtitle}</p>}
</div>
);
}
8 changes: 3 additions & 5 deletions apps/website/src/components/common/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import SvgChatSift from '~/components/svg/SvgChatSift';

export default function Logo() {
return (
<Link className="mr-6 flex flex-row items-center" href="/">
<SvgChatSift />
<h1 className="m-0 ml-2 text-2xl font-medium text-primary dark:text-primary-dark" tabIndex={0}>
ChatSift
</h1>
<Link className="flex h-fit flex-row items-center gap-2 px-2" href="/">
<SvgChatSift className="size-6" />
<h1 className="font-medium text-primary">ChatSift</h1>
</Link>
);
}
8 changes: 4 additions & 4 deletions apps/website/src/components/common/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export default function SearchBar({ className, ...props }: AriaSearchFieldProps
{...inputProps}
ref={ref}
className={cn(
'w-full flex-auto rounded-lg bg-on-tertiary pb-3 pl-4 pr-12 pt-3 text-lg font-medium text-primary',
'border border-on-secondary dark:border-on-secondary-dark dark:bg-on-tertiary-dark dark:text-primary-dark',
'focus:border-solid focus:border-primary focus:outline-none dark:focus:border-primary-dark',
'bg-on-tertiary w-full flex-auto rounded-lg pb-3 pl-4 pr-12 pt-3 text-lg font-medium text-primary',
'border border-static',
'focus:border-solid focus:border-primary focus:outline-none',
'disabled:cursor-not-allowed disabled:opacity-50',
'placeholder:text-secondary dark:placeholder:text-secondary-dark',
'placeholder:text-secondary',
)}
/>
<SvgSearch className="absolute right-4 top-1/2 translate-y-[-50%]" />
Expand Down
8 changes: 4 additions & 4 deletions apps/website/src/components/common/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function Desktop({ children, className }: Props) {
return (
<nav
className={cn(
'hidden w-80 flex-shrink-0 border-r border-solid border-r-secondary p-6 dark:border-r-secondary-dark md:flex md:flex-col',
'hidden w-80 flex-shrink-0 border-r border-solid border-r-secondary p-6 md:flex md:flex-col',
className,
)}
>
Expand Down Expand Up @@ -93,7 +93,7 @@ function Mobile({ children, className }: Props) {

return (
<div className="block md:hidden">
<NavigationMenu.Root className="relative bg-base dark:bg-base-dark md:hidden">
<NavigationMenu.Root className="relative bg-base-100 md:hidden">
<div className="ml-auto flex items-center justify-between p-2">
<Logo />{' '}
<Button
Expand All @@ -117,13 +117,13 @@ function Mobile({ children, className }: Props) {
/>
<div
className={cn(
'fixed left-0 top-0 z-50 flex h-screen w-80 max-w-[80vw] touch-none flex-col justify-between border-r border-solid border-secondary bg-base dark:border-secondary-dark dark:bg-base-dark',
'fixed left-0 top-0 z-50 flex h-screen w-80 max-w-[80vw] touch-none flex-col justify-between border-r border-solid border-secondary bg-base-100',
className,
)}
{...bind()}
>
<div className="flex flex-col gap-4 p-6">{children}</div>
<div className="-z-10 flex w-full flex-row content-between items-center gap-4 border-t border-solid border-on-secondary bg-base p-4 dark:border-on-secondary-dark dark:bg-base-dark">
<div className="-z-10 flex w-full flex-row content-between items-center gap-4 border-t border-solid border-static bg-base-100 p-4">
<UserMobile />
</div>
</div>
Expand Down
7 changes: 1 addition & 6 deletions apps/website/src/components/common/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { cn } from '~/util/util';

export default function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn('bg-muted animate-pulse rounded-md bg-on-tertiary dark:bg-on-tertiary-dark', className)}
{...props}
/>
);
return <div className={cn('bg-on-tertiary animate-pulse rounded-md bg-base-200', className)} {...props} />;
}
8 changes: 4 additions & 4 deletions apps/website/src/components/common/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const toastVariants = cva(
{
variants: {
variant: {
default: 'border border-misc-accent bg-misc-accent text-primary-dark',
destructive: 'group border-misc-danger bg-misc-danger text-primary-dark',
default: 'border border-accent bg-accent text-primary',
destructive: 'group border-misc-danger bg-misc-danger text-primary',
},
},
defaultVariants: {
Expand All @@ -55,7 +55,7 @@ export const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
'bg-transparent ring-offset-background focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'ring-offset-background focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
className,
)}
{...props}
Expand All @@ -70,7 +70,7 @@ export const ToastClose = React.forwardRef<
<ToastPrimitives.Close
ref={ref}
className={cn(
'text-foreground/50 hover:text-foreground group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
className,
)}
toast-close=""
Expand Down
18 changes: 8 additions & 10 deletions apps/website/src/components/dashboard/GuildCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export default function GuildCard({ data }: GuildCardProps) {
return (
<div
className={cn(
'flex h-36 w-[80vw] flex-col gap-3 rounded-lg border-[1px] border-on-secondary p-4 dark:border-on-secondary-dark md:w-52',
hasBots ? 'bg-[#FFFFFF] dark:bg-[#1C1C21]' : 'group',
'flex h-40 w-full flex-col items-start justify-between gap-2 rounded-lg border border-static p-4',
hasBots ? 'bg-base-200' : 'group',
)}
>
<div className="flex flex-row items-center">
Expand All @@ -36,17 +36,17 @@ export default function GuildCard({ data }: GuildCardProps) {
alt="Guild icon"
width={48}
height={48}
className="flex h-12 w-12 items-center justify-center rounded-full border-on-secondary bg-on-tertiary dark:border-on-secondary-dark dark:bg-on-tertiary-dark"
className="bg-on-tertiary flex h-12 w-12 items-center justify-center rounded-full border-static"
/>
</a>
) : (
<a className="flex h-12 w-12 items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-full border-on-secondary bg-on-tertiary after:max-w-[70%] dark:border-on-secondary-dark dark:bg-on-tertiary-dark">
<a className="bg-on-tertiary flex h-12 w-12 items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-full border-static after:max-w-[70%]">
{getGuildAcronym(data.name)}
</a>
)}
</div>
<div className="flex flex-col gap-1">
<p className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-lg font-medium text-primary group-hover:hidden dark:text-primary-dark">
<div className="flex max-w-full flex-col gap-1">
<p className="w-full truncate text-lg font-medium text-primary group-hover:hidden">
<a href={url}>{data.name}</a>
</p>

Expand All @@ -62,11 +62,9 @@ export default function GuildCard({ data }: GuildCardProps) {
</ul>
) : (
<>
<p className="text-lg font-normal text-secondary group-hover:hidden dark:text-secondary-dark">
Not invited
</p>
<p className="text-sm font-normal text-secondary group-hover:hidden">Not invited</p>
<div className="hidden flex-col gap-1 group-hover:flex">
<p className="text-lg font-medium text-primary dark:text-primary-dark">Invite a bot:</p>
<p className="text-lg font-medium text-primary">Invite a bot:</p>
<ul className="flex flex-row gap-3">
<li>
<a href="/invites/automoderator">
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/dashboard/GuildList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function GuildList() {
return (
<ul className="grid grid-cols-1 gap-4 md:grid-cols-4">
{sorted.map((guild) => (
<li key={guild.id}>
<li key={guild.id} className="h-full w-full">
<GuildCard data={guild} />
</li>
))}
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/dashboard/RefreshGuildsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function RefreshGuildsButton() {

return (
<Button
className="border border-solid border-on-primary px-4 py-2 text-secondary dark:border-on-primary-dark dark:text-secondary-dark"
className="border border-solid border-static px-4 py-2 text-secondary hover:text-primary"
isDisabled={isLoading}
onPress={async () => {
await refetch();
Expand Down
18 changes: 9 additions & 9 deletions apps/website/src/components/footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function ThemeSwitchButton() {
onPress={() => {
setTheme(theme === 'light' ? 'dark' : 'light');
}}
className="h-6"
className="size-8 p-2 text-secondary hover:text-primary"
>
{theme === 'light' ? <SvgLightTheme /> : <SvgDarkTheme />}
</Button>
Expand All @@ -29,21 +29,21 @@ export default function Footer() {
const isMounted = useIsMounted();

return (
<footer className="g-4 flex flex-row items-center justify-between gap-4 border-t-2 border-solid border-t-on-secondary px-6 py-3 font-medium dark:border-t-on-secondary-dark">
<span className="whitespace-nowrap text-secondary dark:text-secondary-dark">© ChatSift, 2022 - Present</span>
<footer className="flex flex-col items-start justify-between gap-2 px-4 py-4 md:flex-row md:items-center md:gap-4 md:px-6">
<span className="whitespace-nowrap text-secondary">© ChatSift, 2022 - Present</span>
<div className="flex w-full flex-row content-between items-center gap-4">
<div className="flex flex-row items-center gap-4">
<a className="flex" href="/github">
<SvgGitHub />
<a className="flex text-secondary hover:text-primary" href="/github">
<SvgGitHub className="size-5" />
</a>
<a className="flex" href="/support">
<SvgDiscord />
<a className="flex text-secondary hover:text-primary" href="/support">
<SvgDiscord className="size-5" />
</a>
</div>
<div className="ml-auto flex flex-row items-center gap-2">
<p className="text-lg font-medium text-secondary dark:text-secondary-dark">Theme:</p>
<p className="text-secondary">Theme:</p>

{isMounted ? <ThemeSwitchButton /> : <Skeleton className="h-6 w-9" />}
{isMounted ? <ThemeSwitchButton /> : <Skeleton className="size-8" />}
</div>
</div>
</footer>
Expand Down
Loading
Loading