feat: added some themes

2024-04-12 23:33:15 +06:00 · 2024-04-12 23:33:15 +06:00 · 08c9073d28
parent ae26962fd4
commit 08c9073d28
10 changed files with 94 additions and 46 deletions
--- a/.gitignore
+++ b/.gitignore
@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -237,6 +237,40 @@

    --ring: 244 52% 79%;
  }
+
+  .bright-turquoise {
+      /* CSS: .bg-gradient { background: var(--gradient) } */
+      --gradient: #00dbde;
+
+      --background: 192 65% 3.52%;
+      --foreground: 192 10% 97.2%;
+  
+      --muted: 192 50% 13.2%;
+      --muted-foreground: 192 10% 54.4%;
+  
+      --popover: 192 45% 5.72%;
+      --popover-foreground: 192 10% 97.2%;
+  
+      --card: 192 45% 5.72%;
+      --card-foreground: 192 10% 97.2%;
+  
+      --border: 192 50% 13.2%;
+      --input: 192 50% 13.2%;
+  
+      --primary: 192 100% 44%;
+      --primary-foreground: 192 10% 97.2%;
+  
+      --secondary: 192 50% 13.2%;
+      --secondary-foreground: 192 10% 97.2%;
+  
+      --accent: 192 50% 13.2%;
+      --accent-foreground: 192 10% 97.2%;
+  
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 192 10% 97.2%;
+  
+      --ring: 192 100% 44%;
+  }
 }

@layer base {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";

 const inter = Inter({ subsets: ["latin"] });

@ -18,7 +19,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className={inter.className}>
+      <body className={cn(inter.className, "overflow-x-hidden")}>
        <ThemeProvider
          attribute="class"
          defaultTheme="foo2"
@ -26,7 +27,7 @@ export default function RootLayout({
          disableTransitionOnChange
        >
          {children}
-          <Toaster/>
+          <Toaster />
        </ThemeProvider>
      </body>
    </html>
--- a/src/components/dashboard.tsx
+++ b/src/components/dashboard.tsx
@ -1,7 +1,6 @@
 "use client";

 import * as React from "react";
-import { HelpCircle, Settings } from "lucide-react";

 import { cn } from "@/lib/utils";
 import {
@ -9,13 +8,9 @@ import {
  ResizablePanel,
  ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { SidebarNav } from "./sidebar-nav";
-import { TopNav } from "./top-nav";
-import { docsConfig, topNavItems } from "@/config";
-import { DocsSidebarNav } from "./docs-sidebar-nav";
+
 // import { AddButton } from "@/components/buttons/AddButton";
 // import { AddAssetFlow } from "@/components/modals/add-asset-flow";
 // import { WorkspaceSwitcher } from "@/app/(dashboard)/_components/workspace-switcher";
@ -79,7 +74,7 @@ export function Dashboard({
          <SidebarNav isCollapsed={isCollapsed} />
          {/* <DocsSidebarNav items={docsConfig.sidebarNav} /> */}
        </ResizablePanel>
-        <ResizableHandle withHandle />
+        <ResizableHandle withHandle className="hidden lg:flex" />
        <ResizablePanel defaultSize={defaultLayout[1]} minSize={30}>
          {/* <TopNav navItems={topNavItems}/> */}
          {children}
--- a/src/components/hamburger-menu.tsx
+++ b/src/components/hamburger-menu.tsx
@ -42,14 +42,18 @@ export default function HamburgerMenu() {
                <span className="inline-block font-urban text-xl font-bold">
                  {siteConfig.name}
                </span>
-            </SheetTitle>
-          </SheetHeader>
                
+              </SheetTitle>
+              <Separator className="mb-2 mt-2" />
+            </SheetHeader>

            {sideNavItems.map((group, i) => {
              return (
                <Fragment key={i}>
-                <Separator className="mb-2 mt-2" />
+                  {/* <Separator className="mb-2 mt-2" /> */}
+                  <h4 className="rounded-md px-2 mt-2 text-sm font-semibold">
+                    {group.group}
+                  </h4>
                  <div className="flex flex-col gap-1 p-2" key={group.group}>
                    {group.items.map((link, idx) => {
                      return (
@ -64,7 +68,7 @@ export default function HamburgerMenu() {
                </Fragment>
              );
            })}
-          <ScrollBar orientation="vertical"/>
+            <ScrollBar orientation="vertical" />
          </ScrollArea>
        </SheetContent>
      </Sheet>
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@ -55,6 +55,13 @@ export function ThemeToggle() {
        >
          Light Violet
        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            document.documentElement.setAttribute("class", "bright-turquoise");
+          }}
+        >
+          Bright Turquoise
+        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => {
            document.documentElement.setAttribute("class", "violett");
--- a/src/components/top-nav.tsx
+++ b/src/components/top-nav.tsx
@ -9,7 +9,7 @@ export const TopNav = () => {
    <nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b">
      <div>
        <HamburgerMenu />
-        <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none md:inline ml-4">
+        <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none lg:inline ml-4">
          {siteConfig.name}
        </h1>
        {/* {props.breadcrumbItems && (
--- a/src/components/users/users-table/data-table-pagination.tsx
+++ b/src/components/users/users-table/data-table-pagination.tsx
@ -30,7 +30,7 @@ import {
        </div>
        <div className="flex items-center space-x-6 lg:space-x-8">
          <div className="flex items-center space-x-2">
-            <p className="text-sm font-medium">Rows per page</p>
+            <p className="text-sm font-medium hidden md:block">Rows per page</p>
            <Select
              value={`${table.getState().pagination.pageSize}`}
              onValueChange={(value) => {
--- a/src/components/users/users-table/data-table-toolbar.tsx
+++ b/src/components/users/users-table/data-table-toolbar.tsx
@ -22,7 +22,7 @@ export function DataTableToolbar<TData>({

  return (
    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center space-x-2">
+      <div className="flex flex-1 items-center gap-2 flex-wrap">
        <Input
          placeholder="Search email..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
@ -33,7 +33,9 @@ export function DataTableToolbar<TData>({
        />
        <Input
          placeholder="Search name..."
-          value={(table.getColumn("fullName")?.getFilterValue() as string) ?? ""}
+          value={
+            (table.getColumn("fullName")?.getFilterValue() as string) ?? ""
+          }
          onChange={(event: any) =>
            table.getColumn("fullName")?.setFilterValue(event.target.value)
          }
--- a/src/components/users/users-table/tools-table.tsx
+++ b/src/components/users/users-table/tools-table.tsx
@ -17,7 +17,10 @@ const ToolsTable = ({ users }: { users: User[] }) => {
        <Heading title={`Users (${users.length})`} description="Manage Users" />
        <Link
          href="#"
-          className={buttonVariants({ variant: "default" })}
+          className={buttonVariants({
+            variant: "default",
+            // size: "sm",
+          })}
          // className="text-xs md:text-sm"
          // onClick={() => router.push(`/admin-dashboard/tools/add`)}
        >