Skip to content

Frontend refactor #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
justnyx wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Frontend refactor #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14ed188
Refactored frontend to monochromatic desgin
justnyx Mar 18, 2026
e2f55ac
Refactored calendar design
justnyx Mar 18, 2026
6c9cc3b
refactored calendar for mobile view
justnyx Mar 18, 2026
a3ab082
fixed typo in interval switcher file name
justnyx Apr 22, 2026
142277e
added better authz for the stats page
justnyx Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions apps/frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.75rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
Expand All @@ -32,25 +32,25 @@
}

.dark {
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 20.5 90.2% 48.2%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 20.5 90.2% 48.2%;
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
Expand Down
6 changes: 4 additions & 2 deletions apps/frontend/src/app/reservation/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import Calendar from '@components/calendar/calendar';

export default function ReservationPage() {
return (
<div className='w-full flex flex-col gap-4'>
<h1 className='font-bold text-orange-600 text-3xl'>Foglalások</h1>
<div className='w-full flex flex-col gap-4 main-content-scroll h-full'>
<div className='flex items-center justify-between flex-col sm:flex-row gap-2 p-4 bg-background sticky top-0 z-10'>
<h1 className='text-2xl font-semibold text-primary text-center sm:text-left'>Foglalások</h1>
</div>
<Calendar />
</div>
);
Expand Down
14 changes: 7 additions & 7 deletions apps/frontend/src/app/rules/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function Rules() {
</p>
<p>
Ha olyan problémád van, melyet a lent leírtak nem fednek, úgy a{' '}
<a href='/mmmk' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
<a href='/mmmk' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
főispánt / teremispánt
</a>{' '}
kell keresni.
Expand All @@ -32,19 +32,19 @@ export default function Rules() {
<CardContent>
<ol className='list-decimal list-inside space-y-2'>
<li>
<a href='/register' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
<a href='/register' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
Regisztrálj
</a>{' '}
vagy{' '}
<a href='/login' className='text-orange-500 underline' target='_blank' rel='noopener noreferrer'>
<a href='/login' className='text-primary underline' target='_blank' rel='noopener noreferrer'>
jelentkezz be.
</a>
</li>
<li>
Iratkozz fel a{' '}
<a
href='https://lists.sch.bme.hu/wws/subscribe/probaterem'
className='text-orange-500 underline'
className='text-primary underline'
target='_blank'
rel='noopener noreferrer'
>
Expand All @@ -69,7 +69,7 @@ export default function Rules() {

<p className='mt-4'>
A fentiekkel kapcsolatban bármilyen probléma esetén írjatok a levlistára (
<a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
<a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
probaterem@sch.bme.hu
</a>
).
Expand Down Expand Up @@ -104,7 +104,7 @@ export default function Rules() {
<li>
Időpontot a weblapon tudsz foglalni. Ezt minél hamarabb elintézed, annál esélyesebb, hogy lesz
beengedőd. Amennyiben nincs, írj a listánkra! (
<a href='mailto:probaterem@sch.bme.hu' className='text-orange-500 underline'>
<a href='mailto:probaterem@sch.bme.hu' className='text-primary underline'>
probaterem@sch.bme.hu
</a>
)
Expand All @@ -114,7 +114,7 @@ export default function Rules() {
az már feltételes foglalás lesz, ami azt jelenti, hogy bárki ráfoglalhat erre az időpontra (akár Te is
másokéra). Figyeljetek rá, hogy az egyéni tagok foglalásai nem ekvivalensek a bandák foglalásaival
(lásd:{' '}
<a href='#sanctions' className='text-orange-500 underline'>
<a href='#sanctions' className='text-primary underline'>
Szankciók
</a>
).
Expand Down
8 changes: 5 additions & 3 deletions apps/frontend/src/app/stats/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useUser } from '@/hooks/useUser';
import axiosApi from '@/lib/apiSetup';
import { ClubMembership } from '@/types/member';
import { Reservation } from '@/types/reservation';
import { User } from '@/types/user';
import { Role, User } from '@/types/user';

function getCurrentPeriodStart() {
const now = new Date();
Expand Down Expand Up @@ -75,8 +75,10 @@ export default function Stats() {

const isAuthorized = useMemo(() => {
if (!me) return false;
if ((me as any)?.clubMembership) return true;
return (memberships || []).some((m) => m.userId === me.id);
if (me.role === Role.ADMIN) return true;
if ((me as any)?.clubMembership?.isGateKeeper) return true;
const myMembership = (memberships || []).find((m) => m.userId === me.id);
return Boolean(myMembership?.isGateKeeper);
}, [me, memberships]);

const gatekeepingCounts = useMemo(() => {
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/calendar/Line.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export default function Line() {
const offset = (new Date().getHours() + new Date().getMinutes() / 60) * 40 * 2;
return (
<div
className='absolute w-full h-1 self-start border-t-2 border-orange-600'
className='absolute w-full h-1 self-start border-t-2 border-primary z-50 pointer-events-none opacity-80'
style={{
top: `${offset}px`,
}}
Expand Down
10 changes: 5 additions & 5 deletions apps/frontend/src/components/calendar/add-comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function AddComment(props: AddCommentProps) {
id='comment'
type='text'
placeholder='Írja be a kommentet...'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
onChange={(e) => setComment(e.target.value)}
value={comment}
/>
Expand All @@ -69,7 +69,7 @@ export default function AddComment(props: AddCommentProps) {
</label>
<input
id='begin'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
type='datetime-local'
onChange={(e) => setStartTime(new Date(e.target.value))}
/>
Expand All @@ -81,7 +81,7 @@ export default function AddComment(props: AddCommentProps) {
</label>
<input
id='end'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
type='datetime-local'
onChange={(e) => setEndTime(new Date(e.target.value))}
/>
Expand All @@ -91,7 +91,7 @@ export default function AddComment(props: AddCommentProps) {
<div className='flex items-center'>
<input
id='reservable'
className='h-5 w-5 text-orange-500 border-zinc-600 rounded focus:ring-orange-500 bg-zinc-700'
className='h-5 w-5 text-primary border-zinc-600 rounded focus:ring-ring bg-zinc-700'
type='checkbox'
onChange={(e) => setIsReservable(e.target.checked)}
checked={isReservable}
Expand All @@ -102,7 +102,7 @@ export default function AddComment(props: AddCommentProps) {
</div>

<button
className='w-full rounded-md bg-orange-500 hover:bg-orange-600 text-zinc-900 font-semibold py-3 mt-4 transition-colors shadow-lg'
className='w-full rounded-md bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 mt-4 transition-colors shadow-lg'
onClick={addComment}
>
Komment hozzáadása
Expand Down
10 changes: 5 additions & 5 deletions apps/frontend/src/components/calendar/add-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ export function AddPanel(props: AddEventProps) {
};

return (
<div className='m-2 text-black dark:text-gray-400'>
<div className='m-1 md:m-2 text-black dark:text-gray-400 w-full'>
{isAdd ? (
<div className='fixed inset-0 bg-black/50 backdrop-blur-sm z-40 flex items-center justify-center overflow-y-auto'>
<div className='relative w-full max-w-md rounded-xl bg-white border-slate-600 dark:bg-zinc-800 border dark:border-zinc-700 shadow-2xl transform transition-all'>
<div className='p-6'>
<button
className='absolute top-4 right-4 text-black dark:text-zinc-400 hover:text-white transition-colors'
className='absolute top-4 right-4 text-black dark:text-zinc-400 hover:text-slate-600 dark:hover:text-white transition-colors'
onClick={onAddEvent}
aria-label='Close'
>
Expand All @@ -63,7 +63,7 @@ export function AddPanel(props: AddEventProps) {
onClick={() => setSelected('reservation')}
className={`flex-1 py-2 border-2 ${
selected === 'reservation'
? 'bg-orange-500 hover:bg-orange-600 text-zinc-900'
? 'bg-primary hover:bg-primary/90 text-primary-foreground'
: 'bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200'
}`}
>
Expand All @@ -73,7 +73,7 @@ export function AddPanel(props: AddEventProps) {
onClick={() => setSelected('comment')}
className={`flex-1 py-2 border-2 ${
selected === 'comment'
? 'bg-orange-500 hover:bg-orange-600 text-zinc-900'
? 'bg-primary hover:bg-primary/90 text-primary-foreground'
: 'bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200'
}`}
>
Expand All @@ -95,7 +95,7 @@ export function AddPanel(props: AddEventProps) {
</div>
</div>
) : (
<Button onClick={onAddEvent}>
<Button onClick={onAddEvent} className='w-full md:w-auto'>
<Plus />
</Button>
)}
Expand Down
12 changes: 6 additions & 6 deletions apps/frontend/src/components/calendar/add-reservation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default function AddReservation(props: AddPanelProps) {
value={userName}
onChange={handleUserNameChange}
required
className='bg-zinc-700 border-zinc-600 text-zinc-100 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-zinc-700 border-zinc-600 text-zinc-100 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
placeholder='Válasszon felhasználót...'
/>
{showUserSuggestions && userSuggestions.length > 0 && (
Expand Down Expand Up @@ -186,7 +186,7 @@ export default function AddReservation(props: AddPanelProps) {
type='checkbox'
checked={adminOverride}
onChange={(e) => setAdminOverride(e.target.checked)}
className='h-4 w-4 accent-orange-500'
className='h-4 w-4 accent-primary'
/>
</div>
</>
Expand All @@ -202,7 +202,7 @@ export default function AddReservation(props: AddPanelProps) {
value={bandName}
onChange={handleBandNameChange}
required
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 border-zinc-600 w-full px-3 py-2 rounded-md focus:ring-2 focus:ring-ring focus:border-transparent'
placeholder='Válasszon bandát...'
/>
{showBandSuggestions && bandSuggestions.length > 0 && (
Expand Down Expand Up @@ -231,7 +231,7 @@ export default function AddReservation(props: AddPanelProps) {
</label>
<input
id='begin'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
type='datetime-local'
onChange={(e) => shiftStart(new Date(e.target.value))}
/>
Expand All @@ -243,7 +243,7 @@ export default function AddReservation(props: AddPanelProps) {
</label>
<input
id='end'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-orange-500 focus:border-transparent'
className='bg-white hover:bg-slate-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-black dark:text-zinc-200 rounded-md border border-zinc-600 px-3 py-2 focus:ring-2 focus:ring-ring focus:border-transparent'
type='datetime-local'
onChange={(e) => shiftEnd(new Date(e.target.value))}
/>
Expand All @@ -267,7 +267,7 @@ export default function AddReservation(props: AddPanelProps) {

<button
onClick={handleSubmit}
className='w-full rounded-md bg-orange-500 hover:bg-orange-600 text-zinc-900 font-semibold py-3 mt-4 transition-colors shadow-lg'
className='w-full rounded-md bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 mt-4 transition-colors shadow-lg'
>
Foglalás hozzáadása
</button>
Expand Down
8 changes: 4 additions & 4 deletions apps/frontend/src/components/calendar/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,20 @@ export default function Calendar() {

return (
<div className='w-full container mx-auto'>
<div className='flex flex-row gap-2'>
<div className='flex flex-row gap-2 mb-1'>
<button
className={`m - 1 border-2 border-orange-500 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Week ? 'bg-orange-500 text-slate-50 dark:bg-orange-600' : ''}`}
className={`m-1 border-2 border-primary dark:hover:bg-primary/10 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Week ? 'bg-white text-primary dark:bg-white dark:text-black dark:hover:bg-white' : ''}`}
onClick={() => setView(View.Week)}
Comment thread
justnyx marked this conversation as resolved.
>
Heti nézet
</button>
<button
className={`m - 1 border-2 border-orange-500 dark:hover:bg-orange-500 dark:text-slate-50 font-bold py-1 px-2 rounded-lg ${view === View.Day ? 'bg-orange-500 text-slate-50 dark:bg-orange-600' : ''}`}
className={`m-1 border-2 border-primary dark:hover:bg-primary/10 dark:text-slate-50 font-bold py-1 px-2 rounded-lg hidden md:block ${view === View.Day ? 'bg-white text-primary dark:bg-white dark:text-black dark:hover:bg-white' : ''}`}
onClick={() => setView(View.Day)}
Comment thread
justnyx marked this conversation as resolved.
>
Napi nézet
</button>
<div className='ml-auto'>
<div className='w-full md:w-auto md:ml-auto flex'>
<AddPanel onGetData={onGetData} currentDate={currentDate} reservations={reservations} />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/components/calendar/comment-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';

import axiosApi from '@/lib/apiSetup';
import { Comment } from '@/types/comment';
Expand Down Expand Up @@ -144,7 +144,7 @@ export default function CommentDetails(props: EventDetailsProps) {
<>
<input
id='reservable'
className='h-5 w-5 text-orange-500 border-zinc-600 rounded focus:ring-orange-500 bg-zinc-700'
className='h-5 w-5 text-primary border-zinc-600 rounded focus:ring-ring bg-zinc-700'
type='checkbox'
onChange={(e) => setIsReservable(e.target.checked)}
checked={isReservable}
Expand Down
3 changes: 2 additions & 1 deletion apps/frontend/src/components/calendar/date-switcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { AddPanel } from '@components/calendar/add-panel';
import { View } from '@components/calendar/calendar';
import IntervalSwitcher from '@components/calendar/interval-swithcer';
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';

import IntervalSwitcher from '@/components/calendar/interval-switcher';

interface DateSwitcherProps {
handlePrevious: () => void;
handleNext: () => void;
Expand Down
5 changes: 2 additions & 3 deletions apps/frontend/src/components/calendar/day/daily-view-without-date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ export default function DailyViewWO(props: DailyViewPropsWO) {
<div
key={`time-slot-${i}`}
className={`
relative cursor-pointer focus:outline-none focus-visible:ring-2 h-10
focus-visible:ring-primary border-b border-slate-300/30
${i % 2 === 0 ? 'bg-transparent' : 'bg-slate-800/5'}
relative cursor-pointer focus:outline-none focus-visible:ring-2 h-10
focus-visible:ring-primary border-b border-border/40
`}
>
{props.reservations.map((reservation) => {
Expand Down
Loading
Loading