feat: redesign 'schedule' page; refactor tailwind theme; remove headlessui

Author: ArtemSBulgakov

package.json

@@ -30,7 +30,6 @@
     "@fullcalendar/moment": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@headlessui/react": "^2.1.8",
     "@iconify/json": "^2.2.248",
     "@iconify/tailwind": "^1.1.3",
     "@mdx-js/mdx": "^3.0.1",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import { Topbar } from "@/components/layout/Topbar.tsx";
-import ScheduleList from "@/components/schedule/ScheduleList.tsx";
+import SchedulePage from "@/components/schedule/SchedulePage.tsx";
 import { getCategoryInfoBySlug } from "@/lib/events/events-view-config.ts";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
@@ -20,8 +20,8 @@ export const Route = createFileRoute("/_with_menu/schedule/$category")({
           <meta name="description" content={categoryInfo.shortDescription} />
         </Helmet>
 
-        <Topbar title={`Schedule — ${categoryInfo.title}`} />
-        <ScheduleList category={category} />
+        <Topbar title="Schedule" />
+        <SchedulePage category={category} />
       </>
     );
   },

src/app/routes/_with_menu/schedule/$category.tsx

@@ -1,5 +1,5 @@
 import { Topbar } from "@/components/layout/Topbar.tsx";
-import { ScheduleMainPage } from "@/components/schedule/ScheduleMainPage.tsx";
+import SchedulePage from "@/components/schedule/SchedulePage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
@@ -16,8 +16,9 @@ export const Route = createFileRoute("/_with_menu/schedule/")({
           }
         />
       </Helmet>
+
       <Topbar title="Schedule" />
-      <ScheduleMainPage />
+      <SchedulePage category={null} />
     </>
   ),
 });

src/app/routes/_with_menu/schedule/index.tsx

@@ -3,12 +3,8 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 export const Route = createFileRoute("/")({
   component: () => null,
 
-  // Check state
-  beforeLoad: ({ context }) => {
-    if (context.isAuthenticated) {
-      throw redirect({ to: "/dashboard" });
-    } else {
-      throw redirect({ to: "/schedule" });
-    }
+  // Redirect to Dashboard
+  beforeLoad: () => {
+    throw redirect({ to: "/dashboard" });
   },
 });

src/app/routes/index.tsx

@@ -9,7 +9,12 @@
   :root {
     @apply bg-base;
     color-scheme: light;
-    accent-color: var(--color-focus);
+    accent-color: var(--color-brand-violet);
+
+    --color-brand-violet: 151 71 255; /* #9747FF */
+    --color-brand-gradient-start: 154 46 255; /* #9A2EFF */
+    --color-brand-gradient-end: 209 35 162; /* #D1233E */
+
     --color-base: 255 255 255; /* #FFFFFF */
     --color-primary: 235 237 239; /* #EBEDEF */
     --color-primary-hover: 223 225 229; /* #DFE1E5 */
@@ -19,16 +24,11 @@
     --color-secondary-hover: 210 212 216; /* #D2D4D8 */
     --color-border: 211 211 211; /* #D3D3D3 */
     --color-border-hover: 182 182 182;
-    --color-disabled: 192 192 192; /* #C0C0C0 */
     --color-inactive: 138 138 138; /* #8A8A8A */
     --color-icon: 0 0 0; /* #00000080 */
     --color-icon-hover: 0 0 0; /* #000000BF */
     --color-text: 0 0 0; /* #000000 */
     --color-text-secondary: 0 0 0; /* #000000BF */
-    --color-text-transparent: 0 0 0; /* #00000080 */
-    --color-section-g-start: 154 46 255; /* #9A2EFF */
-    --color-section-g-end: 209 35 162; /* #D1233E */
-    --color-focus: 151 71 255; /* #9747FF */
   }
   :root[class~="dark"] {
     color-scheme: dark;
@@ -41,29 +41,20 @@
     --color-secondary-hover: 55 55 55; /* #373737 */
     --color-border: 44 44 44; /* #2C2C2C */
     --color-border-hover: 60 60 60;
-    --color-disabled: 43 43 43; /* #2B2B2B */
     --color-inactive: 105 105 105; /* #696969 */
     --color-icon: 255 255 255; /* #FFFFFF7F */
     --color-icon-hover: 255 255 255; /* #FFFFFFBF */
     --color-text: 255 255 255; /* #FFFFFF */
     --color-text-secondary: 255 255 255; /* #FFFFFFBF */
-    --color-text-transparent: 255 255 255; /* #FFFFFF7F */
-    --color-section-g-start: 154 46 255; /* #9A2EFF */
-    --color-section-g-end: 209 35 162; /* #D1233E */
-    --color-focus: 151 71 255; /* #9747FF */
   }
 }
 
 @layer components {
   .selected {
-    @apply bg-gradient-to-r from-section_g_start to-section_g_end bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-brand-gradient-start to-brand-gradient-end bg-clip-text text-transparent;
   }
 }
 
-body {
-  overflow-y: scroll;
-}
-
 .rubles-input {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='48px' width='192px'><text x='164' y='27' fill='gray' font-size='18px' font-family='sans-serif'>₽</text></svg>");
   background-repeat: no-repeat;

src/app/styles.css

@@ -96,7 +96,7 @@ export function ConnectTelegramPage() {
       </div>
       <div className="flex items-center justify-center">
         <button
-          className="border-focus_color flex h-14 w-fit items-center justify-center gap-4 rounded-2xl border-2 bg-base px-6 py-2 text-xl font-medium hover:bg-primary-hover"
+          className="flex h-14 w-fit items-center justify-center gap-4 rounded-2xl border-2 border-brand-violet bg-base px-6 py-2 text-xl font-medium hover:bg-primary-hover"
           onClick={() => {
             const searchParams = new URLSearchParams(searchStr);
             const bot = searchParams.get("bot");

src/components/account/ConnectTelegramPage.tsx

@@ -3,8 +3,8 @@
   --fc-page-bg-color: theme("colors.base");
   --fc-border-color: theme("colors.inactive/0.5");
   --fc-list-event-hover-bg-color: theme("colors.primary.hover");
-  --fc-event-bg-color: theme("colors.section_g_end");
-  --fc-event-border-color: theme("colors.focus");
+  --fc-event-bg-color: theme("colors.brand.violet");
+  --fc-event-border-color: theme("colors.brand.violet");
   --fc-button-bg-color: theme("colors.primary.main");
   --fc-button-hover-bg-color: theme("colors.primary.hover");
   --fc-button-active-bg-color: theme("colors.primary.hover");

src/components/calendar/styles-calendar.css

@@ -18,7 +18,7 @@ export const SignInButton = forwardRef(function SignInButton_(
       ref={ref}
       rel="nofollow noindex"
       className={clsx(
-        "flex h-14 w-fit items-center justify-center gap-4 rounded-2xl border-2 border-focus bg-base px-6 py-2 text-xl font-medium hover:bg-primary-hover",
+        "flex h-14 w-fit items-center justify-center gap-4 rounded-2xl border-2 border-brand-violet bg-base px-6 py-2 text-xl font-medium hover:bg-primary-hover",
         className,
       )}
       onClick={(e) => {

src/components/common/SignInButton.tsx

@@ -55,14 +55,14 @@ export function DashboardPage() {
           className="group flex flex-row gap-4 rounded-2xl bg-primary-main px-4 py-6 hover:bg-secondary-main"
         >
           <div className="w-12">
-            <span className="icon-[ic--baseline-telegram] text-5xl text-[#9747FF]" />
+            <span className="icon-[ic--baseline-telegram] text-5xl text-brand-violet" />
           </div>
           <div className="flex flex-col gap-2">
             <p className="text-2xl font-semibold text-text-main">
               Telegram channel
             </p>
             <p className="text-lg text-text-secondary/75">
-              Join <span className="text-[#9747FF]">one-zero-eight</span>{" "}
+              Join <span className="text-brand-violet">one-zero-eight</span>{" "}
               channel in Telegram for all important information about
               InNoHassle.
             </p>
@@ -109,7 +109,7 @@ export function DashboardPage() {
                 name={
                   <span className="flex items-center">
                     Moodle
-                    <span className="ml-2 rounded-full bg-focus px-2 py-1 text-xs font-semibold text-white">
+                    <span className="ml-2 rounded-full bg-brand-violet px-2 py-1 text-xs font-semibold text-white">
                       NEW
                     </span>
                   </span>