fix: start of ui changes

frontend/src/app/(homepage)/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import type React from "react";
 import { Suspense } from "react";
 
-import Block from "@/components/ui/block";
+import { Block } from "@/components/ui/block";
 import { buttonVariants } from "@/components/ui/button";
 import { createUsosService } from "@/lib/usos";
 import { cn } from "@/lib/utils";

frontend/src/app/globals.css

@@ -63,3 +63,17 @@ html {
     @apply bg-background text-foreground;
   }
 }
+
+* {
+  &::-webkit-scrollbar {
+    width: 6px; /* Szerokość scrollbara */
+    height: 6px; /* Wysokość scrollbara (dla osi X) */
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #a0aec0; /* Kolor paska przewijania */
+    border-radius: 8px; /* Zaokrąglenia */
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #edf2f7; /* Kolor tła scrollbara */
+  }
+}

frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx

@@ -102,12 +102,12 @@ export function CreateNewPlanPage({ planId }: { planId: string }) {
       }) ?? [];
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-2 md:flex-row md:items-start">
+    <div className="flex w-full flex-col items-center justify-center gap-2 md:flex-row md:items-start flex-1">
       <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">
             <div className="flex items-end gap-2">
-              <Button variant="outline" size="icon" asChild={true}>
+              <Button variant="outline" className="aspect-square" size="icon" asChild={true}>
                 <Link href="/plans">
                   <MdArrowBack size={20} />
                 </Link>

frontend/src/app/plans/layout.tsx

@@ -11,7 +11,7 @@ export default function PlansLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen flex-col items-center gap-3 overflow-x-hidden">
+    <div className="flex min-h-screen h-screen flex-col items-center overflow-x-hidden">
       <div className="flex max-h-20 min-h-20 w-full items-center justify-between bg-mainbutton7">
         <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">

frontend/src/app/plans/page.tsx

@@ -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 { PlanItem } from "@/components/PlanItem";
 
 const plansAtom = atom(
   (get) => get(plansIds).map((id) => get(planFamily(id))),
@@ -33,15 +33,15 @@ export default function 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="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:justify-start">
         <button
           onClick={addNewPlan}
           className="group flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl transition-colors hover:border-primary hover:bg-primary/5"
         >
           <PlusIcon className="h-24 w-24 text-gray-400 transition-colors group-hover:text-primary" />
         </button>
         {plans.map((plan) => (
-          <Plan key={plan.id} id={plan.id} name={plan.name} />
+          <PlanItem key={plan.id} id={plan.id} name={plan.name} />
         ))}
       </div>
     </div>

frontend/src/components/Plan.tsx → frontend/src/components/PlanItem.tsx

@@ -18,7 +18,7 @@ import { cn } from "@/lib/utils";
 import { DeletePlanConfirmationResponsiveDialog } from "./DeletePlanConfirmationResponsiveDialog";
 import { buttonVariants } from "./ui/button";
 
-export const Plan = ({ id, name }: { id: string; name: string }) => {
+export const PlanItem = ({ id, name }: { id: string; name: string }) => {
   const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
   const plan = usePlan({ planId: id });

frontend/src/components/ui/block.tsx

@@ -6,7 +6,7 @@ import { type ComponentProps } from "react";
 
 import { cn } from "@/lib/utils";
 
-const Block = ({
+export const Block = ({
   className,
   ...rest
 }: ComponentProps<(typeof motion)["div"]> & { className: string }) => {
@@ -35,5 +35,3 @@ const Block = ({
     />
   );
 };
-
-export default Block;