BaseUI and new design implementation

[olios123]

PR w głównej mierze skupia się na przejściu z RadixUI na BaseUI oraz implementacji nowego designu według figmy:
https://www.figma.com/design/wqfYo0dTL9hqntF1QVLw02/Testownik-UI?node-id=303-262&t=CdOupphbJS475bT0-0

Changelog

• Radix został usunięty z projektu i zastąpiony BaseUI
• przepisano wszystkie componenty na BaseUI
• zaimplementowano nowy design
• usprawniono animacje i działanie componentów
• poprawiono wizualne błędy i inne drobne problemy z wyświetlaniem elementów

Note

W niektórych miejscach nie trzymałem się Figmy 1:1 gdyż nie oddawała ona poprawnego designu na stronie - głównie chodzi tutaj o rozmiary elementów

Prośba o przejrzenie i zdecydowanie czy wszystko wygląda jak należy, ja osobiście zastanawiam się czy w niektórych miejscach kolory nie są zbyt "krzykliwe" (również w przypadku jasnego motywu).

Trzeba mieć też na uwadze zmiany nazw atrybutów i argumentów jakie mogę przyjmować componenty; starałem się przejrzeć większość plików i to pozmieniać ale nie jestem pewien czy czegoś nie ominąłem - eslint pokazał i tak 0 błędów.

TL;DR: Nowy design i BaseUI

[solvro-coolify]

The preview deployment for frontend-testownik-dev is ready. 🟢

Open Preview | Open Build Logs | Open Application Logs

Last updated at: 2026-03-19 20:45:28 CET

[Copilot]

Pull request overview

Migracja warstwy UI z RadixUI na Base UI oraz dostosowanie stylów/komponentów do nowego designu (Tailwind + tokeny w globals.css) w całej aplikacji.

Changes:

• Zastąpienie komponentów shadcn/Radix odpowiednikami Base UI (tooltip/dialog/select/menu/tabs itd.) i aktualizacja API komponentów (asChild → render, nowe nazwy propsów).
• Aktualizacja design tokens (OKLCH) i klas Tailwinda pod nowy wygląd (tła, gradienty, border/ring, CTA).
• Refaktory miejsc użycia komponentów UI w feature’ach (quiz/profile/navbar/pages) pod nowe API.

Reviewed changes

Copilot reviewed 76 out of 77 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/hooks/use-mobile.ts	Dodaje hook do wykrywania mobile breakpointu.
src/components/ui/tooltip.tsx	Migracja Tooltip na Base UI + zmiana API (delay/positioner/popup).
src/components/ui/toggle.tsx	Migracja Toggle na Base UI i domyślne variant/size.
src/components/ui/textarea.tsx	Korekty klas (border/bg/ring) pod nowy design.
src/components/ui/tabs.tsx	Migracja Tabs na Base UI + warianty listy.
src/components/ui/table.tsx	Dodaje warianty tabeli (cva) i wrapper dla wersji border.
src/components/ui/switch.tsx	Migracja Switch na Base UI + nowe klasy i size data-attr.
src/components/ui/sonner.tsx	Dodaje toastOptions.classNames dla toastów.
src/components/ui/slider.tsx	Migracja Slider na Base UI (Control/Track/Indicator) + logika thumbs.
src/components/ui/select.tsx	Migracja Select na Base UI (Positioner/Popup/List) + nowe propsy pozycjonowania.
src/components/ui/scroll-area.tsx	Migracja ScrollArea na Base UI (Scrollbar/Thumb).
src/components/ui/radio-group.tsx	Migracja RadioGroup na Base UI (Radio + RadioGroup).
src/components/ui/progress.tsx	Migracja Progress na Base UI + rozbicie na Track/Indicator/Label/Value.
src/components/ui/popover.tsx	Migracja Popover na Base UI (Positioner/Popup) + nowe subkomponenty (Header/Title/Description).
src/components/ui/navigation-menu.tsx	Migracja NavigationMenu na Base UI + własny Positioner/Viewport.
src/components/ui/label.tsx	Zamiana Radix Label na natywny <label>.
src/components/ui/input.tsx	Migracja Input na Base UI (InputPrimitive).
src/components/ui/input-otp.tsx	Ustawia spellCheck={false} i dodaje "use client".
src/components/ui/input-group.tsx	Aktualizacja stylów i typów + "use client".
src/components/ui/hover-card.tsx	Migracja HoverCard na Base UI PreviewCard.
src/components/ui/dropdown-menu.tsx	Migracja DropdownMenu na Base UI Menu (Popup/Positioner) i uproszczenie API.
src/components/ui/dialog.tsx	Migracja Dialog na Base UI + Close przez render={<Button/>} + opcjonalny close w footerze.
src/components/ui/checkbox.tsx	Migracja Checkbox na Base UI + zmiana ikon i klas.
src/components/ui/card.tsx	Dodaje warianty Card (np. gradient) przez cva.
src/components/ui/button.tsx	Migracja Button na Base UI; asChild zastąpione przez render/nativeButton.
src/components/ui/badge.tsx	Badge przechodzi na Base UI useRender/mergeProps.
src/components/ui/avatar.tsx	Migracja Avatar na Base UI + size data-attr + zmiany propsów fallback.
src/components/ui/aspect-ratio.tsx	Zamiana Radix AspectRatio na div z CSS variable --ratio.
src/components/ui/alert-dialog.tsx	Migracja AlertDialog na Base UI + dostosowanie Action/Cancel do Button.
src/components/ui/accordion.tsx	Migracja Accordion na Base UI + nowe animacje data-open/data-closed.
src/components/report-bug-dialog.tsx	Dostosowanie Select (items/SelectGroup) + render dla DialogClose.
src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx	Aktualizacja PopoverTrigger/DialogClose + typowanie checked.
src/components/quiz/share-quiz-dialog/search-results-popover.tsx	Usuwa onOpenAutoFocus, aktualizuje delayMs → delay.
src/components/quiz/share-quiz-dialog/access-list.tsx	TooltipProvider delay + TooltipTrigger render + delayMs → delay.
src/components/quiz/report-question-issue-dialog.tsx	Zmiany DialogTrigger/DialogClose pod Base UI API.
src/components/quiz/quiz-sort.tsx	TooltipTrigger/DropdownMenuTrigger przechodzą na render.
src/components/quiz/quiz-preview-dialog.tsx	Linki w Button przez nativeButton={false} + render.
src/components/quiz/quiz-info-card.tsx	TooltipTrigger przechodzą na render.
src/components/quiz/quiz-history-dialog.tsx	Upraszcza ScrollArea/Accordion usage + DialogClose render.
src/components/quiz/quiz-editor.tsx	Checkbox indeterminate + typowanie checked + uproszczenie Button.
src/components/quiz/quiz-card.tsx	Link w Button przez render; TooltipTrigger render.
src/components/quiz/quiz-action-buttons.tsx	TooltipTrigger render + zmiana UI akcji maintainer/history.
src/components/quiz/question-card.tsx	Korekty klas odpowiedzi + TooltipTrigger render.
src/components/quiz/hooks/quiz-runtime-reducer.ts	Formatowanie settings w initial state.
src/components/quiz/helpers/question-card.ts	Zmiany klas wariantów odpowiedzi (kolory/stany).
src/components/quiz/editor/question-form.tsx	HoverCard/TooltipTrigger przechodzą na render; checkbox checked typowanie.
src/components/quiz/editor/image/image-dialog.tsx	Korekty TabsList klas pod nowy design.
src/components/quiz/editor/image/image-button.tsx	Zmiana wariantu Button przy hasImage.
src/components/quiz/editor/answer-form.tsx	TooltipTrigger render (przycisk correct + ImageButton).
src/components/quiz/continuity-dialog.tsx	DialogTrigger/DialogClose przechodzą na render.
src/components/profile/settings-form.tsx	Aktualizacja Slider API (value jako number) + onValueCommitted.
src/components/profile/profile-details.tsx	delayMs → delay w AvatarFallback.
src/components/navbar/navbar-client.tsx	Przenosi LogoutButton poza AuthButtons + reorg akcji.
src/components/navbar/nav-links.tsx	NavigationMenuLink przechodzi na render; UI spacing/varianty buttonów.
src/components/navbar/logout-button.tsx	Zmiana ikonki i wariantu Button dla logout.
src/components/navbar/auth-buttons.tsx	Usuwa LogoutButton stąd; linki przez Button render + CTA variant.
src/components/mode-toggle.tsx	DropdownMenuTrigger przechodzi na render.
src/components/login-prompt.tsx	Linki przez Button render + zamiana <a> na Link w stopce.
src/components/copy-jwt-button.tsx	TooltipTrigger przechodzi na render.
src/components/connect-guest-account.tsx	DialogTrigger/DialogClose + linki przez Button render.
src/components/app-footer.tsx	Nowy layout stopki + font Caveat + gradient tła.
src/app/quizzes/client.tsx	Linki CTA (create/import) przez Button render.
src/app/quiz/[quizId]/error.tsx	CTA/Linki w Button render + Accordion bez type/collapsible.
src/app/providers.tsx	Global TooltipProvider wrapper.
src/app/profile/client.tsx	TabsTrigger link przez render (zamiast asChild).
src/app/layout.tsx	Global font (Hanken Grotesk) + body background gradient.
src/app/import-quiz/client.tsx	DialogTrigger/AlertDialogTrigger render + korekty TabsList i dropzone klas.
src/app/grades/client.tsx	Select (items/SelectGroup) + TooltipTrigger render + zmiany propsów Select.
src/app/globals.css	Nowe tokeny kolorów/gradientów + animacje accordion.
src/app/error.tsx	Accordion bez type/collapsible.
src/app/(dashboard)/components/search-card.tsx	Drobna korekta ikonki.
src/app/(dashboard)/components/question-quiz-card.tsx	Korekty klas odpowiedzi.
src/app/(dashboard)/components/import-buttons-card.tsx	"use client" + nowe przyciski z ikonami i link przez render.
src/app/(dashboard)/components/about-card.tsx	Table wariant border + korekty paddingów/Avatar.
package.json	Usuwa Radix dependency set, dodaje @base-ui/react + dodatkowe biblioteki.
components.json	Zmienia styl shadcn na base-vega.

[Copilot]

Pull request overview

Copilot reviewed 81 out of 82 changed files in this pull request and generated 8 comments.

[Antoni-Czaplicki]

kolor switcha ja bym odzielnie dodał, mam dwa kolorki:
raczej jak się da to bym uzył tutaj jakiegoś koloru który już istnieje i jest zdefiniowany - typu muted albo boże jakiś secondary - tak żeby uniknąc customowych kolorów w komponentach i jakoś bardzo nie rozrastać palety

[Copilot]

Pull request overview

Copilot reviewed 79 out of 80 changed files in this pull request and generated 10 comments.

[MarvinRucinski]

Może już do deva to zmergować? Dużo jeszcze zostało do zrobienia w tym designie?

[olios123]

Muszę poprawić jeszcze błędy wizualne oraz czekam na zmiany w Figmie, dobrze jakby Antek też na kod spojrzał bo było dużo zmian. Dopóki Maks nie ogarnie UI to tym nie mergował tego.

[olios123]

TODO:
#223
Taby w edytowaniu quizu nie działają