From a465eb182fcf958f8e5333d70e9292b6f69a7980 Mon Sep 17 00:00:00 2001
From: Dan <dan@dminc.ru>
Date: Sun, 3 Mar 2024 17:29:43 +0300
Subject: [PATCH] chore: improve popup appearance

---
 .../event-groups/[alias]/export/page.tsx      | 11 ++-
 .../(.)schedule/event-groups/[alias]/page.tsx | 99 ++++++++++++-------
 2 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
index 4a06d22..ae1a16f 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
@@ -64,10 +64,11 @@ export default function Page({ params: { alias } }: Props) {
                 ref={refs.setFloating}
                 style={transitionStyles}
                 {...getFloatingProps()}
-                className="flex p-4"
+                className="flex h-fit w-full flex-col p-4 @2xl/export:w-3/4 @5xl/export:w-1/2"
               >
-                <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-primary-main">
-                  <div className="flex flex-col p-4 @lg/export:p-8">
+                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                  <div className="flex flex-col p-4 @2xl/export:p-8">
+                    {/* Heading and description */}
                     <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
                         Export to your calendar
@@ -83,6 +84,7 @@ export default function Page({ params: { alias } }: Props) {
                       You can add the schedule to your favorite calendar
                       application and it will be updated on schedule changes.
                     </div>
+                    {/* Export steps */}
                     <ul className="my-4 list-decimal pl-5 text-text-secondary/75">
                       <li>
                         Copy the link.
@@ -108,7 +110,8 @@ export default function Page({ params: { alias } }: Props) {
                       </li>
                       <li>Paste the link and click Add.</li>
                     </ul>
-                    <div className="-mx-4 -mb-4 @lg/export:-mx-8 @lg/export:-mb-8">
+                    {/* Calendar itself */}
+                    <div className="-mx-4 -mb-4 @2xl/export:-mx-8 @2xl/export:-mb-8">
                       <Calendar
                         urls={calendarURL ? [calendarURL] : []}
                         viewId="popup"
diff --git a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
index fdd0dd0..ce8c076 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
@@ -1,7 +1,4 @@
 "use client";
-import Calendar from "@/components/common/calendar/Calendar";
-import ExportButton from "@/components/schedule/ExportButton";
-import FavoriteButton from "@/components/schedule/group-card/FavoriteButton";
 import {
   getICSLink,
   useEventGroupsFindEventGroupByAlias,
@@ -19,6 +16,9 @@ import {
 } from "@floating-ui/react";
 import { useRouter } from "next/navigation";
 import React from "react";
+import FavoriteButton from "@/components/schedule/group-card/FavoriteButton";
+import ExportButton from "@/components/schedule/ExportButton";
+import Calendar from "@/components/common/calendar/Calendar";
 
 export type Props = {
   params: { alias: string };
@@ -42,7 +42,10 @@ export default function Page({ params: { alias } }: Props) {
   // Role props for screen readers
   const role = useRole(context);
 
-  const { getFloatingProps } = useInteractions([dismiss, role]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    role,
+  ]);
 
   return (
     <>
@@ -57,12 +60,15 @@ export default function Page({ params: { alias } }: Props) {
                 ref={refs.setFloating}
                 style={transitionStyles}
                 {...getFloatingProps()}
-                className="flex p-4"
+                className="flex h-fit w-full flex-col p-4 @2xl/event:w-3/4 @5xl/event:w-1/2"
               >
-                <div className="h-fit max-w-3xl overflow-hidden rounded-2xl bg-primary-main @lg/event:w-[768px]">
+                <div className="overflow-hidden rounded-2xl bg-primary-main">
+                  {/* EventGroup banner */}
                   <div
-                    style={{ backgroundImage: "url(/background-pattern.svg)" }}
-                    className="flex h-64 w-full items-start justify-end bg-secondary-main bg-repeat"
+                    style={{
+                      backgroundImage: "url(/background-pattern.svg)",
+                    }}
+                    className="flex h-64 w-full items-start justify-end rounded-t-2xl bg-secondary-main bg-repeat"
                   >
                     <div className="mr-2 flex flex-row gap-4">
                       <button
@@ -79,45 +85,66 @@ export default function Page({ params: { alias } }: Props) {
                       </button>
                     </div>
                   </div>
-                  {group && (
-                    <div className="flex flex-col p-4 @lg/event:p-8">
-                      <div className="mb-4 flex items-start justify-between gap-4">
-                        <div className="min-h-full flex-grow">
-                          <h1 className="text-3xl font-semibold">
-                            {group.name}
-                          </h1>
-                          <p className="mt-2 whitespace-pre-wrap text-base text-text-secondary/75">
-                            {group.description ||
-                              "Hello world, this is a long description about my life and this elective."}
-                          </p>
+                  {/* Group information */}
+                  <div className="flex flex-col p-4 @2xl/event:p-8">
+                    {/* Group name and description */}
+                    {group && (
+                      <div className="mb-4 flex flex-col">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-h-full flex-grow">
+                            <h1 className="text-3xl font-semibold">
+                              {group.name}
+                            </h1>
+                            <p className="mt-2 whitespace-pre-wrap text-base text-text-secondary/75">
+                              {group.description ||
+                                "Hello world, this is a long description about my life and this elective."}
+                            </p>
+                          </div>
+                          <FavoriteButton groupId={group.id} />
                         </div>
-                        <FavoriteButton groupId={group.id} />
                       </div>
+                    )}
+                    {/* Tags information */}
+                    <div className="flex flex-col">
                       <h2 className="my-4 flex text-3xl font-medium">Tags</h2>
                       <div className="flex flex-wrap gap-2">
-                        {group.tags?.map((tag) => (
-                          <div
-                            key={tag.id}
-                            className="flex w-fit rounded-2xl bg-secondary-main px-4 py-2"
-                          >
-                            {tag.name}
-                          </div>
-                        ))}
+                        {group ? (
+                          group.tags?.map((tag) => (
+                            <div
+                              key={tag.id}
+                              className="flex w-fit rounded-2xl bg-secondary-main px-4 py-2"
+                            >
+                              {tag.name}
+                            </div>
+                          ))
+                        ) : (
+                          <p className="text-white/75">Loading tags...</p>
+                        )}
                       </div>
-                      <div className="my-4 flex flex-row flex-wrap items-center">
-                        <h2 className="flex grow text-3xl font-medium">
-                          Calendar
-                        </h2>
+                    </div>
+                    {/* Calendar title and Export button */}
+                    <div className="my-4 flex flex-row flex-wrap items-center">
+                      <h2 className="flex grow text-3xl font-medium">
+                        Calendar
+                      </h2>
+                      {group ? (
                         <ExportButton alias={group.alias} />
-                      </div>
-                      <div className="-mx-4 -mb-4 @lg/event:-mx-8 @lg/event:-mb-8">
+                      ) : (
+                        <p className="text-white/75">Loading...</p>
+                      )}
+                    </div>
+                    {/* Calendar itself */}
+                    <div className="-mx-4 -mb-4 rounded-b-2xl @2xl/event:-mx-8 @2xl/event:-mb-8">
+                      {group ? (
                         <Calendar
                           urls={[getICSLink(group.alias, user?.id)]}
                           viewId="popup"
                         />
-                      </div>
+                      ) : (
+                        <p className="text-white/75">Loading calendar...</p>
+                      )}
                     </div>
-                  )}
+                  </div>
                 </div>
               </div>
             </FloatingFocusManager>