Merge branch 'release/2.11.0'

components/Blocks/Gallery/Gallery.js

@@ -7,13 +7,13 @@ import GalleryImage from './components/GalleryImage';
 import { useEffect, useState } from 'react';
 
 const Gallery = (props) => {
-  const { attrs, innerHTML } = props;
-  const { ids } = attrs;
+  const { innerBlocks, innerHTML } = props;
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [galleryClassName, setGalleryClassName] = useState('');
+  const ids = innerBlocks?.map((item) => item.attrs.id);
 
-  const images = ids.map((id) => {
+  const images = ids?.map((id) => {
     const {
       data: mediaContent,
       isLoading,
@@ -24,7 +24,7 @@ const Gallery = (props) => {
     return mediaContent;
   });
 
-  const modalImages = images.map((item) => {
+  const modalImages = images?.map((item) => {
     return { source: item ? item.source_url : '' };
   });
 
@@ -54,7 +54,7 @@ const Gallery = (props) => {
 
       <figure className={`gallery ${galleryClassName}`}>
         <ul className='blocks-gallery-grid'>
-          {images.map((item, index) => {
+          {images?.map((item, index) => {
             const imageProps = {
               ...item,
               index,

components/Blocks/Gallery/components/GalleryImage.js

@@ -9,16 +9,17 @@ const GalleryImage = (props) => {
   return (
     <li className='blocks-gallery-item' key={id} data-aos='fade-in'>
       <a href='#' onClick={(e) => toggleModal(e, index)}>
-        <figure>
+        <figure className='brinca-image'>
           <Image
             src={source_url}
             alt={alt_text}
             data-id={id}
             data-full-url={source_url}
             data-link={source_url}
             className={`wp-image-${id}`}
-            width={width}
-            height={height}
+            layout='responsive'
+            width={300}
+            height={300}
           />
         </figure>
       </a>

components/Blocks/Partners/PartnersContent.js

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 
-const PartnersContent = (props) => {
+const PartnersContent = () => {
   return (
-    <div className='partners__content'>
+    <div className='partners__content' data-aos='fade-in'>
       <p>
         Aqui você encontra produtos e serviços de brasileiros para brasileiros
       </p>

components/Blocks/Partners/PartnersFilter.js

@@ -1,4 +1,3 @@
-import Button from 'components/Button/Button';
 import { useState } from 'react';
 import PartnersFilterList from './PartnersFilterList';
 import PartnersTags from './PartnersTags';
@@ -24,7 +23,7 @@ const PartnersFilter = ({
   };
 
   return (
-    <div className='partners__filter'>
+    <div className='partners__filter' data-aos='fade-in'>
       <div className='partners__filter-header'>
         <div className='partners__filter-title'>{title}</div>
         <PartnersFilterList {...categoriesProps} />

components/Blocks/Partners/PartnersFilterList.js

@@ -17,7 +17,7 @@ const PartnersFilterList = ({
   useOnClickOutside(ref, () => setIsOpen(false));
 
   return (
-    <form className='partners__list' ref={ref}>
+    <form className='partners__list' ref={ref} data-aos='fade-in'>
       <fieldset className='partners__list-container'>
         <legend className='partners__list-title'>
           <button

components/Blocks/Partners/PartnersGroup.js

@@ -2,7 +2,7 @@ import BusinessCard from '../BusinessCard/BusinessCard';
 const PartnersGroup = ({ title, partners }) => {
   if (!partners.length) return false;
   return (
-    <div className='partners__group'>
+    <div className='partners__group' data-aos='fade-in'>
       {title && <h4>{title}</h4>}
       <div className='grid grid-2 mb-5'>
         {partners?.map((item) => (

components/Blocks/Partners/PartnersTags.js

@@ -11,7 +11,7 @@ const PartnersTags = ({ tags, filter }) => {
   const allClassName = !filter ? 'btn-primary' : 'btn-secondary';
 
   return (
-    <section className='partners__tags'>
+    <section className='partners__tags' data-aos='fade-in'>
       <div className='partners__title'>
         <h4>Categorias</h4>
       </div>

components/Card/CardImage.js

@@ -1,12 +1,11 @@
 import Image from 'next/image';
 
 const CardImage = (props) => {
-  const {
-    source_url: src = '/images/logo-white.png',
-    alt_text: alt = '',
-    media_details: { height, width } = { height: '200', width: '300' },
-  } = props;
+  const { source_url: src = '/images/logo-white.png', alt_text: alt = '' } =
+    props;
 
-  return <Image src={src} alt={alt} height={height} width={width} />;
+  return (
+    <Image src={src} alt={alt} height={200} width={300} layout='responsive' />
+  );
 };
 export default CardImage;

components/Footer/Footer.js

@@ -36,6 +36,9 @@ const Footer = (props) => {
               </a>
             </Link>
           </li>
+          <li className={`m-auto flex-grow-1`}>
+            <FooterSocial {...props} />
+          </li>
           {menuContent.items.map((item) => {
             const { ID, title, slug, url } = item;
             const link = slug ? `/${slug}` : url;
@@ -70,7 +73,6 @@ const Footer = (props) => {
           </li>
         </ul>
       </div>
-      <FooterSocial {...props} />
     </footer>
   );
 };

components/Footer/Footer.module.scss

@@ -4,19 +4,17 @@
   }
 }
 .footerNav {
-  width: calc(100% - 30px);
+  width: 100%;
   background: var(--green);
   text-align: center;
-  position: fixed;
-  bottom: 1rem;
-  left: 15px;
   border-radius: var(--border-radius);
-  z-index: 9999;
+  padding: 1rem;
+  margin-bottom: 1rem;
 
   @media (min-width: 1023px) {
-    position: static;
     padding: 1rem;
     width: unset;
+    margin-bottom: 0;
   }
 
   a {
@@ -28,46 +26,17 @@
       text-decoration: underline;
     }
   }
-
-  @media (max-width: 1021px) {
-    &::before {
-      content: '';
-      background: linear-gradient(90deg, rgba(#0e874e, 0) 0%, var(--green) 90%);
-      position: fixed;
-      right: 15px;
-      width: 2.5rem;
-      height: 4.1rem;
-      border-top-right-radius: var(--border-radius);
-      border-bottom-right-radius: var(--border-radius);
-    }
-    &::after {
-      content: '';
-      background: rgb(0, 0, 0);
-      background: linear-gradient(
-        270deg,
-        rgba(#0e874e, 0) 0%,
-        var(--green) 90%
-      );
-      position: fixed;
-      bottom: 1rem;
-      left: 15px;
-      width: 2.5rem;
-      height: 4.1rem;
-      border-top-left-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
-    }
-  }
 }
 
 ul.menuNav {
   white-space: nowrap;
   width: 100%;
-  overflow-x: scroll;
   display: flex;
+  flex-direction: column;
   margin: 0;
 
   @media (min-width: 1023px) {
-    overflow-x: unset;
+    flex-direction: row;
   }
 
   li {
@@ -76,29 +45,22 @@ ul.menuNav {
 }
 
 ul li.footerLogo {
-  display: none;
+  margin-left: auto;
+  margin-bottom: 1rem;
 
   @media (min-width: 1023px) {
     display: inline-flex;
     margin-bottom: 0.5rem;
+    margin-left: 0;
+    margin-right: auto;
   }
 }
 
 ul li.menuLink {
-  padding: 2rem 1rem 0.3rem 1rem;
-  margin-bottom: 1.8rem;
+  padding: 1.5rem 1rem 0.3rem 1rem;
+  margin-bottom: 0.5rem;
   position: relative;
 
-  &:last-child {
-    padding-right: 2rem;
-  }
-
-  @media (min-width: 768px) {
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-
   @media (min-width: 1023px) {
     padding: 1rem;
     margin: 0;
@@ -107,12 +69,10 @@ ul li.menuLink {
 
 .copyright {
   background-color: var(--grey-soft);
-  margin-bottom: 7rem;
   border-radius: var(--border-radius);
 
   @media (min-width: 1023px) {
     background-color: unset;
-    margin-bottom: 0;
   }
 }
 
@@ -121,9 +81,11 @@ ul li.menuLink {
   color: var(--white);
   text-align: center;
   font-size: 1rem;
+  margin: 1rem;
 
   @media (min-width: 1023px) {
     color: var(--grey-soft);
+    margin: 0;
   }
 }
 
@@ -141,21 +103,10 @@ ul li.menuLink {
 }
 
 .socialMenu {
-  position: absolute;
-  top: 2rem;
-  right: 15px;
-  background: var(--yellow);
-  border-radius: 2rem;
-  @media (min-width: 450px) {
-    top: 5rem;
-  }
-
-  @media (min-width: 1023px) {
-    top: 1.5rem;
-    right: unset;
-    left: 220px;
-    background: unset;
-  }
+  position: static;
+  top: 1.5rem;
+  right: unset;
+  background: unset;
 }
 
 .socialList {

components/Padrinho/Padrinho.js

@@ -1,24 +1,22 @@
-import Button from 'components/Button/Button'
 import Link from 'next/link'
 
 const Padrinho = (props) => {
-  const { title } = props
 
   return (
-    <section data-aos="fade-in" className="aos-init aos-animate">
-      <div>
-        <h1 className="content-title">{title}</h1>
+    <section className="padrinho pt-0">
+      <div className="padrinho__content">
+        <h4 className="text-center">Apadrinhe um recém-chegado ao Canada!</h4>
         <p>Todos nós, que vivemos em um novo país, certamente fomos ajudados por alguém em algum momento da nossa chegada. São muitos os desafios, desde burocracias como carteira de habilitação, cartão de saúde até coisas mais simples, como escolher marca de sabão no supermercado. Temos que aprender tudo novamente e o choque cultural pode ser amenizado quando encontramos compatriotas dispostos a nos ajudar nesse processo.</p>
         <p>Pensando em facilitar o encontro entre essas pessoas na comunidade, a BRINCA criou o projeto de apadrinhamento. Através de um cadastro simples, selecionamos os perfis que mais se adequam e o contato entre padrinho e apadrinhado é feito. A partir daí os dois lados poderão combinar a melhor forma de comunicação e periodicidade dos encontros. Não há limites!</p>
         <p>Queremos criar uma comunidade cada vez mais forte e unida, e acreditamos que esse link possa criar laços fortes entre as pessoas. Aquele que foi ajudado pode ser o que ajuda no futuro, e assim todos ganham.</p>
         <p>Para participar do nosso projeto é só clicar no link abaixo e fazer o seu cadastro, ou envie um e-mail para <a href="mailto:padrinho@brinca.ca?subject=Cadastro - Gostaria de ser Padrinho/Apadrinhado">padrinho@brinca.ca</a>. Este é um trabalho 100% voluntário e coordenado também por voluntários, portanto, você não precisa pagar nada.</p>
       </div>
-      <div className={`text-center py-5`}>
+      <div className="text-center">
         <Link href={`/padrinhos/cadastro-padrinho`}>
-          <a className={`btn btn-primary font-weight-bold mb-3 mr-2`}>Quero apadrinhar um recém chegado</a>
+          <a className={`btn btn-primary font-weight-bold mt-2`}>Quero apadrinhar um recém chegado</a>
         </Link>
         <Link href={`/padrinhos/cadastro-apadrinhado`}>
-          <a className={`btn btn-primary font-weight-bold mb-3`}>Quero ser apadrinhado</a>
+          <a className={`btn btn-primary font-weight-bold ml-sm-2 mt-2`}>Quero ser apadrinhado</a>
         </Link>
       </div>
     </section>

next.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  // Target must be serverless
-  target: 'serverless',
   images: {
     domains: ['res.cloudinary.com', 'localhost', 'marceloglacial.com'],
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "brinca-2020",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,20 +9,20 @@
   },
   "dependencies": {
     "cloudinary": "^1.30.0",
-    "googleapis": "^100.0.0",
+    "googleapis": "^105.0.0",
     "next": "^12.2.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "aos": "^2.3.4",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.2.0",
     "cors": "^2.8.5",
-    "next-connect": "^0.10.1",
+    "next-connect": "^0.13.0",
     "postscribe": "^2.0.8",
     "react-icons": "^4.4.0",
     "react-images": "^1.2.0-beta.6",
     "sass": "^1.32.11",
-    "swr": "^0.5.6"
+    "swr": "^1.3.0"
   }
 }