feat: refactor general layout; topbar; add 'feedback' button

one-zero-eight · Oct 26, 2024 · 9ded6fa · 9ded6fa
1 parent 39bf485
commit 9ded6fa
Show file tree

Hide file tree

Showing 45 changed files with 588 additions and 660 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="dark h-full overflow-hidden">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -36,14 +36,14 @@
     <script type="module" src="/src/app/entry-client.tsx"></script>
   </head>
 
-  <body>
+  <body class="h-full overflow-hidden">
     <!-- Notice in case of disabled JavaScript -->
     <noscript class="flex w-full justify-center bg-red-700 p-8">
       You need to enable JavaScript to run this app.
     </noscript>
 
     <!-- Main app container -->
-    <div id="app" class="font-primary text-lg text-text-main">
+    <div id="app" class="h-full font-rubik text-lg text-text-main">
       <!-- Show loading state. App will replace this after rendering -->
       <div class="flex h-screen w-full items-center justify-center">
         <span

diff --git a/src/app/routes/__root.tsx b/src/app/routes/__root.tsx
@@ -34,18 +34,16 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 
   // 404 page
   notFoundComponent: () => (
-    <div className="flex flex-row">
+    <div className="flex h-full flex-row">
       <Sidebar>
-        <main className="w-full @container/main">
-          <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 to="/" className="selected">
-                Go to main
-              </Link>
-            </div>
+        <div className="flex h-full flex-grow flex-col">
+          <div className="flex h-full flex-col justify-center text-center @container/content">
+            <h1 className="mb-4 text-4xl font-bold">404 / not found</h1>
+            <Link to="/" className="selected">
+              Go to dashboard
+            </Link>
           </div>
-        </main>
+        </div>
       </Sidebar>
     </div>
   ),

diff --git a/src/app/routes/_with_menu/account/connect-telegram.tsx b/src/app/routes/_with_menu/account/connect-telegram.tsx
@@ -17,7 +17,7 @@ export const Route = createFileRoute("/_with_menu/account/connect-telegram")({
         <link rel="canonical" href="https://innohassle.ru/account" />
       </Helmet>
 
-      <div className="my-4 flex w-full max-w-md flex-col gap-4 rounded-2xl bg-primary-main px-4 py-6 @container/account">
+      <div className="m-4 flex w-full max-w-md flex-col gap-4 rounded-2xl bg-primary-main px-4 py-6 @container/account">
         <img
           src="/icon.svg"
           alt="InNoHassle logo"

diff --git a/src/app/routes/_with_menu/account/route.tsx b/src/app/routes/_with_menu/account/route.tsx
@@ -1,13 +1,10 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_with_menu/account")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
-      <NavbarTemplate
-        title="My account"
-        description="Manage your InNoHassle Account and services."
-      />
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
+      <Topbar title="My account" />
       <Outlet />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/dashboard.tsx b/src/app/routes/_with_menu/dashboard.tsx
@@ -1,11 +1,11 @@
 import { DashboardPage } from "@/components/dashboard/DashboardPage.tsx";
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/dashboard")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Dashboard</title>
         <meta
@@ -14,10 +14,7 @@ export const Route = createFileRoute("/_with_menu/dashboard")({
         />
       </Helmet>
 
-      <NavbarTemplate
-        title="Dashboard"
-        description="Your cozy space on this planet."
-      />
+      <Topbar title="Dashboard" />
       <DashboardPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/extension.tsx b/src/app/routes/_with_menu/extension.tsx
@@ -1,11 +1,11 @@
 import { ExtensionPage } from "@/components/extension/ExtensionPage.tsx";
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/extension")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Browser extension</title>
         <meta
@@ -14,10 +14,7 @@ export const Route = createFileRoute("/_with_menu/extension")({
         />
       </Helmet>
 
-      <NavbarTemplate
-        title="Browser extension"
-        description="Convenient tools for Moodle, InNoHassle and other services at Innopolis University."
-      />
+      <Topbar title="Browser extension" />
       <ExtensionPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/maps.tsx b/src/app/routes/_with_menu/maps.tsx
@@ -1,4 +1,4 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { MapsPage } from "@/components/maps/MapsPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
@@ -15,7 +15,7 @@ export const Route = createFileRoute("/_with_menu/maps")({
   component: function RouteComponent() {
     const { sceneId } = Route.useSearch();
     return (
-      <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+      <div className="flex min-h-full flex-col overflow-y-auto @container/content">
         <Helmet>
           <title>Maps</title>
           <meta
@@ -24,13 +24,8 @@ export const Route = createFileRoute("/_with_menu/maps")({
           />
         </Helmet>
 
-        <NavbarTemplate
-          title="Maps"
-          description="View plans of Innopolis University."
-        />
-        <div className="mt-4 flex-grow">
-          <MapsPage sceneId={sceneId} />
-        </div>
+        <Topbar title="Maps" />
+        <MapsPage sceneId={sceneId} />
       </div>
     );
   },

diff --git a/src/app/routes/_with_menu/music-room.index.tsx b/src/app/routes/_with_menu/music-room.index.tsx
@@ -1,20 +1,17 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { MusicRoomPage } from "@/components/music-room/MusicRoomPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/music-room/")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Music room</title>
         <meta name="description" content="Book the Music room in Innopolis." />
       </Helmet>
 
-      <NavbarTemplate
-        title="Music room"
-        description="Book the Music room in Sports center freely."
-      />
+      <Topbar title="Music room" />
       <MusicRoomPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/music-room.instructions.tsx b/src/app/routes/_with_menu/music-room.instructions.tsx
@@ -1,20 +1,17 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { MusicRoomInstructions } from "@/components/music-room/MusicRoomInstructions.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/music-room/instructions")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Music room</title>
         <meta name="description" content="Book the Music room in Innopolis." />
       </Helmet>
 
-      <NavbarTemplate
-        title="Music room"
-        description="Book the Music room in Sports center freely."
-      />
+      <Topbar title="Music room" />
       <MusicRoomInstructions />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/room-booking.tsx b/src/app/routes/_with_menu/room-booking.tsx
@@ -1,11 +1,11 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { RoomBookingPage } from "@/components/room-booking/RoomBookingPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/room-booking")({
   component: () => (
-    <div className="flex h-[100dvh] flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Room booking</title>
         <meta
@@ -14,13 +14,8 @@ export const Route = createFileRoute("/_with_menu/room-booking")({
         />
       </Helmet>
 
-      <NavbarTemplate
-        title="Room booking"
-        description="Book auditoriums and meeting rooms in Innopolis University."
-      />
-      <div className="mt-4 flex-grow overflow-hidden">
-        <RoomBookingPage />
-      </div>
+      <Topbar title="Room booking" />
+      <RoomBookingPage />
     </div>
   ),
 });
diff --git a/src/app/routes/_with_menu/rooms.tsx b/src/app/routes/_with_menu/rooms.tsx
@@ -1,11 +1,11 @@
 import { DormRoomsPage } from "@/components/dorm-rooms/DormRoomsPage.tsx";
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/rooms")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Dorm rooms</title>
         <meta
@@ -14,10 +14,7 @@ export const Route = createFileRoute("/_with_menu/rooms")({
         />
       </Helmet>
 
-      <NavbarTemplate
-        title="Dorm rooms"
-        description="Split duties in your dormitory room."
-      />
+      <Topbar title="Dorm rooms" />
       <DormRoomsPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/route.tsx b/src/app/routes/_with_menu/route.tsx
@@ -3,11 +3,11 @@ import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_with_menu")({
   component: () => (
-    <div className="flex flex-row">
+    <div className="flex h-full flex-row">
       <Sidebar>
-        <main className="min-h-[100dvh] w-full @container/main">
+        <div className="flex h-full flex-grow flex-col">
           <Outlet />
-        </main>
+        </div>
       </Sidebar>
     </div>
   ),

diff --git a/src/app/routes/_with_menu/schedule/$category.tsx b/src/app/routes/_with_menu/schedule/$category.tsx
@@ -1,4 +1,4 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import ScheduleList from "@/components/schedule/ScheduleList.tsx";
 import { getCategoryInfoBySlug } from "@/lib/events/events-view-config.ts";
 import { createFileRoute, redirect } from "@tanstack/react-router";
@@ -14,16 +14,13 @@ export const Route = createFileRoute("/_with_menu/schedule/$category")({
     }
 
     return (
-      <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+      <div className="flex min-h-full flex-col overflow-y-auto @container/content">
         <Helmet>
           <title>{categoryInfo.title} — Schedule</title>
           <meta name="description" content={categoryInfo.shortDescription} />
         </Helmet>
 
-        <NavbarTemplate
-          title={`Schedule — ${categoryInfo.title}`}
-          description={categoryInfo.shortDescription}
-        />
+        <Topbar title={`Schedule — ${categoryInfo.title}`} />
         <ScheduleList category={category} />
       </div>
     );

diff --git a/src/app/routes/_with_menu/schedule/index.tsx b/src/app/routes/_with_menu/schedule/index.tsx
@@ -1,11 +1,11 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { ScheduleMainPage } from "@/components/schedule/ScheduleMainPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/schedule/")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Schedule</title>
         <meta
@@ -16,23 +16,7 @@ export const Route = createFileRoute("/_with_menu/schedule/")({
           }
         />
       </Helmet>
-      <NavbarTemplate
-        title="InNoHassle ecosystem"
-        description={
-          <>
-            Services developed by{" "}
-            <a
-              href="https://t.me/one_zero_eight"
-              className="selected"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              one-zero-eight
-            </a>{" "}
-            community for Innopolis students.
-          </>
-        }
-      />
+      <Topbar title="Schedule" />
       <ScheduleMainPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/scholarship.tsx b/src/app/routes/_with_menu/scholarship.tsx
@@ -1,11 +1,11 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { ScholarshipPage } from "@/components/scholarship/ScholarshipPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Helmet } from "react-helmet-async";
 
 export const Route = createFileRoute("/_with_menu/scholarship")({
   component: () => (
-    <div className="flex flex-col p-4 @container/content @2xl/main:p-12">
+    <div className="flex min-h-full flex-col overflow-y-auto @container/content">
       <Helmet>
         <title>Scholarship calculator</title>
         <meta
@@ -17,10 +17,7 @@ export const Route = createFileRoute("/_with_menu/scholarship")({
         />
       </Helmet>
 
-      <NavbarTemplate
-        title="Scholarship calculator"
-        description="Calculate your scholarship easily. Just type your marks, GPA or expected scholarship."
-      />
+      <Topbar title="Scholarship" />
       <ScholarshipPage />
     </div>
   ),

diff --git a/src/app/routes/_with_menu/search.tsx b/src/app/routes/_with_menu/search.tsx
@@ -1,4 +1,4 @@
-import { NavbarTemplate } from "@/components/layout/Navbar.tsx";
+import { Topbar } from "@/components/layout/Topbar.tsx";
 import { SearchPage } from "@/components/search/SearchPage.tsx";
 import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";
@@ -20,19 +20,16 @@ export const Route = createFileRoute("/_with_menu/search")({
     const { q } = Route.useSearch();
     return (
       <Suspense>
-        <div className="flex min-h-[100dvh] flex-col p-4 @container/content @2xl/main:p-12">
+        <div className="flex min-h-full flex-col overflow-y-auto @container/content">
           <Helmet>
             <title>Search</title>
             <meta
               name="description"
-              content="Search for anything at Innopolis University."
+              content="Search anything at Innopolis University."
             />
           </Helmet>
 
-          <NavbarTemplate
-            title="Search"
-            description="Find anything at Innopolis University"
-          />
+          <Topbar title="Search" />
           <SearchPage searchQuery={q} />
         </div>
       </Suspense>