Skip to content

Commit

Permalink
landing - top spacing fix 75px -> 30px, notification - height 28px ->…
Browse files Browse the repository at this point in the history 
… 36px
  • Loading branch information
@manishiwa
manishiwa committed Sep 12, 2024
1 parent c6fd1fd commit a9990e4
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 59 deletions.
2 changes: 1 addition & 1 deletion app/(layout)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export async function generateMetadata(): Promise<Metadata> {
export default async function Page() {
return (
<>
<Container className="flex flex-col flex-1 w-full mt-[65px] md:mt-[70px] gap-y-[10px]">
<Container className="flex flex-col flex-1 w-full mt-[65px] md:mt-[30px] gap-y-[10px]">
<Heading
className="font-bold leading-[1.2] text-[24px] sm:text-[32px] md:text-[36px] max-w-[900px]"
as="h1"
Expand Down
102 changes: 44 additions & 58 deletions components/Notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,18 +132,16 @@ const Notification = () => {
>
<div
key={item.id + item.url}
className={`flex items-center pl-[12px] pr-[10px] relative pt-[10px] gap-x-[12px] ${
i >= filteredData.length - 1
? "pb-[10px]"
: "pb-[10px] border-b border-dashed border-forest-1000 dark:border-forest-500"
} w-auto ${item.url ? "cursor-pointer" : "cursor-normal"} flex`}
className={`flex items-center pl-[12px] pr-[10px] relative pt-[10px] gap-x-[12px] ${i >= filteredData.length - 1
? "pb-[10px]"
: "pb-[10px] border-b border-dashed border-forest-1000 dark:border-forest-500"
} w-auto ${item.url ? "cursor-pointer" : "cursor-normal"} flex`}
>
<div className="w-[12px] h-[12px]">
<Icon
icon={item.icon ? item.icon : "feather:bell"}
className={`w-[12px] h-[12px] text-forest-1000 dark:text-forest-800 dark:group-hover:text-forest-200 ${
item.icon ? "visible" : "invisible"
}`}
className={`w-[12px] h-[12px] text-forest-1000 dark:text-forest-800 dark:group-hover:text-forest-200 ${item.icon ? "visible" : "invisible"
}`}
/>
</div>
<div className={`flex w-full flex-col z-20`}>
Expand All @@ -155,9 +153,8 @@ const Notification = () => {
</div>
</div>
<div
className={`w-[24px] h-[24px] ${
item.url ? "visible" : "invisible"
}`}
className={`w-[24px] h-[24px] ${item.url ? "visible" : "invisible"
}`}
>
<Icon
icon="feather:chevron-right"
Expand Down Expand Up @@ -244,9 +241,8 @@ const Notification = () => {
{filteredData && (
<>
<div
className={`hidden md:flex w-full relative ${
openNotif ? "z-[110]" : "z-10"
}`}
className={`hidden md:flex w-full relative ${openNotif ? "z-[110]" : "z-10"
}`}
onMouseEnter={() => {
handleShowNotifications();
}}
Expand All @@ -255,17 +251,16 @@ const Notification = () => {
}}
>
<div
className={`hidden mb-[10px] lg:mb-0 md:flex items-center gap-x-[10px] overflow-hidden w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] border-[1px] h-[28px] rounded-full px-[10px] relative z-30 border-forest-1000 dark:border-forest-500 hover:dark:!bg-[#1F2726] hover:!bg-[#FFFFFF] hover:dark:!border-[#CDD8D3] hover:!border-[#151A19] tansition-all duration-300`}
className={`hidden mb-[10px] lg:mb-0 md:flex items-center gap-x-[10px] overflow-hidden w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] border-[1px] h-[36px] rounded-full px-[10px] relative z-30 border-forest-1000 dark:border-forest-500 hover:dark:!bg-[#1F2726] hover:!bg-[#FFFFFF] hover:dark:!border-[#CDD8D3] hover:!border-[#151A19] tansition-all duration-300`}
style={{
borderColor: currentItemTextColor,
backgroundColor: currentItemBackgroundColor,
}}
ref={ref}
>
<div
className={`w-full flex items-center justify-between ${
openNotif || filteredData.length === 0 ? "block" : "hidden"
}`}
className={`w-full flex items-center justify-between ${openNotif || filteredData.length === 0 ? "block" : "hidden"
}`}
>
<div className="flex items-center gap-x-[10px]">
<div className="w-[16px] h-[16px] relative">
Expand All @@ -276,11 +271,10 @@ const Notification = () => {
</div>
{filteredData.length > 0 && (
<div
className={`${
!openNotif && filteredData.length > 0
? "relative flex items-center gap-x-[10px] text-[12px] leading-[1.5] w-full overflow-hidden transition-opacity duration-300"
: "hidden"
} ${hideText ? "opacity-0" : "opacity-100"}`}
className={`${!openNotif && filteredData.length > 0
? "relative flex items-center gap-x-[10px] text-[12px] leading-[1.5] w-full overflow-hidden transition-opacity duration-300"
: "hidden"
} ${hideText ? "opacity-0" : "opacity-100"}`}
style={{
color: currentItemTextColor,
}}
Expand All @@ -290,15 +284,14 @@ const Notification = () => {
>
{hasUnseenNotifications && (
<div
className={`w-[6px] h-[6px] bg-red-500 rounded-full absolute -top-0 right-[1px] border tansition-colors duration-300 ${
(!filteredData[currentIndex] ||
!filteredData[currentIndex]["backgroundColor"]) &&
className={`w-[6px] h-[6px] bg-red-500 rounded-full absolute -top-0 right-[1px] border tansition-colors duration-300 ${(!filteredData[currentIndex] ||
!filteredData[currentIndex]["backgroundColor"]) &&
"border-white dark:border-[#1F2726]"
}`}
}`}
style={{
borderColor:
filteredData[currentIndex] &&
filteredData[currentIndex]["backgroundColor"]
filteredData[currentIndex]["backgroundColor"]
? filteredData[currentIndex]["backgroundColor"]
: undefined,
}}
Expand All @@ -307,7 +300,7 @@ const Notification = () => {
<Icon
icon={
filteredData[currentIndex] &&
filteredData[currentIndex].icon
filteredData[currentIndex].icon
? filteredData[currentIndex].icon
: "feather:bell"
}
Expand All @@ -325,14 +318,14 @@ const Notification = () => {
>
<div className="font-semibold">
{filteredData[currentIndex] &&
filteredData[currentIndex].desc
filteredData[currentIndex].desc
? filteredData[currentIndex].desc
: ""}
</div>
<div>-</div>
<ReactMarkdown>
{filteredData[currentIndex] &&
filteredData[currentIndex].body
filteredData[currentIndex].body
? filteredData[currentIndex].body
: ""}
</ReactMarkdown>
Expand All @@ -342,9 +335,8 @@ const Notification = () => {
<div className={`w-[24px] h-[24px] z-30`}>
<Icon
icon="feather:chevron-right"
className={`w-[24px] h-[24px] transition-transform duration-300 ${
openNotif ? "rotate-90" : "rotate-0"
}`}
className={`w-[24px] h-[24px] transition-transform duration-300 ${openNotif ? "rotate-90" : "rotate-0"
}`}
onClick={() => {
track("clicked Notification Center", {
location: "desktop header",
Expand All @@ -362,9 +354,8 @@ const Notification = () => {
</div>
</div>
<div
className={`absolute top-[14px] hidden mb-[10px] lg:mb-0 md:flex flex-col w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] dark:bg-[#1F2726] bg-white border-forest-1000 dark:border-forest-500 rounded-b-xl z-1 overflow-hidden transition-all duration-300 ease-in-out ${
openNotif ? "border" : "border-0"
}`}
className={`absolute top-[18px] hidden mb-[10px] lg:mb-0 md:flex flex-col w-[305px] mdl:w-[343px] xl:w-[600px] 2xl:w-[770px] dark:bg-[#1F2726] bg-white border-forest-1000 dark:border-forest-500 rounded-b-xl z-1 overflow-hidden transition-all duration-300 ease-in-out ${openNotif ? "border" : "border-0"
}`}
style={{
maxHeight: openNotif ? filteredData.length * 200 + "px" : "0",
}}
Expand All @@ -390,9 +381,8 @@ const Notification = () => {
</div>
<div className="md:hidden">
<div
className={`relative flex md:hidden top-0.5 mr-10 justify-self-end hover:pointer cursor-pointer p-3 rounded-full ${
openNotif ? "dark:bg-[#1F2726] bg-forst-50 z-40" : ""
}
className={`relative flex md:hidden top-0.5 mr-10 justify-self-end hover:pointer cursor-pointer p-3 rounded-full ${openNotif ? "dark:bg-[#1F2726] bg-forst-50 z-40" : ""
}
`}
onClick={() => {
handleShowNotifications(true);
Expand All @@ -407,11 +397,10 @@ const Notification = () => {
</div>

<div
className={`fixed top-[80px] left-0 right-0 w-[95%] h-auto bg-white dark:bg-[#1F2726] rounded-2xl transition-max-height border-forest-1000 dark:border-forest-500 overflow-hidden break-inside-avoid ${
openNotif
? "bg-blend-darken duration-300 ease-in-out z-40 border-[1px]"
: "bg-blend-normal duration-300 ease-in-out border-[0px] "
}`}
className={`fixed top-[80px] left-0 right-0 w-[95%] h-auto bg-white dark:bg-[#1F2726] rounded-2xl transition-max-height border-forest-1000 dark:border-forest-500 overflow-hidden break-inside-avoid ${openNotif
? "bg-blend-darken duration-300 ease-in-out z-40 border-[1px]"
: "bg-blend-normal duration-300 ease-in-out border-[0px] "
}`}
style={{
maxHeight: openNotif ? "100vh" : "0",
margin: "auto",
Expand All @@ -430,11 +419,10 @@ const Notification = () => {
<div key={item.id}>
{item.url ? (
<Link
className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] hover:cursor-pointer ${
index < filteredData.length - 1
? "border-b pb-1"
: "border-b-0 pb-1"
}`}
className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] hover:cursor-pointer ${index < filteredData.length - 1
? "border-b pb-1"
: "border-b-0 pb-1"
}`}
href={item.url}
rel="noopener noreferrer"
target="_blank"
Expand All @@ -453,11 +441,10 @@ const Notification = () => {
</Link>
) : (
<div
className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] ${
index < filteredData.length - 1
? "border-b pb-1"
: "border-b-0 pb-1"
}`}
className={`flex border-forest-1000 dark:border-forest-500 border-dashed w-full mt-[8px] ${index < filteredData.length - 1
? "border-b pb-1"
: "border-b-0 pb-1"
}`}
>
<div className="flex flex-col w-full pl-[35px] pb-[8px] gap-y-[8px] ">
<div className="h-[17px] font-bold text-[16px]">
Expand All @@ -479,9 +466,8 @@ const Notification = () => {
)}

<div
className={`fixed inset-0 bg-black transition-opacity duration-300 ${
openNotif ? "opacity-30 z-30" : "opacity-0 pointer-events-none"
}`}
className={`fixed inset-0 bg-black transition-opacity duration-300 ${openNotif ? "opacity-30 z-30" : "opacity-0 pointer-events-none"
}`}
// style={{ opacity: 0.3 }}
onClick={() => {
setOpenNotif(!openNotif);
Expand Down

0 comments on commit a9990e4

Please sign in to comment.