Merge pull request #43 from OCA-UFCG/chore/claim_warnings

Chore/claim warnings

Author: cilasmarques

package-lock.json

@@ -29,7 +29,7 @@
     "express": "^4.19.2",
     "lightgallery": "^2.7.2",
     "maplibre-gl": "^4.2.0",
-    "next": "14.2.2",
+    "next": "^14.2.26",
     "nodemailer": "^6.9.14",
     "powerbi-client": "^2.23.1",
     "powerbi-client-react": "^2.0.0",

package.json

@@ -236,7 +236,7 @@ export const ContentContainer = styled.div`
   justify-content: space-between;
 `;
 
-export const Main = styled.main<{ backThumb: string }>`
+export const Main = styled.main<{ $backThumb: string }>`
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -247,16 +247,16 @@ export const Main = styled.main<{ backThumb: string }>`
   transition: 0.3s;
 `;
 
-export const Section = styled.section<{ full?: string }>`
+export const Section = styled.section<{ $full?: string }>`
   padding: 1rem 1rem;
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 1.5rem;
   box-sizing: border-box;
   width: 100%;
-  max-width: ${({ full }) =>
-    full !== "false" ? "100%" : "var(--main-section-width)"};
+  max-width: ${({ $full }) =>
+    $full !== "false" ? "100%" : "var(--main-section-width)"};
 `;
 
 export const SectionTitle = styled.h2<{

src/app/globalStyles.tsx

@@ -2,8 +2,8 @@ import styled from "styled-components";
 import Image from "next/image";
 import { Icon } from "../Icon/Icon";
 
-export const RetractIcon = styled(Icon)<{ position: "left" | "right" }>`
-  ${({ position }) => position === "right" && "transform: rotate(180deg)"};
+export const RetractIcon = styled(Icon)<{ $position: "left" | "right" }>`
+  ${({ $position }) => $position === "right" && "transform: rotate(180deg)"};
   cursor: pointer;
   transition: 300ms;
 
@@ -25,9 +25,9 @@ export const MenuImage = styled(Icon)`
   }
 `;
 
-export const Background = styled.div<{ retracted: string }>`
-  display: ${({ retracted }) => (retracted === "true" ? "none" : "flex")};
-  animation: ${(props) => (props.retracted === "true" ? "fadeOut" : "fadeIn")}
+export const Background = styled.div<{ $retracted: string }>`
+  display: ${({ $retracted }) => ($retracted === "true" ? "none" : "flex")};
+  animation: ${(props) => (props.$retracted === "true" ? "fadeOut" : "fadeIn")}
     0.5s ease-in-out;
   width: 100vw;
   height: 100svh;
@@ -58,7 +58,10 @@ export const Background = styled.div<{ retracted: string }>`
   }
 `;
 
-export const ModalWrapper = styled.div<{ retracted: string; position: string }>`
+export const ModalWrapper = styled.div<{
+  $retracted: string;
+  $position: string;
+}>`
   position: fixed;
   top: 50%;
   bottom: 50%;
@@ -81,8 +84,8 @@ export const ModalWrapper = styled.div<{ retracted: string; position: string }>`
   }
 
   ${(props) => {
-    const { position, retracted } = props;
-    const isLeft = position === "left";
+    const { $position, $retracted } = props;
+    const isLeft = $position === "left";
 
     const transformExpanded = isLeft
       ? "translateX(0.5rem)"
@@ -93,7 +96,7 @@ export const ModalWrapper = styled.div<{ retracted: string; position: string }>`
 
     return `
       ${isLeft ? "left: 0;" : "right: 0;"}
-      transform: ${retracted === "true" ? transformRetracted : transformExpanded};
+      transform: ${$retracted === "true" ? transformRetracted : transformExpanded};
     `;
   }}
 `;
@@ -108,7 +111,7 @@ export const OcaImage = styled(Image)`
   height: fit-content;
 `;
 
-export const RetractImage = styled(Image)<{ position: string }>`
+export const RetractImage = styled(Image)<{ $position: string }>`
   max-width: 1.25rem;
   height: fit-content;
   transition: 0.2s;
@@ -120,7 +123,7 @@ export const RetractImage = styled(Image)<{ position: string }>`
   }
 
   ${(props) =>
-    props.position === "right" &&
+    props.$position === "right" &&
     `
       transform: rotate(180deg);
 

src/components/MenuModal/MenuModal.styles.tsx

@@ -38,21 +38,21 @@ const MenuModal = ({
       {hasBackground && (
         <Background
           onClick={updateRetracted}
-          retracted={retracted.toString()}
+          $retracted={retracted.toString()}
         />
       )}
       <ModalWrapper
-        retracted={retracted.toString()}
+        $retracted={retracted.toString()}
         ref={modalRef}
-        position={position}
+        $position={position}
       >
         <HeadWrapper>
           <LogoContainer>
             <Logo src="/logo.png" alt="datane logo" width={45} height={45} />
           </LogoContainer>
 
           <div onClick={updateRetracted}>
-            <RetractIcon id="retract" size={20} position={position} />
+            <RetractIcon id="retract" size={20} $position={position} />
           </div>
         </HeadWrapper>
         <ContentWrapper>{children}</ContentWrapper>

src/components/MenuModal/MenuModal.tsx

@@ -36,7 +36,7 @@ const PanelSection = ({
     .filter((item) => item.fields.macroPainel === true);
 
   return (
-    <Wrapper full={"false"} id={title}>
+    <Wrapper $full={"false"} id={title}>
       <Header>
         <Title>{title}</Title>
         <Subtitle>{subtitle}</Subtitle>