feat: small RWD changes + possibility to cancel event

wzarek · Jun 22, 2024 · 088f53d · 088f53d
1 parent cca299b
commit 088f53d
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 40 deletions.
diff --git a/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx
@@ -70,7 +70,7 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
   const router = useRouter();
   const [status, setStatus] = useState<string>(EventStatus.REJECTED);
 
-  const admin = true;
+  const admin = slug === "edit";
 
   const [imgs, setImgs] = useState<string[]>(
     IMAGES.sort(() => Math.random() - 0.5).slice(0, 3),
@@ -139,14 +139,21 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
               )}`}
             />
           ) : (
-            <p
-              className={clsx(
-                "mb-2 font-bold uppercase",
-                getStatusClass(status as EventStatus),
-              )}
-            >
-              {status}
-            </p>
+            <div className="flex flex-row items-center justify-between gap-[20%]">
+              <p
+                className={clsx(
+                  "font-bold uppercase",
+                  getStatusClass(status as EventStatus),
+                )}
+              >
+                {status}
+              </p>
+              <ButtonBase
+                text="anuluj wydarzenie"
+                onClick={() => {}}
+                className="grow from-red-400 to-red-700 font-semibold text-black"
+              />
+            </div>
           )}
           <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
             <SearchMultiDropdown

diff --git a/Client/reasn-client/apps/web/app/login/layout.tsx b/Client/reasn-client/apps/web/app/login/layout.tsx
@@ -11,7 +11,7 @@ const LoginLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+    <section className="relative mx-auto flex h-screen w-[90%] flex-wrap justify-between py-10 lg:w-3/4">
       {children}
     </section>
   );

diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx
@@ -17,8 +17,8 @@ const LoginPage = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
-        <form className="flex w-full flex-col gap-8" ref={formRef}>
+      <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
+        <form className="flex w-full flex-col gap-2 sm:gap-8" ref={formRef}>
           <FloatingInput type="email" label="email" name="email" />
           <FloatingInput type="password" label="hasło" name="password" />
           <div className="flex justify-end gap-2 text-sm">
@@ -29,8 +29,8 @@ const LoginPage = () => {
           </div>
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
-        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
+        <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
           miło, że do nas wracasz
         </p>
         <ButtonBase text={"zaloguj"} onClick={handleFormSubmit} />

diff --git a/Client/reasn-client/apps/web/app/register/layout.tsx b/Client/reasn-client/apps/web/app/register/layout.tsx
@@ -11,7 +11,7 @@ const RegisterLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+    <section className="relative mx-auto flex h-screen w-[90%] flex-wrap justify-between py-10 lg:w-3/4">
       {children}
     </section>
   );

diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
@@ -17,7 +17,7 @@ const RegisterOrganizer = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
+      <div className="relative z-10 flex w-full items-center justify-center sm:w-1/2">
         <form className="flex w-full flex-col gap-8" ref={formRef}>
           {currentStep === 1 && (
             <>
@@ -49,14 +49,14 @@ const RegisterOrganizer = () => {
           )}
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
         {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             to jak, zorganizujesz nam coś?
           </p>
         )}
         {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             gdzie możemy cię znaleźć?
           </p>
         )}

diff --git a/Client/reasn-client/apps/web/app/register/page.tsx b/Client/reasn-client/apps/web/app/register/page.tsx
@@ -9,9 +9,9 @@ const RegisterMiddleware = () => {
   return (
     <div className="flex h-4/5 w-full flex-col items-center justify-evenly gap-8">
       <h2 className="w-full text-5xl font-bold">kim jesteś?</h2>
-      <div className="flex w-full gap-8">
+      <div className="flex w-full flex-col gap-8 sm:flex-row">
         <div
-          className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10"
+          className="group flex h-80 w-full cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10 sm:w-[35%]"
           onClick={() => router.push("/register/organizer")}
         >
           <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
@@ -20,10 +20,10 @@ const RegisterMiddleware = () => {
           </p>
         </div>
         <div
-          className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10"
+          className="group relative flex h-80 w-full cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10 sm:w-[60%]"
           onClick={() => router.push("/register/user")}
         >
-          <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
+          <p className="z-10 text-5xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl sm:text-6xl">
             Uczestnik
           </p>
           <div className="absolute right-0 top-1/2 h-4/5 w-3/5 -translate-y-1/2 rounded-l-xl bg-black duration-500 group-hover:h-full group-hover:w-2/3"></div>

diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx
@@ -17,7 +17,7 @@ const RegisterUser = () => {
 
   return (
     <>
-      <div className="flex w-1/2 items-center justify-center">
+      <div className="flex w-full items-center justify-center sm:w-1/2">
         <form className="flex w-full flex-col gap-8" ref={formRef}>
           {currentStep === 1 && (
             <>
@@ -49,14 +49,14 @@ const RegisterUser = () => {
           )}
         </form>
       </div>
-      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+      <div className="relative z-10 flex h-fit w-full flex-col flex-wrap items-end justify-center gap-10 sm:h-full sm:w-1/3 sm:items-start sm:gap-24">
         {currentStep === 1 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             znalazłeś już swój powód do spotkań?
           </p>
         )}
         {currentStep === 2 && (
-          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-4xl font-bold leading-tight text-transparent sm:text-left lg:text-5xl">
             gdzie powinniśmy cię szukać?
           </p>
         )}

diff --git a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx
@@ -35,8 +35,12 @@ export const Card = (props: Readonly<CardProps>) => {
 
 const CardBig = ({ event }: { event: string }) => {
   return (
-    <div className="relative h-[30vh] w-[30vw] cursor-pointer overflow-hidden rounded-3xl">
-      <img src={MOCK_IMG_URL} alt="" className="absolute left-0 top-0 w-full" />
+    <div className="relative min-h-[30vh] min-w-[30vw] cursor-pointer overflow-hidden rounded-3xl">
+      <img
+        src={MOCK_IMG_URL}
+        alt=""
+        className="absolute left-0 top-0 h-full w-full object-cover"
+      />
       <div className="relative flex h-[45%] w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>

diff --git a/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/CTASection.tsx
@@ -2,17 +2,17 @@ import React from "react";
 
 export const CTASection = () => {
   return (
-    <div className="mx-auto flex w-[55%] flex-wrap justify-between gap-5 py-36">
+    <div className="mx-auto flex w-[80%] flex-col flex-wrap justify-between gap-5 py-36 sm:flex-row lg:w-[55%]">
       <h3 className="w-full text-xl font-semibold">
         Nasze eventy, Twój powód do spotkań.
       </h3>
-      <div className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10">
+      <div className="group flex h-80 w-full cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10 sm:w-[35%]">
         <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
         <p className="text-lg font-semibold duration-500 group-hover:text-3xl">
           Dodaj swój event
         </p>
       </div>
-      <div className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10">
+      <div className="group relative flex h-80 w-full cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10 sm:w-[60%]">
         <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
           Zobacz <br /> istniejące eventy
         </p>

diff --git a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
@@ -4,8 +4,8 @@ import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 export const HeroSection = () => {
   return (
-    <section className="flex h-[50vh] w-full items-center justify-center gap-24">
-      <div className="relative z-10 h-1/3 w-fit">
+    <section className="flex h-[50vh] w-full flex-col items-center justify-center gap-[10%] lg:flex-row">
+      <div className="relative z-10 hidden h-1/3 w-fit lg:block">
         <div className='absolute top-0 h-1.5 w-2/3 rounded-lg bg-gradient-to-r from-[#FF6363] to-[#1E34FF] content-[""]'></div>
         <Fire
           className="absolute right-0 top-0 h-14 w-14 translate-y-[-50%] rotate-[16deg]"

diff --git a/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx
@@ -14,7 +14,7 @@ export const QuickFilters = () => {
 
   return (
     <div>
-      <div className="flex w-full gap-10 overflow-x-clip bg-[#1E1F29] px-10 py-8">
+      <div className="flex w-full gap-10 overflow-x-auto bg-[#1E1F29] px-10 py-8">
         <QuickFilterButton
           text="Dziś"
           onClick={() => setSelectedFilter("Today")}
@@ -51,11 +51,7 @@ export const QuickFilters = () => {
           selected={selectedFilter === "Remote"}
         />
       </div>
-      <div className="flex flex-wrap gap-10 p-10">
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
-        <Card variant={CardVariant.Tile} event="Abc" />
+      <div className="grid grid-cols-1 place-items-center gap-10 p-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />