chore: run prettier

one-zero-eight · Feb 18, 2024 · f659d73 · f659d73
1 parent 17c6c46
commit f659d73
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 67 deletions.
diff --git a/app/@modal/(.)account/sign-in/page.tsx b/app/@modal/(.)account/sign-in/page.tsx
@@ -39,7 +39,7 @@ export default function Page() {
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="@container/sign-in z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/sign-in"
             lockScroll
           >
             <FloatingFocusManager context={context} initialFocus={signInRef}>
@@ -51,12 +51,12 @@ export default function Page() {
               >
                 <div className="h-fit max-w-2xl overflow-hidden rounded-2xl bg-primary-main">
                   <div className="flex flex-col p-4 @lg/sign-in:p-8">
-                    <div className="flex w-full flex-row mb-2">
+                    <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
                         {searchParams.get("header") || "Sign in to get access"}
                       </div>
                       <button
-                        className="-mt-2 -mr-2 w-52 h-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/sign-in:-mt-6 @lg/sign-in:-mr-6"
+                        className="-mr-2 -mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/sign-in:-mr-6 @lg/sign-in:-mt-6"
                         onClick={() => router.back()}
                       >
                         <span className="icon-[material-symbols--close] text-4xl" />

diff --git a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
@@ -53,7 +53,7 @@ export default function Page({ params: { alias } }: Props) {
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="@container/export z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/export"
             lockScroll
           >
             <FloatingFocusManager
@@ -68,12 +68,12 @@ export default function Page({ params: { alias } }: Props) {
               >
                 <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="flex w-full flex-row mb-2">
+                    <div className="mb-2 flex w-full flex-row">
                       <div className="grow items-center text-3xl font-semibold">
                         Export to your calendar
                       </div>
                       <button
-                        className="-mt-2 -mr-2 w-52 h-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/export:-mt-6 @lg/export:-mr-6"
+                        className="-mr-2 -mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75 @lg/export:-mr-6 @lg/export:-mt-6"
                         onClick={() => router.back()}
                       >
                         <span className="icon-[material-symbols--close] text-4xl" />
@@ -108,7 +108,7 @@ export default function Page({ params: { alias } }: Props) {
                       </li>
                       <li>Paste the link and click Add.</li>
                     </ul>
-                    { /* TODO: Determine what to do with calendar margin */ }
+                    {/* TODO: Determine what to do with calendar margin */}
                     <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
                       <Calendar
                         urls={calendarURL ? [calendarURL] : []}

diff --git a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
@@ -49,7 +49,7 @@ export default function Page({ params: { alias } }: Props) {
       {isMounted && (
         <FloatingPortal>
           <FloatingOverlay
-            className="@container/event z-10 grid place-items-center bg-black/75"
+            className="z-10 grid place-items-center bg-black/75 @container/event"
             lockScroll
           >
             <FloatingFocusManager context={context}>
@@ -64,19 +64,19 @@ export default function Page({ params: { alias } }: Props) {
                     style={{ backgroundImage: "url(/background-pattern.svg)" }}
                     className="flex h-64 w-full items-start justify-end bg-secondary-main bg-repeat"
                   >
-                    <div className="flex flex-row gap-4 mr-2">
+                    <div className="mr-2 flex flex-row gap-4">
                       <button
-                        className="mt-2 w-52 h-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
+                        className="mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
                         onClick={() => window.location.reload()}
                       >
                         <span className="icon-[material-symbols--open-in-full] text-4xl" />
                       </button>
                       <button
-                        className="mt-2 w-52 h-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
+                        className="mt-2 h-52 w-52 rounded-2xl p-2 text-icon-main/50 hover:bg-primary-hover/50 hover:text-icon-hover/75"
                         onClick={() => router.back()}
                       >
-                      <span className="icon-[material-symbols--close] text-4xl" />
-                    </button>
+                        <span className="icon-[material-symbols--close] text-4xl" />
+                      </button>
                     </div>
                   </div>
                   {group && (
@@ -110,7 +110,7 @@ export default function Page({ params: { alias } }: Props) {
                         </h2>
                         <ExportButton alias={group.alias} />
                       </div>
-                      { /* TODO: Determine what to do with calendar margin */ }
+                      {/* TODO: Determine what to do with calendar margin */}
                       <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
                         <Calendar
                           urls={[getICSLink(group.alias, user?.id)]}

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 import Calendar from "@/components/common/calendar/Calendar";
 import SignInButton from "@/components/common/SignInButton";
-import ExportButton from "@/components/schedule/ExportButton";
 import { GroupCard } from "@/components/schedule/group-card/GroupCard";
 import LinkIconButton from "@/components/schedule/group-card/LinkIconButton";
 import { PersonalCard } from "@/components/schedule/group-card/PersonalCard";
@@ -42,7 +41,7 @@ export default function Page() {
 
   return (
     <>
-      <div className="@container/account my-4 flex max-w-full flex-row gap-4">
+      <div className="my-4 flex max-w-full flex-row gap-4 @container/account">
         <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-border text-icon-main/50 @xl/account:h-24 @xl/account:w-24">
           <span className="icon-[material-symbols--sentiment-satisfied-outline-rounded] text-5xl @xl/account:text-6xl" />
         </div>
@@ -53,8 +52,8 @@ export default function Page() {
           </p>
         </div>
       </div>
-      <div className="@container/sections flex flex-col justify-between gap-4 @6xl/content:flex-row @6xl/content:gap-8">
-        <div className="@container/schedule flex w-full flex-col @6xl/content:w-1/2">
+      <div className="flex flex-col justify-between gap-4 @container/sections @6xl/content:flex-row @6xl/content:gap-8">
+        <div className="flex w-full flex-col @container/schedule @6xl/content:w-1/2">
           <h2 className="my-4 text-3xl font-medium">Schedule</h2>
           {favorites.filter((v) => v.predefined === true).length === 0 ? (
             <p className="mb-4 text-lg text-text-secondary/75">Nothing here.</p>
@@ -88,7 +87,7 @@ export default function Page() {
             </div>
           )}
         </div>
-        <div className="@container/favorites flex w-full flex-col @6xl/content:w-1/2">
+        <div className="flex w-full flex-col @container/favorites @6xl/content:w-1/2">
           <h2 className="my-4 text-3xl font-medium">Favorites</h2>
           {favorites.filter((v) => v.predefined === false).length === 0 ? (
             <p className="mb-4 text-lg text-text-secondary/75">
@@ -114,7 +113,9 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Your calendar</h2>
-      <div className="lg:-mx-8"> {/* TODO: -mx-8 makes calendars margin not equal on PC. is it good or not? */}
+      <div className="">
+        {" "}
+        {/* TODO: -mx-8 makes calendars margin not equal on PC. is it good or not? */}
         {!user ? (
           <>Loading...</>
         ) : (

diff --git a/app/dashboard/template.tsx b/app/dashboard/template.tsx
@@ -2,7 +2,7 @@ import { NavbarTemplate } from "@/components/layout/Navbar";
 
 export default function Template({ children }: React.PropsWithChildren) {
   return (
-    <div className="@container/content flex flex-col p-4 @2xl/main:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="Dashboard"
         description="Your cozy space on this planet."

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -60,7 +60,7 @@ export default function RootLayout({
 
           <div className="flex flex-row">
             <Sidebar>
-              <main className="@container/main w-full">{children}</main>
+              <main className="w-full @container/main">{children}</main>
             </Sidebar>
           </div>
           {modal}

diff --git a/app/music-room/page.tsx b/app/music-room/page.tsx
@@ -6,7 +6,7 @@ import React from "react";
 
 export default function Page() {
   return (
-    <div className="@container/content flex flex-col p-4 @2xl/main:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="Music room"
         description="Book the Music room in Sports center freely."
@@ -90,7 +90,7 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Booking calendar</h2>
-        { /* TODO: Determine what to do with the margin of calendar */ }
+      {/* TODO: Determine what to do with the margin of calendar */}
       <div className="lg:-mx-8">
         <Calendar
           urls={[

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Page() {
   return (
-    <div className="@container/content flex h-[100dvh] flex-row justify-center p-4 @2xl/main:p-12">
+    <div className="flex h-[100dvh] flex-row justify-center p-4 @container/content @2xl/main:p-12">
       <div className="flex flex-col justify-center text-center">
         <h1 className="mb-8 text-4xl font-bold">404 / not found</h1>
         <Link href="/" className="selected">

diff --git a/app/schedule/[category]/page.tsx b/app/schedule/[category]/page.tsx
@@ -38,7 +38,7 @@ export default async function Page({ params: { category } }: Props) {
   const categoryInfo = getCategoryInfoBySlug(category);
 
   return (
-    <div className="@container/content flex flex-col p-4 @lg/main:p-12">
+    <div className="flex flex-col p-4 @container/content @lg/main:p-12">
       <NavbarTemplate
         title={`Schedule${
           categoryInfo?.title ? " — " + categoryInfo.title : ""

diff --git a/app/schedule/event-groups/[alias]/page.tsx b/app/schedule/event-groups/[alias]/page.tsx
@@ -24,14 +24,14 @@ export default function Page({ params: { alias } }: Props) {
     <>
       <div
         style={{ backgroundImage: "url(/background-pattern.svg)" }}
-        className="@container/navbar h-64 bg-primary-main bg-repeat p-4 @2xl/main:p-12"
+        className="h-64 bg-primary-main bg-repeat p-4 @container/navbar @2xl/main:p-12"
       >
         <NavbarTemplate title="" description="" />
       </div>
       {group && (
-        <div className="@container/content flex flex-col p-4 @2xl/main:p-12">
+        <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
           <div className="mb-4 flex items-start justify-between gap-4">
-            <div className="flex flex-col gap-2 min-h-full flex-grow">
+            <div className="flex min-h-full flex-grow flex-col gap-2">
               <h1 className="text-3xl font-semibold">{group.name}</h1>
               <p className="whitespace-pre-wrap text-base text-text-secondary/75">
                 {group.description ||
@@ -55,7 +55,9 @@ export default function Page({ params: { alias } }: Props) {
             <h2 className="flex grow text-3xl font-medium">Calendar</h2>
             <ExportButton alias={group.alias} />
           </div>
-          <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8"> {/* TODO: Calendar margin is not good? */}
+          <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
+            {" "}
+            {/* TODO: Calendar margin is not good? */}
             <Calendar
               urls={[getICSLink(group.alias, user?.id)]}
               initialView={

diff --git a/app/schedule/page.tsx b/app/schedule/page.tsx
@@ -5,7 +5,7 @@ import { NavbarTemplate } from "@/components/layout/Navbar";
 
 export default function Page() {
   return (
-    <div className="@container/content flex flex-col p-4 @2xl/main:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="InNoHassle ecosystem"
         description={

diff --git a/app/scholarship/page.tsx b/app/scholarship/page.tsx
@@ -8,7 +8,7 @@ import ScholarshipCalculator from "@/components/scholarship/ScholarshipCalculato
 
 export default function Page() {
   return (
-    <div className="@container/content flex flex-col p-4 @2xl/main:p-12">
+    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
       <NavbarTemplate
         title="Scholarship calculator"
         description="Calculate your scholarship easily. Just type your marks, GPA or expected scholarship."

diff --git a/app/~offline/page.tsx b/app/~offline/page.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function Page() {
   return (
-    <div className="@container/content flex h-[100dvh] flex-row justify-center p-4 @2xl/main:p-12">
+    <div className="flex h-[100dvh] flex-row justify-center p-4 @container/content @2xl/main:p-12">
       <div className="flex flex-col justify-center text-center">
         <h1 className="mb-4 text-4xl font-bold">You are offline</h1>
         <p className="mb-4">However, some pages may work.</p>

diff --git a/components/icons/Arrow.tsx b/components/icons/Arrow.tsx
@@ -9,7 +9,10 @@ function Arrow({ ...props }: IconProps) {
       viewBox="0 0 102 38"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
-      className={clsx("rotate-90 fill-border @2xl/clarify:rotate-0", props.className)}
+      className={clsx(
+        "rotate-90 fill-border @2xl/clarify:rotate-0",
+        props.className,
+      )}
     >
       <path d="M3 16.5C1.61929 16.5 0.5 17.6193 0.5 19C0.5 20.3807 1.61929 21.5 3 21.5V16.5ZM100.768 20.7678C101.744 19.7915 101.744 18.2085 100.768 17.2322L84.8579 1.32233C83.8816 0.34602 82.2986 0.34602 81.3223 1.32233C80.346 2.29864 80.346 3.88155 81.3223 4.85786L95.4645 19L81.3223 33.1421C80.346 34.1184 80.346 35.7014 81.3223 36.6777C82.2986 37.654 83.8816 37.654 84.8579 36.6777L100.768 20.7678ZM3 21.5H99V16.5H3V21.5Z" />
     </svg>

diff --git a/components/schedule/ClarificationContainer.tsx b/components/schedule/ClarificationContainer.tsx
@@ -3,7 +3,7 @@ import Arrow from "@/components/icons/Arrow";
 
 export default function ClarificationContainer() {
   return (
-    <div className="@container/clarify my-4 grid w-full grid-cols-1 place-items-center gap-y-10 @2xl/content:grid-cols-3 @5xl/content:grid-cols-7">
+    <div className="my-4 grid w-full grid-cols-1 place-items-center gap-y-10 @container/clarify @2xl/content:grid-cols-3 @5xl/content:grid-cols-7">
       <ClarificationCard
         icon={
           <>

diff --git a/components/schedule/group-card/FavoriteButton.tsx b/components/schedule/group-card/FavoriteButton.tsx
@@ -28,7 +28,7 @@ export default function FavoriteButton({ groupId }: { groupId: number }) {
             switchFavorite && switchFavorite();
           }
         }}
-        className="w-52 h-52 p-2 -mr-2 rounded-2xl text-4xl text-icon-main/50 hover:bg-secondary-hover hover:text-icon-hover/75"
+        className="-mr-2 h-52 w-52 rounded-2xl p-2 text-4xl text-icon-main/50 hover:bg-secondary-hover hover:text-icon-hover/75"
       >
         {isPredefined ? (
           <span className="icon-[material-symbols--stars-outline] text-[#78DBE2]" />

diff --git a/components/schedule/group-card/GroupCard.tsx b/components/schedule/group-card/GroupCard.tsx
@@ -1,9 +1,6 @@
 import FavoriteButton from "@/components/schedule/group-card/FavoriteButton";
 import HideButton from "@/components/schedule/group-card/HideButton";
-import {
-  getAllTagsByType,
-  getFirstTagByType,
-} from "@/lib/event-group";
+import { getAllTagsByType, getFirstTagByType } from "@/lib/event-group";
 import { ViewEventGroup } from "@/lib/events";
 import { viewConfig } from "@/lib/events-view-config";
 import { useRouter } from "next/navigation";
@@ -56,10 +53,8 @@ export function GroupCard({ group, canHide = false }: GroupCardProps) {
         )}
       </div>
       <div className="flex select-none flex-row place-items-center">
-        {canHide && (
-          <HideButton groupId={group.id} />
-        )}
-          <FavoriteButton groupId={group.id} />
+        {canHide && <HideButton groupId={group.id} />}
+        <FavoriteButton groupId={group.id} />
       </div>
     </div>
   );

diff --git a/components/schedule/group-card/HideButton.tsx b/components/schedule/group-card/HideButton.tsx
@@ -1,23 +1,23 @@
 import Tooltip from "@/components/common/Tooltip";
-import {useEventGroup} from "@/lib/event-group";
+import { useEventGroup } from "@/lib/event-group";
 
 export default function HideButton({ groupId }: { groupId: number }) {
-    const { isHidden, switchHideFavorite } = useEventGroup(groupId);
-    return <Tooltip
-        content={isHidden ? "Hidden from calendar" : "Hide from calendar"}
-    >
-        <button
-            onClick={(e) => {
-                e.stopPropagation();
-                switchHideFavorite && switchHideFavorite();
-            }}
-            className="w-52 h-52 p-2 rounded-2xl text-4xl hover:bg-secondary-hover"
-        >
-            {isHidden ? (
-                <span className="icon-[material-symbols--visibility-off-outline] text-icon-main/50" />
-            ) : (
-                <span className="icon-[material-symbols--visibility-outline] text-icon-main/50" />
-            )}
-        </button>
+  const { isHidden, switchHideFavorite } = useEventGroup(groupId);
+  return (
+    <Tooltip content={isHidden ? "Hidden from calendar" : "Hide from calendar"}>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          switchHideFavorite && switchHideFavorite();
+        }}
+        className="h-52 w-52 rounded-2xl p-2 text-4xl hover:bg-secondary-hover"
+      >
+        {isHidden ? (
+          <span className="icon-[material-symbols--visibility-off-outline] text-icon-main/50" />
+        ) : (
+          <span className="icon-[material-symbols--visibility-outline] text-icon-main/50" />
+        )}
+      </button>
     </Tooltip>
-}
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,11 +10,11 @@ module.exports = {
   theme: {
     extend: {
       width: {
-        52: '3.25rem',
+        52: "3.25rem",
         256: "64rem",
       },
       height: {
-        52: '3.25rem',
+        52: "3.25rem",
       },
       colors: {
         base: "rgba(var(--color-base) / <alpha-value>)",
@@ -60,7 +60,7 @@ module.exports = {
         "lg-h": { raw: "(min-height: 1024px)" },
         "xl-h": { raw: "(min-height: 1280px)" },
         "2xl-h": { raw: "(min-height: 1536px)" },
-        "4xl": { raw: "(min-width: 2048px)"},
+        "4xl": { raw: "(min-width: 2048px)" },
       },
       spacing: {
         "18p": "4.5rem",
@@ -71,6 +71,6 @@ module.exports = {
   plugins: [
     // Iconify plugin
     addDynamicIconSelectors(),
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/container-queries"),
   ],
 };