From 17956a9bc35cc0e1f8f4b679c5b62fe9df1fa83c Mon Sep 17 00:00:00 2001
From: auraticabhi <abhijeetgupta989@gmail.com>
Date: Mon, 1 Apr 2024 20:56:10 +0530
Subject: [PATCH] ui changes

---
 app/page.tsx                           |  10 +-
 components/Navbar.tsx                  | 145 +++++++++++++------------
 components/Post.tsx                    |   5 +-
 components/profilePage/ProfileCard.tsx |   4 +-
 components/queAnsPage/AnsPost.tsx      |   4 +-
 components/queAnsPage/QuePost.tsx      |   2 +-
 components/ui/tabs.tsx                 |   2 +-
 7 files changed, 94 insertions(+), 78 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 57f01be..e984017 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -528,6 +528,7 @@ export default function Home() {
                               <FormControl>
                                 <Input className="" placeholder="Title for the question ..." {...field}/>
                               </FormControl>
+                              <div className="text-sm opacity-70">This is the title, write your question here.</div>
                               <FormMessage/>
                             </FormItem>
                           )}
@@ -549,6 +550,7 @@ export default function Home() {
                                     )}
                                    /> 
                                 </FormControl>
+                                <div className="text-sm opacity-70">This is the description, give more details about your question here.</div>
                                 <FormMessage/>
                               </FormItem>
                             )}
@@ -566,8 +568,9 @@ export default function Home() {
                             }
                           </div>
                           <div>
+                            <div className="text-sm font-medium mb-2">Category</div>
                           <Select value={selectedCategory} onValueChange={handleSelectChange} >
-      <SelectTrigger className="w-full">
+      <SelectTrigger className="w-[11rem]">
         <SelectValue placeholder="Select a Category" />
       </SelectTrigger>
       <SelectContent>
@@ -596,19 +599,22 @@ export default function Home() {
                             render={({ field }) => (
                               <FormItem className="flex flex-row items-center justify-between rounded-lg border p-2">
                                 <div className="space-y-0.5">
-                                  <FormLabel className="text-base">
+                                  <FormLabel className="text-sm font-medium">
                                     Post Anonymously
+                                    <div className="text-sm font-normal opacity-70">Hide your details while posting question</div>
                                   </FormLabel>
                                   {/* <FormDescription>
                                     Post question without revealing your identity.
                                   </FormDescription> */}
                                 </div>
+                                <div className="mb-5">
                                 <FormControl>
                                   <Switch
                                     checked={field.value}
                                     onCheckedChange={field.onChange}
                                   />
                                 </FormControl>
+                                </div>
                               </FormItem>
                             )}
                           />
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index a1176ef..d3904f6 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -481,69 +481,8 @@ const clearNotifications = async () => {
             </p>
           </Link>
 
-          <div className=" ml-3 space-x-5 flex">
-          <Button variant="ghost" className="hover:bg-transparent" onClick={() => setClicked("home")}>
-            <Link href="/">
-            <Home
-              className={`h-5 w-5 ${clicked === 'home' ? "" : ""}`}
-            />
-            </Link>
-          </Button>
-          
-          {/* Notification Drop-down */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="hover:bg-transparent focus-visible:ring-0.1" onClick={() => setClicked("notification")}>
-                <Bell
-                  className={`h-5 w-5 ${clicked === 'notification' ? "" : ""}`}
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-auto overflow-auto px-2 break-words">
-              <DropdownMenuLabel className=" justify-between flex gap-8">
-                {notifications.length === 0 ? "No new notifications" : "Notifications"}
-                {notifications.length > 0 && (
-                  <button onClick={clearNotifications}>
-                    Clear
-                  </button>
-                )}
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup className="max-h-[21rem] max-w-[22rem] overflow-y-auto overflow-x-hidden">
-                {notifications.map((notification) => (
-                  <DropdownMenuItem key={notification.id}>
-                    <Link href={`/${encodeURIComponent(notification.questionTitle.split(" ").join("-"))}`} className=" flex gap-2">
-                      <Image
-                      src={notification.answerProfilePic || "/nodp.webp"}
-                      alt="profile picture"
-                      width={24}
-                      height={24}
-                      className=" h-8 w-8 rounded-full my-auto"
-                      />
-                      <span className="flex flex-col overflow-hidden">
-                        <div>
-                        <span className="font-bold">{notification.answerName}</span> 
-                        <span className="text-sm"> commented on </span>
-                        </div>
-                        <span className=" font-bold underline overflow-hidden text-ellipsis whitespace-nowrap max-h-[2.4em] max-w-[15rem]">{notification.questionTitle}s</span>
-                      </span>
-                    </Link>
-                    <Separator orientation="horizontal" className=" absolute bottom-0 w-full" />
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              {notifications.length>0&& showLoadMoreButton &&
-              <div className="cursor-pointer w-full flex justify-center text-sm" onClick={loadMoreNotifications}>Load More</div>
-              }
-            </DropdownMenuContent>
-          </DropdownMenu>
-          
-        </div>
-        </div>
-
-        {/* search bar */}
-        <div className=" relative ">
+          {/* search bar */}
+        <div className=" relative ml-5">
           {/* <Input className=" pl-10 w-[40rem]" placeholder="Search" /> */}
           <input type="text" 
             value={searchText}
@@ -558,7 +497,9 @@ const clearNotifications = async () => {
           />
           <Search className=" absolute left-2 top-1/2 transform text-gray-400 -translate-y-1/2 h-4 w-4" />
         </div>
+        </div>
 
+        <div className="flex ">
         <div>
               <Dialog>
                 {
@@ -595,6 +536,7 @@ const clearNotifications = async () => {
                               <FormControl>
                                 <Input className="" placeholder="Title for the question ..." {...field}/>
                               </FormControl>
+                              <div className="text-sm opacity-70">This is the title, write your question here.</div>
                               <FormMessage/>
                             </FormItem>
                           )}
@@ -616,6 +558,7 @@ const clearNotifications = async () => {
                                     )}
                                    /> 
                                 </FormControl>
+                                <div className="text-sm opacity-70">This is the description, give more details about your question here.</div>
                                 <FormMessage/>
                               </FormItem>
                             )}
@@ -633,7 +576,7 @@ const clearNotifications = async () => {
                           </div>
                           <div>
                           <Select value={selectedCategory} onValueChange={handleSelectChange} >
-      <SelectTrigger className="w-full">
+      <SelectTrigger className="w-[11rem]">
         <SelectValue placeholder="Select a Category" />
       </SelectTrigger>
       <SelectContent>
@@ -664,17 +607,20 @@ const clearNotifications = async () => {
                                 <div className="space-y-0.5">
                                   <FormLabel className="text-base">
                                     Post Anonymously
+                                    <div className="text-sm font-normal opacity-70">Hide your details while posting question</div>
                                   </FormLabel>
                                   {/* <FormDescription>
                                     Post question without revealing your identity.
                                   </FormDescription> */}
                                 </div>
+                                <div className="mb-5">
                                 <FormControl>
                                   <Switch
                                     checked={field.value}
                                     onCheckedChange={field.onChange}
                                   />
                                 </FormControl>
+                                </div>
                               </FormItem>
                             )}
                           />
@@ -710,7 +656,69 @@ const clearNotifications = async () => {
               
             </div>
 
-        <div className="flex gap-4">
+            <div className=" ml-5 flex">
+          <Button variant="ghost" className="hover:bg-transparent" onClick={() => setClicked("home")}>
+            <Link href="/">
+            <Home
+              className={`h-5 w-5 ${clicked === 'home' ? "" : ""}`}
+            />
+            </Link>
+          </Button>
+          
+          {/* Notification Drop-down */}
+          <div className="ml-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="hover:bg-transparent focus-visible:ring-0.1" onClick={() => setClicked("notification")}>
+                <Bell
+                  className={`h-5 w-5 ${clicked === 'notification' ? "" : ""}`}
+                />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-auto overflow-auto px-2 break-words">
+              <DropdownMenuLabel className=" justify-between flex gap-8">
+                {notifications.length === 0 ? "No new notifications" : "Notifications"}
+                {notifications.length > 0 && (
+                  <button onClick={clearNotifications}>
+                    Clear
+                  </button>
+                )}
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup className="max-h-[21rem] max-w-[22rem] overflow-y-auto overflow-x-hidden">
+                {notifications.map((notification) => (
+                  <DropdownMenuItem key={notification.id}>
+                    <Link href={`/${encodeURIComponent(notification.questionTitle.split(" ").join("-"))}`} className=" flex gap-2">
+                      <Image
+                      src={notification.answerProfilePic || "/nodp.webp"}
+                      alt="profile picture"
+                      width={24}
+                      height={24}
+                      className=" h-8 w-8 rounded-full my-auto"
+                      />
+                      <span className="flex flex-col overflow-hidden">
+                        <div>
+                        <span className="font-bold">{notification.answerName}</span> 
+                        <span className="text-sm"> commented on </span>
+                        </div>
+                        <span className=" font-bold underline overflow-hidden text-ellipsis whitespace-nowrap max-h-[2.4em] max-w-[15rem]">{notification.questionTitle}s</span>
+                      </span>
+                    </Link>
+                    <Separator orientation="horizontal" className=" absolute bottom-0 w-full" />
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              {notifications.length>0&& showLoadMoreButton &&
+              <div className="cursor-pointer w-full flex justify-center text-sm" onClick={loadMoreNotifications}>Load More</div>
+              }
+            </DropdownMenuContent>
+          </DropdownMenu>
+          </div>
+          
+        </div>
+
+        <div className="flex gap-4 ml-5">
           {/* <ThemeToggler className=" mr-4" /> Theme option added on dropdown menu  */}
 
           {(user) ? (<div>
@@ -747,9 +755,9 @@ const clearNotifications = async () => {
                 </Link>
                 <div className="mt-1 ml-2 mb-2">
                 <div className="flex items-center justify-between pr-1 space-x-2">
-      <Label htmlFor="airplane-mode">Dark Mode</Label>
-      <Switch id="airplane-mode" onCheckedChange={toggleTheme} checked={theme==='dark'}/>
-    </div>
+                <Label htmlFor="airplane-mode">Dark Mode</Label>
+                <Switch id="airplane-mode" onCheckedChange={toggleTheme} checked={theme==='dark'}/>
+                </div>
                 </div>
                 </DropdownMenuGroup>
               <DropdownMenuSeparator />
@@ -780,6 +788,7 @@ const clearNotifications = async () => {
           )}
           
 
+        </div>
         </div>
       </div>
     </div>
diff --git a/components/Post.tsx b/components/Post.tsx
index 1c02359..57b7f13 100644
--- a/components/Post.tsx
+++ b/components/Post.tsx
@@ -10,6 +10,7 @@ import { Bookmark } from "lucide-react";
 import ShareDialog from "./ShareDialog";
 // import { Trash2 } from "lucide-react";
 import { AiTwotoneDelete } from "react-icons/ai";
+import { RiUserFollowLine } from "react-icons/ri";
 
 import Link from "next/link";
 import Image from "next/image";
@@ -208,7 +209,7 @@ const Post = ({ post, isProfile = false, handleDelete = () => {} }: Props) => {
 
       // Show toast notification based on follow/unfollow action
       toast({
-        title: isFollowing ? "Unfollowed" : "Followed",
+        title: isFollowing ? "You have unfollowed this user ❌" : "You are now following this user ✅",
         variant: "default",
       });
 
@@ -329,7 +330,7 @@ const Post = ({ post, isProfile = false, handleDelete = () => {} }: Props) => {
             ) : null} */}
             {!isExpanded && isOverflowing && (
               <div className="absolute bottom-0 md:bottom-[-0.16rem] left-0 w-full  text-right ">
-                <button className=" text-blue-500/80  hover:underline md:w-[8%] w-full backdrop-blur-none bg-white/50 dark:bg-transparent  text-right text-sm  " onClick={() => setIsExpanded(true)}>(more)</button>
+                <button className=" text-blue-500  hover:underline md:w-[8%] w-full backdrop-blur-none bg-white/50 dark:bg-transparent  text-right text-sm  " onClick={() => setIsExpanded(true)}>(more)</button>
               </div>
             )}
           </div>
diff --git a/components/profilePage/ProfileCard.tsx b/components/profilePage/ProfileCard.tsx
index ca41479..96fd27e 100644
--- a/components/profilePage/ProfileCard.tsx
+++ b/components/profilePage/ProfileCard.tsx
@@ -44,9 +44,9 @@ const ProfileCard = ({user}: Props) => {
   const otherUser:boolean=false;
   return (
     <div>
-      <div className="flex lg:justify-center mx-auto bg-[#FFFFFF] dark:bg-[#262626] p-5 rounded-lg font-dmsans">
+      <div className="flex mx-auto bg-[#FFFFFF] dark:bg-[#262626] p-5 rounded-lg font-dmsans">
 
-        <div>
+        <div className="ml-5">
         <Image
           src={user?.photoURL || '/nodp.webp'}
           width={300}
diff --git a/components/queAnsPage/AnsPost.tsx b/components/queAnsPage/AnsPost.tsx
index 1e77c7b..5ee5c67 100644
--- a/components/queAnsPage/AnsPost.tsx
+++ b/components/queAnsPage/AnsPost.tsx
@@ -162,7 +162,7 @@ const AnsPost = ({answers , postTitleWithSpaces , postId }: Props) => {
     // Update the local state to reflect the followed user
     setFollowedUsers((prevFollowed) => [...prevFollowed, userId]);
     toast({
-      title: 'You are now following this user.',
+      title: 'You are now following this user ✅',
       variant: 'default',
     });
   };
@@ -184,7 +184,7 @@ const AnsPost = ({answers , postTitleWithSpaces , postId }: Props) => {
     // Update the local state to reflect the unfollowed user
     setFollowedUsers((prevFollowed) => prevFollowed.filter((id) => id !== userId));
     toast({
-      title: 'You have unfollowed this user.',
+      title: 'You have unfollowed this user ❌',
       variant: 'default',
     });
   };
diff --git a/components/queAnsPage/QuePost.tsx b/components/queAnsPage/QuePost.tsx
index 369ee63..5499361 100644
--- a/components/queAnsPage/QuePost.tsx
+++ b/components/queAnsPage/QuePost.tsx
@@ -170,7 +170,7 @@ const handleFollow = async () => {
 
     // Show toast notification based on follow/unfollow action
     toast({
-      title: isFollowing ? "Unfollowed" : "Followed",
+      title: isFollowing ? "You have unfollowed this user ❌" : "You are now following this user ✅",
       variant: "default",
     });
 
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 47a85cf..4aedd67 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-red-600 data-[state=active]:border-b-4 data-[state=active]:border-red-600 data-[state=active]:font-semibold",
+      "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-blue-500 data-[state=active]:border-b-4 data-[state=active]:border-blue-500 data-[state=active]:font-semibold",
       className
     )}
     {...props}