fix: 💄 Correção do background do Loading Componente

src/app/(app)/loading.tsx

@@ -1,18 +1,18 @@
-import { LoginMobile, Logo } from "@/screens/login/styles";
-import Image from "next/image";
-
-export default function Loading() {
-  // You can add any UI inside Loading, including a Skeleton.
-  return (
-    <LoginMobile>
-      <Logo>
-        <Image
-          width={120}
-          height={120}
-          alt="Services logo"
-          src="/android-chrome-512x512.png"
-        />
-      </Logo>
-    </LoginMobile>
-  );
-}
+"use client";
+
+import { PageContainer } from "@/styles";
+import Image from "next/image";
+
+export default function Loading() {
+  // You can add any UI inside Loading, including a Skeleton.
+  return (
+    <PageContainer>
+      <Image
+        width={120}
+        height={120}
+        alt="Services logo"
+        src="/Icon.png"
+      />
+    </PageContainer>
+  );
+}

src/assets/Icons/EmptyBox.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from "..";
+
+export const EmptyBox = ({
+  color,
+  height = 32,
+  width = 32,
+  size
+}: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={size || width}
+      height={size || height}
+      viewBox="0 0 24 24">
+      <path d="M 5.75 3 A 1.0001 1.0001 0 0 0 4.8867188 3.4960938 L 3.1425781 6.4863281 L 3.1367188 6.4960938 L 0.14257812 11.486328 L 1.8574219 12.513672 L 3 10.609375 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 10.609375 L 22.142578 12.513672 L 23.857422 11.486328 L 20.876953 6.5214844 A 1.0001 1.0001 0 0 0 20.863281 6.4960938 L 19.113281 3.4960938 A 1.0001 1.0001 0 0 0 18.25 3 L 5.75 3 z M 6.3242188 5 L 17.675781 5 L 18.841797 7 L 5.1582031 7 L 6.3242188 5 z M 5 9 L 19 9 L 19 19 L 5 19 L 5 9 z M 9 11 L 9 13 L 15 13 L 15 11 L 9 11 z"></path>
+    </svg>
+  );
+};

src/components/NoContent/index.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { NoContentProps } from "@/types";
-import EmptyBox from "@/assets/Images/EmptyBox.png";
+
 import { NoContentContainer, NoContentTitle } from "./styles";
 import Image from "next/image";
 import { useTheme } from "styled-components";
+import { EmptyBox } from "@/assets";
 
 export const NoContent = ({
   title,
@@ -16,11 +17,13 @@ export const NoContent = ({
   const theme = useTheme();
   return (
     <NoContentContainer>
-      {typeof icon === "string" || typeof icon === "undefined" ? (
+      {typeof icon === "string" ? (
         <Image
-          src={icon || EmptyBox}
+          src={icon}
           alt={alt || "caixa vazia"}
         />
+      ) : typeof icon === "undefined" ? (
+        <EmptyBox size={92} />
       ) : (
         icon
       )}

src/components/NoContent/styles.tsx

@@ -14,11 +14,10 @@ export const NoContentContainer = styled.div`
 `;
 
 export const NoContentTitle = styled.h1<NoContentProps>`
-  font-size: ${({ fontSize }) => fontSize || "24px"};
+  font-size: ${({ fontSize }) => fontSize || "1.5rem"};
   font-weight: 600;
-  line-height: 29px;
   letter-spacing: -0.005em;
-  line-height: 132%;
+  line-height: 108%;
   text-align: center;
   word-wrap: break-word;
   color: ${({ color }) => color ?? "#494949"};

src/screens/home/index.tsx

@@ -44,7 +44,7 @@ const Homepage = () => {
                 <NoContent
                   alt="caixa vazia"
                   title="Não há chamados no momento."
-                  color={theme.colors.neutral["55"]}
+                  color={theme.colors.neutral["5"]}
                 />
               )}
             </MainContainer>