Merge pull request #2 from NEARBuilders/fix/theming

Fixes theming
NEARBuilders · Oct 21, 2024 · 2a916ee · 2a916ee
2 parents 01fe97a + b88e596
commit 2a916ee
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,9 @@
 
 </details>
 
-This project a [Vite](https://vitejs.dev/) app bootstrapped with [@near-js/client](https://github.com/near/near-api-js/tree/master/packages/client), [@tanstack/react-router](https://tanstack.com/router/latest), and [@tanstack/react-query](https://tanstack.com/query/latest). It uses [tailwind](https://tailwindcss.com/docs/installation) for styling, and offers a [playwright suite](https://playwright.dev/) for testing.
+This project a [Vite](https://vitejs.dev/) app bootstrapped with [@near-js/client](https://github.com/near/near-api-js/tree/master/packages/client), [@tanstack/react-router](https://tanstack.com/router/latest), and [@tanstack/react-query](https://tanstack.com/query/latest). It uses [tailwind](https://tailwindcss.com/docs/installation) for styling, [shadcn](https://ui.shadcn.com/) components, and offers a [playwright suite](https://playwright.dev/) for testing.
+
+To easily add more components, [browse the shadcn catalog](https://ui.shadcn.com/docs/components/button) and follow its installation guide. You can also easily generate themes through tools [like this one](https://zippystarter.com/tools/shadcn-ui-theme-generator), and copy and paste your colors into the [input.css](./src/input.css).
 
 ## Getting Started
 

diff --git a/src/components/Messages.tsx → src/components/guestbook/messages.tsx b/src/components/Messages.tsx → src/components/guestbook/messages.tsx
@@ -1,9 +1,7 @@
 import { GuestBookMessage, useGuestBookMessages } from "@/lib/guestbook";
-import { useTheme } from "@/components/theme-provider";
 
 export default function Messages() {
   const { data, isLoading, isError } = useGuestBookMessages();
-  const { theme } = useTheme();
 
   if (isLoading) return <div className="text-center">Loading messages...</div>;
   if (isError)
@@ -17,10 +15,7 @@ export default function Messages() {
       <div className="space-y-4">
         {data && data.length > 0 ? (
           data.map((message: GuestBookMessage, i: number) => (
-            <div
-              key={i}
-              className={`rounded-md border border-opacity-30 bg-opacity-50 p-4 ${theme === "dark" ? "bg-gray-700 text-white" : "bg-white text-gray-900"} shadow-sm`}
-            >
+            <div key={i} className={"rounded-md border bg-card p-4 shadow-sm"}>
               <p className="mb-2">{message.text}</p>
               <div className="flex justify-between text-sm text-opacity-70">
                 <span>{message.sender}</span>

diff --git a/src/components/GuestbookSigner.tsx → src/components/guestbook/signer.tsx b/src/components/GuestbookSigner.tsx → src/components/guestbook/signer.tsx
@@ -1,7 +1,8 @@
 import { useWallet } from "@/contexts/near";
 import { useWriteMessage } from "@/lib/guestbook";
 import { FormEvent } from "react";
-import { Button } from "./ui/button";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 export default function GuestbookSigner() {
   const { signedAccountId } = useWallet();
@@ -43,12 +44,11 @@ export default function GuestbookSigner() {
           <label htmlFor="message" className="mb-1 block text-sm font-medium">
             Message:
           </label>
-          <input
+          <Input
             autoComplete="off"
             autoFocus
             id="message"
             name="message"
-            className="w-full rounded-md border border-opacity-30 bg-opacity-50 px-3 py-2 text-inherit placeholder-opacity-50 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
             required
           />
         </div>
@@ -57,25 +57,21 @@ export default function GuestbookSigner() {
             Donation (optional):
           </label>
           <div className="flex rounded-md shadow-sm">
-            <input
+            <Input
               autoComplete="off"
               defaultValue={"0"}
               id="donation"
               name="donation"
               min="0"
               step="0.01"
               type="number"
-              className="block w-full min-w-0 flex-1 rounded-none rounded-l-md border border-opacity-30 bg-opacity-50 px-3 py-2 text-inherit placeholder-opacity-50 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
             <span className="inline-flex items-center rounded-r-md border border-l-0 border-opacity-30 bg-opacity-10 px-3 text-sm text-opacity-70">
               Ⓝ
             </span>
           </div>
         </div>
-        <Button
-          type="submit"
-          className="w-full bg-blue-600 text-white transition-all hover:bg-blue-700 focus:scale-95"
-        >
+        <Button type="submit" className="w-full transition-all focus:scale-95">
           Sign Guest Book
         </Button>
       </fieldset>

diff --git a/src/components/Header.tsx → src/components/header.tsx b/src/components/Header.tsx → src/components/header.tsx
@@ -1,31 +1,25 @@
+import { Button } from "@/components/ui/button";
+import { ModeToggle } from "@/components/ui/mode-toggle";
 import { useWallet } from "@/contexts/near";
 import { Link } from "@tanstack/react-router";
-import { ModeToggle } from "./mode-toggle";
-import { Button } from "./ui/button";
 
 export default function Header() {
   const { signedAccountId } = useWallet();
 
   return (
-    <header className="bg-slate-600">
+    <header className="border shadow-md">
       <div className="container mx-auto flex items-center justify-between px-4 py-4">
-        <Link to="/" className="text-lg font-bold text-white sm:text-2xl">
+        <Link to="/" className="font-bolds text-lg sm:text-2xl">
           📖 NEAR Guest Book
         </Link>
         <nav>
           <ModeToggle />
           {signedAccountId ? (
-            <Button
-              className="bg-blue-500 text-white hover:bg-blue-600"
-              asChild
-            >
+            <Button asChild>
               <Link to={`/profile/${signedAccountId}`}>{signedAccountId}</Link>
             </Button>
           ) : (
-            <Button
-              className="bg-blue-500 text-white hover:bg-blue-600"
-              asChild
-            >
+            <Button asChild>
               <Link to="/login">Connect NEAR Account</Link>
             </Button>
           )}

diff --git a/src/components/SignIn.tsx → src/components/sign-in.tsx b/src/components/SignIn.tsx → src/components/sign-in.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { Button } from "./ui/button";
+import { Button } from "@/components/ui/button";
 
 export default function SignIn() {
   return (
@@ -19,7 +19,7 @@ export default function SignIn() {
       <br />
       <p>
         Go ahead and{" "}
-        <Button className="bg-blue-500 text-white hover:bg-blue-600" asChild>
+        <Button asChild>
           <Link to="/login">sign in</Link>
         </Button>{" "}
         to try it out!

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/components/mode-toggle.tsx → src/components/ui/mode-toggle.tsx b/src/components/mode-toggle.tsx → src/components/ui/mode-toggle.tsx
@@ -7,19 +7,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
-import { useTheme } from "@/components/theme-provider";
+import { useTheme } from "@/components/ui/theme-provider";
 
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className={`focus-visible:ring-0 ${theme === "dark" ? "text-muted" : "text-white"}`}
-          size="icon"
-        >
+        <Button variant="ghost" className={`focus-visible:ring-0`} size="icon">
           <Sun
             className={`h-[1.2rem] w-[1.2rem] transition-all ${theme === "dark" ? "rotate-90 scale-0" : "rotate-0 scale-100"}`}
           />
@@ -31,18 +27,13 @@ export function ModeToggle() {
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className={`mt-1 ${theme === "dark" ? "bg-slate-800" : "bg-white"} rounded-md shadow-lg`}
-      >
+      <DropdownMenuContent className={"mt-1 rounded-md shadow-lg"}>
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

diff --git a/src/components/theme-provider.tsx → src/components/ui/theme-provider.tsx b/src/components/theme-provider.tsx → src/components/ui/theme-provider.tsx
diff --git a/src/input.css b/src/input.css
@@ -4,56 +4,47 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --foreground: 158 5% 10%;
+    --card: 158 50% 90%;
+    --card-foreground: 158 5% 15%;
+    --popover: 158 100% 95%;
+    --popover-foreground: 158 100% 10%;
+    --primary: 158 100% 46.3%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 158 30% 70%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 120 30% 85%;
+    --muted-foreground: 158 5% 35%;
+    --accent: 120 30% 80%;
+    --accent-foreground: 158 5% 15%;
+    --destructive: 0 100% 30%;
+    --destructive-foreground: 158 5% 90%;
+    --border: 158 30% 50%;
+    --input: 158 30% 26%;
+    --ring: 158 100% 46.3%;
     --radius: 0.5rem;
   }
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 158 50% 10%;
+    --foreground: 158 5% 90%;
+    --card: 158 50% 30%;
+    --card-foreground: 158 5% 90%;
+    --popover: 158 50% 5%;
+    --popover-foreground: 158 5% 90%;
+    --primary: 158 100% 46.3%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 158 30% 20%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 120 30% 25%;
+    --muted-foreground: 158 5% 60%;
+    --accent: 120 30% 25%;
+    --accent-foreground: 158 5% 90%;
+    --destructive: 0 100% 30%;
+    --destructive-foreground: 158 5% 90%;
+    --border: 158 30% 26%;
+    --input: 158 30% 26%;
+    --ring: 158 100% 46.3%;
+    --radius: 0.5rem;
   }
 }
 @layer base {

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import ReactDOM from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
+import "./input.css";
 
 export const queryClient = new QueryClient();
 

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -6,9 +6,9 @@ import {
   createRootRouteWithContext
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import Header from "@/components/Header";
+import Header from "@/components/header";
 import NearProvider from "@/contexts/near";
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeProvider } from "@/components/ui/theme-provider";
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,13 +1,13 @@
 import reactLogo from "@/assets/react.svg";
-import GuestbookSigner from "@/components/GuestbookSigner";
-import Messages from "@/components/Messages";
-import SignIn from "@/components/SignIn";
+import GuestbookSigner from "@/components/guestbook/signer";
+import Messages from "@/components/guestbook/messages";
+import SignIn from "@/components/sign-in";
 import { useWallet } from "@/contexts/near";
 import { createFileRoute } from "@tanstack/react-router";
 import nearLogo from "/near-logo.svg";
 import nearLogoWhite from "/near-logo-white.svg";
 import viteLogo from "/vite.svg";
-import { useTheme } from "@/components/theme-provider";
+import { useTheme } from "@/components/ui/theme-provider";
 
 export const Route = createFileRoute("/")({
   component: HomePage
@@ -47,7 +47,7 @@ export default function HomePage() {
           NEAR + Vite + React
         </h1>
 
-        <div className="rounded-lg bg-gray-700 p-6 text-gray-100 shadow-md">
+        <div className="rounded-lg border bg-card p-6 shadow-md">
           {signedAccountId ? <GuestbookSigner /> : <SignIn />}
         </div>
 

diff --git a/src/routes/login.tsx b/src/routes/login.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect } from "react";
-import { useWallet } from "../contexts/near";
+import { useWallet } from "@/contexts/near";
 import { Button } from "@/components/ui/button";
 
 export const Route = createFileRoute("/login")({