Skip to content

Commit

Permalink
ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@auraticabhi
auraticabhi committed Apr 1, 2024
1 parent 7808b7f commit 17956a9
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 78 deletions.
10 changes: 8 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -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>
)}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)}
/>
Expand Down
145 changes: 77 additions & 68 deletions components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
{
Expand Down Expand Up @@ -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>
)}
Expand All @@ -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>
)}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)}
/>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 />
Expand Down Expand Up @@ -780,6 +788,7 @@ const clearNotifications = async () => {
)}


</div>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/Post.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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",
});

Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/profilePage/ProfileCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions components/queAnsPage/AnsPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
};
Expand All @@ -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',
});
};
Expand Down
2 changes: 1 addition & 1 deletion components/queAnsPage/QuePost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});

Expand Down
2 changes: 1 addition & 1 deletion components/ui/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 17956a9

Please sign in to comment.