Skip to content

Commit

Permalink
feat: small changes to the UI to maintain design consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@qamarq
qamarq committed Nov 14, 2024
1 parent be2b892 commit 1ad0538
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 108 deletions.
126 changes: 64 additions & 62 deletions frontend/src/app/(homepage)/_components/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,79 +24,81 @@ export const Navbar = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
<div className="relative z-50 flex h-20 items-center justify-between">
<Logo />
<div className="relative z-50 h-20 backdrop-blur-[12px] border-b border-white/10">
<div className="flex items-center justify-between container mx-auto">
<Logo />

<nav className="hidden h-20 flex-row items-center gap-10 pr-10 text-white md:flex lg:pr-40">
<ul className="flex gap-6">
<li className="cursor-pointer">
<a href="https://www.facebook.com/knsolvro">Aktualności</a>
</li>

<li className="cursor-pointer">
<a
target="_blank"
href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html"
rel="noreferrer"
>
Terminarz USOS
</a>
</li>
<li className="cursor-pointer">
<a href="https://solvro.pwr.edu.pl/contact/">Kontakt</a>
</li>
<li className="cursor-pointer">
<a href="https://forms.gle/4tBCPkLMFKptB1iZ7">Zgłoś błąd</a>
</li>
</ul>
</nav>

{/* Mobile Menu Icon */}
<div className="flex items-center md:hidden">
<button onClick={toggleMenu} className="text-white focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>

{/* Mobile Menu */}
{isMenuOpen ? (
<div className="absolute left-0 top-full w-full animate-fade-in bg-mainbutton6 shadow-lg md:hidden">
<ul className="flex flex-col gap-4 p-4 text-center uppercase text-white">
<li className="cursor-pointer p-2">
<nav className="hidden h-20 flex-row items-center gap-10 pr-10 text-white md:flex lg:pr-40">
<ul className="flex gap-6">
<li className="cursor-pointer">
<a href="https://www.facebook.com/knsolvro">Aktualności</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=instrukcjePL.html">
Instrukcje
</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html">
Terminarz

<li className="cursor-pointer">
<a
target="_blank"
href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html"
rel="noreferrer"
>
Terminarz USOS
</a>
</li>
<li className="cursor-pointer p-2">
<li className="cursor-pointer">
<a href="https://solvro.pwr.edu.pl/contact/">Kontakt</a>
</li>
<li className="cursor-pointer p-2">
<li className="cursor-pointer">
<a href="https://forms.gle/4tBCPkLMFKptB1iZ7">Zgłoś błąd</a>
</li>
</ul>
</nav>

{/* Mobile Menu Icon */}
<div className="flex items-center md:hidden">
<button onClick={toggleMenu} className="text-white focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
) : null}

{/* Mobile Menu */}
{isMenuOpen ? (
<div className="absolute left-0 top-full w-full animate-fade-in bg-mainbutton6 shadow-lg md:hidden">
<ul className="flex flex-col gap-4 p-4 text-center uppercase text-white">
<li className="cursor-pointer p-2">
<a href="https://www.facebook.com/knsolvro">Aktualności</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=instrukcjePL.html">
Instrukcje
</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html">
Terminarz
</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://solvro.pwr.edu.pl/contact/">Kontakt</a>
</li>
<li className="cursor-pointer p-2">
<a href="https://forms.gle/4tBCPkLMFKptB1iZ7">Zgłoś błąd</a>
</li>
</ul>
</div>
) : null}
</div>
</div>
);
};
2 changes: 1 addition & 1 deletion frontend/src/app/(homepage)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@ export default function LayoutHomePage({
</div>
</div>

<Navbar />
<div className="container mx-auto">
<Navbar />
{children}
<Footer />
</div>
Expand Down
58 changes: 33 additions & 25 deletions frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import { faculties, lessonTypeToName } from "@/constants";
import { usePlan } from "@/lib/usePlan";
import { registrationReplacer } from "@/lib/utils";
import { Day, Frequency, LessonType } from "@/services/usos/types";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { MdArrowBack } from "react-icons/md";

export default function CreateNewPlanPage({ planId }: { planId: string }) {
const plan = usePlan({
Expand Down Expand Up @@ -103,30 +106,35 @@ export default function CreateNewPlanPage({ planId }: { planId: string }) {
<div className="flex w-full max-w-[350px] flex-col items-center justify-center gap-2 px-2 md:ml-4 md:w-4/12 md:flex-col">
<div className="flex flex-col justify-start gap-3 md:w-full">
<div className="flex w-full items-end gap-2">
<form
className="flex w-full items-center justify-center"
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
plan.changeName(formData.get("name")?.toString() ?? "");
inputRef.current?.blur();
}}
>
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="name">Nazwa</Label>
<Input
ref={inputRef}
type="text"
name="name"
id="name"
placeholder="Wolne poniedziałki"
defaultValue={typeof window === "undefined" ? "" : plan.name}
onChange={(e) => {
plan.changeName(e.currentTarget.value);
}}
/>
</div>
</form>
<div className="flex gap-2 items-end">
<Link href="/plans">
<Button variant="outline" size="icon"><MdArrowBack size={20} /></Button>
</Link>
<form
className="flex w-full items-center justify-center"
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
plan.changeName(formData.get("name")?.toString() ?? "");
inputRef.current?.blur();
}}
>
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="name">Nazwa</Label>
<Input
ref={inputRef}
type="text"
name="name"
id="name"
placeholder="Wolne poniedziałki"
defaultValue={typeof window === "undefined" ? "" : plan.name}
onChange={(e) => {
plan.changeName(e.currentTarget.value);
}}
/>
</div>
</form>
</div>
<PlanDisplayLink id={plan.id} />
</div>
</div>
Expand All @@ -139,7 +147,7 @@ export default function CreateNewPlanPage({ planId }: { planId: string }) {
setFaculty(v);
}}
>
<SelectTrigger className="pl-2" isLoading={registrations.isLoading}>
<SelectTrigger className="pl-2" disabled={registrations.isLoading}>
<SelectValue placeholder="Wydział" />
</SelectTrigger>
<SelectContent className="max-w-full">
Expand Down
34 changes: 18 additions & 16 deletions frontend/src/app/plans/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,29 @@ export default function PlansLayout({
return (
<div className="flex min-h-screen flex-col items-center gap-3 overflow-x-hidden">
<div className="flex max-h-20 min-h-20 w-full items-center justify-between bg-mainbutton7">
<div className="ml-4 flex items-center gap-2 text-2xl font-bold text-white md:w-1/4">
<SolvroLogo />
<div className="md:hidden">Kreator</div>
</div>
<div className="hidden w-1/2 items-center justify-center font-bold text-white md:flex md:text-4xl">
Kreator
</div>
<div className="mr-4 flex w-1/4 items-center justify-end">
<Link
href="/plans"
data-umami-event="Back to plans"
className={cn(buttonVariants({ variant: "link" }), "text-white")}
>
<span className="text-nowrap">Moje plany</span>
</Link>
<div className="container mx-auto flex items-center justify-between">
<div className="ml-4 flex items-center gap-2 text-2xl font-bold text-white md:w-1/4">
<SolvroLogo />
<div className="md:hidden">Kreator</div>
</div>
<div className="hidden w-1/2 items-center justify-center font-bold text-white md:flex md:text-4xl">
Kreator
</div>
<div className="mr-4 flex w-1/4 items-center justify-end">
<Link
href="/plans"
data-umami-event="Back to plans"
className={cn(buttonVariants({ variant: "link" }), "text-white")}
>
<span className="text-nowrap">Moje plany</span>
</Link>
</div>
</div>
</div>

{children}

<div className="flex w-full flex-1 items-center justify-center bg-mainbutton7 p-2">
<div className="flex w-full py-10 items-center justify-center bg-mainbutton7 p-2">
<p className="text-center text-white">
Made with ❤️ by{" "}
<a
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/plans/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
import { planFamily } from "@/atoms/planFamily";
import { plansIds } from "@/atoms/plansIds";
import { Plan } from "@/components/Plan";
import { Button } from "@/components/ui/button";
import { PlusIcon } from "lucide-react";

const plansAtom = atom(
(get) => get(plansIds).map((id) => get(planFamily(id))),
Expand Down Expand Up @@ -34,9 +34,9 @@ const Plans = () => {
return (
<div className="container mx-auto max-h-full flex-1 flex-grow overflow-y-auto p-4">
<div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start">
<div className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl">
<Button onClick={addNewPlan}>Dodaj nowy plan</Button>
</div>
<button onClick={addNewPlan} className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl group hover:border-primary hover:bg-primary/5 transition-colors">
<PlusIcon className="w-24 h-24 text-gray-400 group-hover:text-primary transition-colors" />
</button>
{plans.map((plan) => (
<Plan key={plan.id} id={plan.id} name={plan.name} />
))}
Expand Down

0 comments on commit 1ad0538

Please sign in to comment.