Merge pull request #16 from ifspcbt-devspace/develop

fix: mobile design
ifspcbt-devspace · Sep 25, 2024 · 07c81b9 · 07c81b9
2 parents 528fdb3 + 473e560
commit 07c81b9
Show file tree

Hide file tree

Showing 20 changed files with 1,182 additions and 572 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@internationalized/date": "^3.5.4",
-    "@nextui-org/react": "^2.4.2",
+    "@nextui-org/react": "^2.4.8",
     "@react-aria/i18n": "^3.11.1",
     "@react-input/mask": "^1.2.5",
     "framer-motion": "^11.3.2",

diff --git a/src/app/auth/log-in/page.tsx b/src/app/auth/log-in/page.tsx
@@ -42,7 +42,7 @@ function Login() {
   }, [router]);
 
   const validatePassword = (value: string) => {
-    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{6,}$/;
+    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+[\]{};':"\\|,.<>\/?`~\-])[A-Za-z\d!@#$%^&*()_+[\]{};':"\\|,.<>\/?`~\-]{6,}$/;
     return passwordRegex.test(value);
   };
 

diff --git a/src/app/auth/sign-up/page.tsx b/src/app/auth/sign-up/page.tsx
@@ -59,7 +59,7 @@ function Register() {
   });
 
   const validatePassword = (value: string) => {
-    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{6,}$/;
+    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+[\]{};':"\\|,.<>\/?`~\-])[A-Za-z\d!@#$%^&*()_+[\]{};':"\\|,.<>\/?`~\-]{6,}$/;
     return passwordRegex.test(value);
   };
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -33,8 +33,8 @@ export default function RootLayout(
   return (
     <html
       lang="pt-br"
-      className="light min-h-full scroll-smooth"
-      style={{scrollBehavior: "smooth"}}
+      className="light min-h-full scroll-smooth min-w-[320px]"
+      style={{scrollBehavior: "smooth", padding: 0, margin: 0, overflow: "hidden"}}
     >
     <body className={inter.className + " h-full"}>
     <ToastContainer/>

diff --git a/src/components/DarkPageHeader.tsx b/src/components/DarkPageHeader.tsx
@@ -8,12 +8,12 @@ export default function DarkPageHeader({title, imgUrl, subtitle, onError}: {
   onError: () => void
 }) {
   return (
-    <div className={"black-gradient grid grid-cols-10 w-full pt-24 pb-8 px-12 xl:px-0"}>
+    <div className={"black-gradient grid grid-cols-10 w-full pt-24 pb-8 px-4 xl:px-0"}>
       <div className={"col-start-1 col-span-10 xl:col-start-3 xl:col-span-6"}>
         <div className="event-page-grid">
           <div className="row-start-1 col-start-1 col-span-2 md:col-span-1 font-semibold relative">
-            <h1 className={"mb-4 text-4xl md:text-5xl font-semibold block"}>{title}</h1>
-            <p className="text-xl">{subtitle}</p>
+            <h1 className={"mb-4 text-xl sm:text-4xl md:text-5xl font-semibold"}>{title}</h1>
+            <p className="text-lg">{subtitle}</p>
           </div>
           <div className="hidden col-span-1 row-start-1 col-start-2 md:block event-header-block z-10">
             <Image src={imgUrl} onError={onError} alt={"Event thumbnail"} width={650} height={100}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,7 +5,7 @@ import "./footer.css"
 
 const Footer = () => {
   return (
-    <footer className="w-full grid grid-cols-10 grid-rows-2 bg-transparent text-black py-16 gap-4 px-12 xl:px-0">
+    <footer className="w-full grid grid-cols-10 grid-rows-2 bg-transparent text-black py-16 gap-4 px-4 xl:px-0">
       <div className="row-start-1 col-start-1 col-span-10 xl:row-span-2 xl:col-start-3 xl:col-span-3 flex flex-col justify-start">
         <Link className={`mb-5`} href={`/`}>
           <Image src={`/images/logo_recortada.png`} className={`overflow-clip bg-clip-content`} height={100} width={204}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -25,7 +25,7 @@ export default function Header({search = ""}: { search?: string }) {
   }
 
   return (<>
-    <div className={`w-full grid grid-cols-10 bg-white text-black sticky top-0 z-50 px-12 xl:px-0`}>
+    <div className={`w-full grid grid-cols-10 bg-white text-black sticky top-0 z-50 px-4 xl:px-0`}>
 
       <div className={`col-start-1 col-span-5 xl:col-start-3 xl:col-span-3 flex justify-start`}>
         <Link href={"/"} className={`relative h-[70px] w-44 cursor-pointer duration-400 hover:opacity-70`}>

diff --git a/src/components/LightPageHeader.tsx b/src/components/LightPageHeader.tsx
@@ -2,7 +2,7 @@ export default function LightPageHeader({title}: { title: string }) {
   return (
     <div className={"light-page-header grid grid-cols-10 w-full"}>
       <div className={"col-start-3 col-span-6"}>
-        <h1 className={"mb-4 text-[64px] font-semibold block"}>{title}</h1>
+        <h1 className={"mb-4 text-4xl md:text-[64px] font-semibold block"}>{title}</h1>
       </div>
     </div>
   )

diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -29,13 +29,13 @@ const Events = ({max, search, all = false}: { max?: number, search?: string, all
   if (loading) return <Loading/>;
 
   return (
-    <div className={`w-full py-20 bg-white grid grid-cols-10 px-12 xl:px-0`}
+    <div className={`w-full py-20 bg-white grid grid-cols-10 px-4 xl:px-0`}
     >
       {!all && !search && (
         <div className={`col-start-1 col-span-10 xl:col-start-3 xl:col-span-6 flex items-start justify-between mb-6`}>
-          <span className={`text-2xl leading-[1.4em] font-semibold block`}>Eventos</span>
+          <span className={`text-xl md:text-2xl leading-[1.4em] font-semibold block`}>Eventos</span>
           <Link href={`#`}
-                className={`hover:text-[#626a72] hover:bg-[#e7ecf0] bg-[#f5f6f7] text-[#626a72] shadow-inner inset-1 px-6 py-2 font-medium leading-6 text-center rounded-lg duration-200 cursor-pointer inline-block`}>Veja
+                className={`text-sm md:text-lg hover:text-[#626a72] hover:bg-[#e7ecf0] bg-[#f5f6f7] text-[#626a72] shadow-inner inset-1 px-6 py-2 font-medium text-center rounded-lg duration-200 cursor-pointer inline-block`}>Veja
             todos eventos</Link>
         </div>
       )}

diff --git a/src/components/events/single/EventView.tsx b/src/components/events/single/EventView.tsx
@@ -12,6 +12,7 @@ import {useDisclosure} from "@nextui-org/react";
 import ConfirmSubscription from "@/components/events/subscription/ConfirmSubscription";
 import {enrollUser} from "@/server-actions/enrollment.action";
 import {isAuthenticated} from "@/server-actions/auth.action";
+import "./eventview.css"
 
 export default function EventViewComponent({params}: { params: { id: string } }) {
   return (
@@ -78,9 +79,9 @@ export function EventView({params}: { params: { id: string } }) {
                       imgUrl={imgUrl}
                       onError={() => setImgUrl("/images/default-event-thumb.svg")}
                       subtitle={`Por IFSP Cubatão`}/>
-      <div className="py-10 grid grid-cols-10 w-full px-12 xl:px-0">
+      <div className="py-10 grid grid-cols-10 w-full px-4 xl:px-0">
         <div className={"col-start-1 col-span-10 xl:col-start-3 xl:col-span-6"}>
-          <div className="event-page-grid">
+          <div className="hidden md:event-page-grid-view">
             <div className="row-start-1 col-start-1 col-span-2 md:col-span-1 font-semibold relative">
               <p className="text-lg mb-8">{event?.description}</p>
               <Link href={"#"} onClick={handleSubscription}>
@@ -91,6 +92,15 @@ export function EventView({params}: { params: { id: string } }) {
               </Link>
             </div>
           </div>
+          <div className="block md:hidden font-semibold relative">
+            <p className="text-[12px] sm:text-lg mb-8">{event?.description}</p>
+            <Link href={"#"} onClick={handleSubscription}>
+              <div
+                className={`inline-block cursor-pointer duration-200 bg-neutral-900 hover:bg-opacity-90 text-white py-2 px-7 rounded-md`}>
+                Inscreva-se
+              </div>
+            </Link>
+          </div>
         </div>
       </div>
     </>

diff --git a/src/components/events/single/eventview.css b/src/components/events/single/eventview.css
@@ -0,0 +1,8 @@
+.event-page-grid-view {
+  grid-column-gap: 32px;
+  grid-row-gap: 32px;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr 400px;
+  display: grid;
+  grid-auto-columns: 1fr;
+}
diff --git a/src/components/events/subscription/ConfirmSubscription.tsx b/src/components/events/subscription/ConfirmSubscription.tsx
@@ -21,7 +21,7 @@ export default function ConfirmSubscription(
   return (
     <>
       <QrCodeModal ticketId={ticketID} isOpen={isOpen} onOpenChange={onOpenChange}/>
-      <Modal isOpen={isOpenConfirmModal} onOpenChange={onOpenChangeConfirmModal}>
+      <Modal isOpen={isOpenConfirmModal} onOpenChange={onOpenChangeConfirmModal} placement="center">
         <ModalContent>
           {(onClose) => (
             <>

diff --git a/src/components/events/subscription/qrcode/QrCodeModal.tsx b/src/components/events/subscription/qrcode/QrCodeModal.tsx
@@ -20,7 +20,7 @@ export default function QrCodeModal({
   };
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
       <ModalContent>
         {(onClose) => (
           <>

diff --git a/src/components/footer.css b/src/components/footer.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   --light-grey: #99a4af;
   --grey: #626a72;
@@ -12,12 +16,12 @@
 }
 
 .footer-link {
+  @apply text-[12px] sm:text-sm;
   color: var(--grey);
   cursor: pointer;
   margin-bottom: 0;
   padding-top: 5px;
   padding-bottom: 5px;
-  font-size: 15px;
   text-decoration: none;
   transition: color .2s ease-in-out;
   display: block;

diff --git a/src/components/home/DescriptionCard.tsx b/src/components/home/DescriptionCard.tsx
@@ -14,7 +14,7 @@ export default function DescriptionCard({
       </div>
       <div>
         <h1 className="text-[10px] sm:text-sm md:text-base font-bold mb-2 text-green-950">{title}</h1>
-        <p className="max-w-full text-[9px] sm:text-[12px] md:text-sm font-semibold text-green-900">
+        <p className="text-[9px] sm:text-[12px] md:text-sm font-semibold text-green-900">
           {description}
         </p>
       </div>

diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 
 const Hero = () => {
   return (
-    <div className="w-full py-20 grid grid-cols-10 light-color-gradient text-black px-12 xl:px-0">
+    <div className="w-full py-20 grid grid-cols-10 light-color-gradient text-black px-4 xl:px-0">
       <div className={`col-start-1 col-span-10 xl:col-start-3 xl:col-span-6 grid grid-rows-2 xl:grid-rows-1 gap-4 hero-grid`}>
         <div className={`col-span-2 row-start-2 xl:row-start-1 xl:row-span-2 xl:col-span-1 xl:max-w-[500px]`}>
           <span className={`heading`}>

diff --git a/src/components/home/Warn.tsx b/src/components/home/Warn.tsx
@@ -1,6 +1,6 @@
 export default function Warn() {
   return (
-    <div className={`black-gradient py-20 relative w-full px-12 xl:px-0`}>
+    <div className={`black-gradient py-20 relative w-full px-4 xl:px-0`}>
       <div className={`text-center mx-auto max-w-[550px]`}>
         <span className={`text-3xl xl:text-4xl font-semibold mb-6 block`}>Não fique de fora nenhuma vez</span>
         <p className={`text-lg xl:text-xl opacity-90 font-normal block`}>Não esqueça de visitar o nosso site para acompanhar os

diff --git a/src/components/home/hero.css b/src/components/home/hero.css
@@ -52,7 +52,6 @@ img {
   overflow-clip-margin: content-box;
   overflow: clip;
   vertical-align: middle;
-  max-width: 100%;
   display: inline-block;
   mix-blend-mode: multiply;
   margin-left: auto;

diff --git a/src/components/register/ConfirmRegister.tsx b/src/components/register/ConfirmRegister.tsx
@@ -9,7 +9,7 @@ export default function ConfirmRegister(
   }: { action?: () => void, isOpen: boolean, onOpenChange: () => void }) {
   return (
     <>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
         <ModalContent>
           {(onClose) => (
             <>