refactor(ui): significant UI updates ( #10 )

ruru-m07 · May 11, 2024 · 4ba518f · 4ba518f
2 parents f46604a + 93694ad
commit 4ba518f
Show file tree

Hide file tree

Showing 14 changed files with 392 additions and 233 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,6 +10,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { ModeToggle } from "@/components/modeToggle";
 import Image from "next/image";
+import NotificationBanner from "@/components/notificationBanner";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -53,7 +54,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-primary-foreground/35 `}>
+      <body className={`${inter.className}`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="dark"
@@ -72,7 +73,20 @@ export default function RootLayout({
                     })
                   )}
                 >
-                  <Image src={'/logo.jpeg'} alt="logo" width={100} height={100} />
+                  <Image
+                    src={"/logo-dark.png"}
+                    alt="logo"
+                    width={50}
+                    height={50}
+                    className="dark:hidden block"
+                  />
+                  <Image
+                    src={"/logo-light.png"}
+                    alt="logo"
+                    width={50}
+                    height={50}
+                    className="dark:block hidden"
+                  />
                 </div>
                 <Link
                   href={"https://github.com/ruru-m07/commitly"}
@@ -92,6 +106,7 @@ export default function RootLayout({
               {children}
             </section>
           </main>
+          <NotificationBanner />
           <Toaster />
         </ThemeProvider>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -14,6 +14,7 @@ import React from "react";
 import dynamic from "next/dynamic";
 import ListSuggestion from "@/components/listSuggestion";
 import Loader from "@/components/loader";
+import { Spinner } from "@/components/ui/spinner";
 
 const EmptyScreen = dynamic(() => import("@/components/emptyScreen"), {
   ssr: false,
@@ -93,44 +94,46 @@ export default function Home() {
 
   return (
     <div className=" h-full py-10 flex items-center justify-center">
-      <ScrollArea className="h-screen  w-full">
+      <ScrollArea className="h-screen w-full">
         <div className=" flex h-screen mx-0 sm:mx-10 lg:mx-60 flex-col p-4 lg:col-span-2">
           <div className="w-full h-5/6 mb-2 flex  items-end">
-            <Card className="h-96 w-full flex justify-center items-center bg-primary-foreground/50">
-              {error ? (
-                <div>
-                  <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-                    Oops! Something Went Wrong!{" "}
-                    <span className="ml-2"> : ( </span>
-                  </h3>
-                  <p className="text-sm text-muted-foreground">{error}</p>
-                </div>
-              ) : isLoading ? (
-                <Loader />
-              ) : commitMessages ? (
-                <ListSuggestion
-                  suggestions={commitMessages!}
-                  commitChanges={commitChanges || ""}
-                />
-              ) : (
-                <EmptyScreen onSubmit={handelSubmit} />
-              )}
+            <Card className="h-full w-full py-4 flex justify-center items-center bg-primary-foreground/25">
+              <ScrollArea className=" flex justify-center items-center">
+                {error ? (
+                  <div>
+                    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+                      Oops! Something Went Wrong!{" "}
+                      <span className="ml-2"> : ( </span>
+                    </h3>
+                    <p className="text-sm text-muted-foreground">{error}</p>
+                  </div>
+                ) : isLoading ? (
+                  <Loader />
+                ) : commitMessages ? (
+                  <ListSuggestion
+                    suggestions={commitMessages!}
+                    commitChanges={commitChanges || ""}
+                  />
+                ) : (
+                  <EmptyScreen onSubmit={handelSubmit} />
+                )}
+              </ScrollArea>
             </Card>
           </div>
 
           <div className="flex-1" />
 
           <form
             onSubmit={(e) => submitForm(e, message)}
-            className="relative overflow-hidden rounded-lg border bg-primary-foreground/50 focus-within:ring-1 focus-within:ring-ring"
+            className="relative overflow-hidden rounded-lg border bg-primary-foreground/25 focus-within:ring-1 focus-within:ring-ring shadow"
           >
             <Label htmlFor="message" className="sr-only">
               Message
             </Label>
             <Input
               id="message"
               placeholder="Describe your changes here..."
-              className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0 bg-primary-foreground/50"
+              className="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
               onChange={(e) => setMessage(e.target.value)}
               value={message || ""}
               disabled={isLoading}
@@ -142,9 +145,10 @@ export default function Home() {
               <Button
                 type="submit"
                 size="sm"
-                className="ml-auto gap-1.5"
+                className={`ml-auto gap-1.5 ${!message && "bg-primary-foreground text-muted-foreground border cursor-not-allowed hover:bg-primary-foreground"}`}
                 disabled={isLoading}
               >
+                {isLoading && <Spinner className="size-4" />}
                 Send Message
                 <CornerDownLeft className="size-3.5" />
               </Button>

diff --git a/components/suggestions.json → components/data.json b/components/suggestions.json → components/data.json
@@ -1,5 +1,5 @@
 {
-  "messages": [
+  "suggestions": [
     "💰 Refactored income tracking to improve accuracy and efficiency.",
     "💸 Added new features to optimize income generation.",
     "🤑 Implemented a robust system for managing income streams.",
@@ -29,5 +29,27 @@
     "🤑 Implemented risk management strategies to protect income streams.",
     "📈 Conducted market research to identify growth opportunities for income.",
     "🚀 Set ambitious income goals and developed strategies to achieve them."
+  ],
+  "messages": [
+    "Commit something awesome! 🌟",
+    "Let's craft some clever commits! 💖",
+    "Your commit history starts here... ☘️",
+    "Time to make your commits shine! ✨",
+    "Unlock your commit creativity! 🔓",
+    "Let the commit magic begin! 🎩",
+    "Craft commits that tell a captivating story! 📖",
+    "Time to make your code shine with every commit! ✨",
+    "Your commits, your masterpiece! 🎨",
+    "Commit with confidence, commit with style! 😎",
+    "Let your commits be a reflection of your coding prowess! 💪",
+    "Craft commits that are as unique as your code! 🦄",
+    "Make every commit a stepping stone to coding greatness! 🧗‍♂️",
+    "Your commits, the building blocks of a magnificent code castle! 🏰",
+    "Commit like a coding ninja, swift and precise! 🥷",
+    "Let your commits be a testament to your coding journey! 🗺️",
+    "Commit with passion, commit with purpose! 🔥",
+    "Make your commits dance with joy and efficiency! 🕺",
+    "Commit like a coding rockstar, owning the stage! 🎸",
+    "Commit with heart, commit with soul, let your code soar! 🚀"
   ]
 }
diff --git a/components/emptyScreen.tsx b/components/emptyScreen.tsx
@@ -2,50 +2,47 @@
 
 import Image from "next/image";
 import React from "react";
-import suggestionsData from "./suggestions.json";
-import { Card } from "./ui/card";
+import data from "./data.json";
+import { Card, CardHeader } from "./ui/card";
 
 const EmptyScreen = ({
   onSubmit,
 }: {
   onSubmit: ({ suggestion }: { suggestion: string }) => void;
 }) => {
-  const messages: string[] = [
-    "Commit something awesome!",
-    "Let's craft some clever commits!",
-    "Your commit history starts here...",
-    "Type away and witness the magic!",
-    "Time to make your commits shine!",
-  ];
+  const randomMessage =
+    data.messages[Math.floor(Math.random() * data.messages.length)];
 
-  const randomMessage = messages[Math.floor(Math.random() * messages.length)];
-
-  const randomSuggestions = suggestionsData.messages
-    .sort(() => 0.5 - Math.random()) // Shuffle the array
-    .slice(0, 3); // Get the first 3 elements
+  const randomSuggestions = data.suggestions
+    .sort(() => 0.5 - Math.random())
+    .slice(0, 4);
 
   return (
     <div className="h-full w-full flex justify-center  ">
-      <div className="grid place-items-center">
+      <div className="flex flex-col justify-center items-center">
         <Image
           src={"/logo-light.png"}
           alt="logo"
-          width={150}
-          height={150}
+          width={200}
+          height={200}
           className="dark:block hidden"
+          priority
         />
         <Image
           src={"/logo-dark.png"}
           alt="logo"
-          width={150}
-          height={150}
+          width={200}
+          height={200}
           className="dark:hidden block"
+          priority
         />
-        <h1 className="font-bold text-center">{randomMessage}</h1>
-        <div className="flex justify-between items-cente mx-2">
+        <CardHeader className="font-bold text-center text-lg">
+          {randomMessage}
+        </CardHeader>
+        <div className="grid grid-cols-2 gap-3 mx-14 mt-4">
           {randomSuggestions.map((suggestion, index) => (
             <Card
-              className="m-2 p-4 flex justify-center items-center w-1/3 cursor-pointer hover:border-primary hover:bg-primary-foreground/35"
+              className="p-4 flex items-center w-full rounded-lg cursor-pointer hover:border-primary hover:bg-primary-foreground"
               key={index}
               onClick={() => onSubmit({ suggestion })}
             >

diff --git a/components/listSuggestion.tsx b/components/listSuggestion.tsx
@@ -9,8 +9,8 @@ const ListSuggestion = ({
   commitChanges: string;
 }) => {
   return (
-    <div className="w-full mx-10">
-      <h1 className="text-2xl font-bold">{commitChanges}</h1>
+    <div className="w-fit mx-10">
+      <h1 className="text-xl font-bold">{commitChanges}</h1>
       <MarkdownReader markdown={suggestions} />
     </div>
   );

diff --git a/components/loader.tsx b/components/loader.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 const Loader = () => {
-  return <div className="size-4 bg-primary rounded-full animate-pulse" />;
+  return <div className="size-5 bg-primary rounded-full animate-pulse" />;
 };
 
 export default Loader;