diff --git a/public/Icon.png b/public/Icon.png
new file mode 100644
index 00000000..2f7d15c1
Binary files /dev/null and b/public/Icon.png differ
diff --git a/src/app/(app)/loading.tsx b/src/app/(app)/loading.tsx
index 645f1a78..9971cd30 100644
--- a/src/app/(app)/loading.tsx
+++ b/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 (
-
-
-
-
-
- );
-}
+"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 (
+
+
+
+ );
+}
diff --git a/src/assets/Icons/EmptyBox.tsx b/src/assets/Icons/EmptyBox.tsx
new file mode 100644
index 00000000..b981aef3
--- /dev/null
+++ b/src/assets/Icons/EmptyBox.tsx
@@ -0,0 +1,20 @@
+import { IconProps } from "..";
+
+export const EmptyBox = ({
+ color,
+ height = 32,
+ width = 32,
+ size
+}: IconProps) => {
+ return (
+
+ );
+};
diff --git a/src/assets/Icons/index.tsx b/src/assets/Icons/index.tsx
index 2668b8ef..bb068920 100644
--- a/src/assets/Icons/index.tsx
+++ b/src/assets/Icons/index.tsx
@@ -1,600 +1,581 @@
-import { type IconProps } from "@/types";
-import Filter from "./filter.svg";
-
-export const LogoFC = () => {
- return (
-
- );
-};
-
-export const PlusIcon = () => {
- return (
-
- );
-};
-
-export const Selo = () => {
- return (
-
- );
-};
-
-export const EmailIcon = ({ width, height, color }: IconProps) => {
- return (
-
- );
-};
-
-export const FcLogoMobile = () => {
- return (
-
- );
-};
-
-export const CallsIcon = ({ width, height, color }: IconProps) => {
- return (
-
- );
-};
-export const HomeIcon = ({ width, height, color }: IconProps) => {
- return (
-
- );
-};
-
-export const SettingsIcon = ({ width, height, color }: IconProps) => {
- return (
-
- );
-};
-
-export const UserExists = () => {
- return (
-
- );
-};
-
-export const FilterIcon = () => {
- return ;
-};
-
-export const SearchIcon = ({
- width = "40px",
- height = "40px",
- color = "black"
-}: IconProps) => {
- return (
-
- );
-};
-
-export const ClearIcon = ({
- width = "40px",
- height = "40px",
- color = "black"
-}: IconProps) => {
- return (
-
- );
-};
-
-export const ClearDisabledIcon = ({
- width = "40px",
- height = "40px",
- color = "black"
-}: IconProps) => {
- return (
-
- );
-};
-
-// export const EyeIcon = ({
-// width = "40px",
-// height = "40px",
-// color = "black",
-// }: IconProps) => {
-// return (
-//
-// );
-// };
-
-// export const EyeClosedIcon = ({
-// width = "40px",
-// height = "40px",
-// color = "black",
-// }: IconProps) => {
-// return (
-//
-// );
-// };
+import { type IconProps } from "@/types";
+import Filter from "./filter.svg";
+
+export const PlusIcon = () => {
+ return (
+
+ );
+};
+
+export const Selo = () => {
+ return (
+
+ );
+};
+
+export const EmailIcon = ({ width, height, color }: IconProps) => {
+ return (
+
+ );
+};
+
+export const CallsIcon = ({ width, height, color }: IconProps) => {
+ return (
+
+ );
+};
+export const HomeIcon = ({ width, height, color }: IconProps) => {
+ return (
+
+ );
+};
+
+export const SettingsIcon = ({ width, height, color }: IconProps) => {
+ return (
+
+ );
+};
+
+export const UserExists = () => {
+ return (
+
+ );
+};
+
+export const FilterIcon = () => {
+ return ;
+};
+
+export const SearchIcon = ({
+ width = "40px",
+ height = "40px",
+ color = "black"
+}: IconProps) => {
+ return (
+
+ );
+};
+
+export const ClearIcon = ({
+ width = "40px",
+ height = "40px",
+ color = "black"
+}: IconProps) => {
+ return (
+
+ );
+};
+
+export const ClearDisabledIcon = ({
+ width = "40px",
+ height = "40px",
+ color = "black"
+}: IconProps) => {
+ return (
+
+ );
+};
+
+// export const EyeIcon = ({
+// width = "40px",
+// height = "40px",
+// color = "black",
+// }: IconProps) => {
+// return (
+//
+// );
+// };
+
+// export const EyeClosedIcon = ({
+// width = "40px",
+// height = "40px",
+// color = "black",
+// }: IconProps) => {
+// return (
+//
+// );
+// };
+
+export * from "./EmptyBox";
diff --git a/src/assets/Images/fcLogoRed.svg b/src/assets/Images/fcLogoRed.svg
deleted file mode 100644
index ff331197..00000000
--- a/src/assets/Images/fcLogoRed.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/components/NoContent/index.tsx b/src/components/NoContent/index.tsx
index da2a00f0..7a92e723 100644
--- a/src/components/NoContent/index.tsx
+++ b/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 (
- {typeof icon === "string" || typeof icon === "undefined" ? (
+ {typeof icon === "string" ? (
+ ) : typeof icon === "undefined" ? (
+
) : (
icon
)}
diff --git a/src/components/NoContent/styles.tsx b/src/components/NoContent/styles.tsx
index 795c0667..c4ec5e91 100644
--- a/src/components/NoContent/styles.tsx
+++ b/src/components/NoContent/styles.tsx
@@ -14,11 +14,10 @@ export const NoContentContainer = styled.div`
`;
export const NoContentTitle = styled.h1`
- 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"};
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index db0b2590..160b8d7a 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -44,7 +44,7 @@ const Homepage = () => {
)}
diff --git a/src/screens/login/styles.ts b/src/screens/login/styles.ts
index d2da618f..11da694d 100644
--- a/src/screens/login/styles.ts
+++ b/src/screens/login/styles.ts
@@ -1,262 +1,262 @@
-"use client";
-
-import { CustomLink } from "@/components";
-import { Column } from "@/styles";
-import styled, { css } from "styled-components";
-
-export const LoginBoxContainer = styled.div`
- display: flex;
- width: 40rem;
- height: 42.4rem;
- background: #f6f7f7;
- box-shadow: 0px 10px 19px rgba(178, 179, 181, 0.7);
- border-radius: 6px;
- margin-top: 8.25rem;
- flex-direction: column;
- align-items: center;
-`;
-export const WelcomeText = styled.h1`
- margin-top: 4.5rem;
- width: 100%;
- height: 7.9rem;
-
- font-weight: 700px;
- font-size: 3.2rem;
- color: #7ac143;
- text-align: center;
-`;
-export const DivLogin = styled.div`
- display: flex;
- width: 32rem;
- height: 3.571rem;
- align-items: center;
- img {
- margin-left: -4rem;
- margin-top: 0.5rem;
- }
-`;
-
-export const LoginText = styled.h1`
- font-style: normal;
- font-weight: 600;
- font-size: 16px;
- line-height: 19px;
- color: #000000;
- padding-top: 2rem;
-`;
-export const LoginForgotText = styled.h1`
- font-style: normal;
- font-weight: 600;
- font-size: 14px;
- line-height: 19px;
- color: #000000;
- padding-top: 0.9rem;
- cursor: pointer;
-`;
-export const AsteriscText = styled.span`
- font-style: normal;
- font-weight: 600;
- font-size: 16px;
- color: #e71c35;
-`;
-
-export const InputLogin = styled.input`
- width: 32rem;
- height: 3.571rem;
- background: #e5e6e6;
- box-shadow: inset 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
- border-radius: 6px;
-
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 17px;
- color: #858585;
- padding-left: 1.5rem;
- margin-top: 0.5rem;
-`;
-export const ButtonLogin = styled.button`
- width: 32rem;
- height: 4rem;
- background: #da0812;
- border-radius: 2px;
- font-family: "Roboto";
- font-style: normal;
- font-weight: 500;
- font-size: 2rem;
- line-height: 23px;
- text-align: center;
- color: #ffffff;
- margin-top: 2.9rem;
- cursor: pointer;
-`;
-
-export const ContainerLogin = styled.div`
- display: flex;
-
- flex-direction: column;
- .GoLeft {
- align-self: flex-end;
- }
-`;
-
-export const Logo = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- max-height: 280px;
- flex: 1;
- /* padding: 128px 0; */
-`;
-
-export const LoginMobile = styled.div`
- display: flex;
- width: 100%;
- height: 100lvh;
- padding: 0px 20px;
- flex-direction: column;
- align-items: center;
- justify-content: space-evenly;
- background-color: #f8fcf6;
-`;
-
-export const TextMobile = styled.h1`
- color: #53565a;
- font-size: 2rem;
- font-weight: 500;
- margin-bottom: calc(2rem - 0.3rem);
-`;
-
-export const InputSection = styled(Column)`
- display: flex;
- gap: 1rem;
- /* margin-bottom: 28px; */
-
- & > div > input:focus:valid,
- & > div > input:valid {
- background-color: #ebf6e3;
- border-bottom: 1px solid #7ac143;
- }
-
- & > div > input:focus:invalid {
- background-color: #fbdde1;
- border-bottom: 2px solid #b3261e;
- }
-`;
-
-export const PasswordMobile = styled.input``;
-
-export const PasswordText = styled.span``;
-
-export const PasswordInput = styled.div`
- & > div {
- width: 100%;
- display: flex;
- flex-direction: row;
- }
- & > input {
- display: flex;
- align-items: center;
- padding-right: 4px;
- height: 5.5rem;
- width: 100%;
- background-color: #e5e6e6;
- padding: 8px 4px;
- border-radius: 4px 4px 0px 0px;
- margin-bottom: 8px;
- font-size: 2rem;
- color: #1c1b1fb2;
- font-weight: 400;
- }
-`;
-
-export const ButtonSection = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1.2rem;
- padding-top: 2.4rem;
- gap: 1rem;
-
- span,
- a {
- font-weight: 500;
- text-align: center;
- }
- span {
- font-size: 14px;
- }
- p {
- font-size: 16px;
- color: #131312;
- }
-
- p > a {
- color: #2b6c01;
- font-size: 16px;
- }
-`;
-
-interface AccessButtonProps {
- $isInactive: boolean;
-}
-
-export const AccessButton = styled.button`
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 100px;
- height: 40px;
- width: 265px;
- gap: 8px;
- align-self: center;
-
- ${({ $isInactive }) =>
- $isInactive
- ? css`
- background-color: #dee0dd;
- color: #919793;
- `
- : css`
- background: #ea374d;
- color: #fff;
- `}
-`;
-
-export const FormContainer = styled.form``;
-export const ScreenContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100vw;
- height: 100vh;
- transition: 1s ease-in-out;
-
- @media (max-width: 450px) {
- ${LoginMobile} {
- display: flex;
- flex-direction: column;
- }
- background-color: #ffffff;
- ${LoginBoxContainer} {
- display: none;
- }
- }
-`;
-
-export const ForgotPassword = styled(CustomLink)`
- display: flex;
- justify-content: flex-end;
- color: #5a8f19;
- font-size: 14px;
- font-weight: 500;
-`;
-
-export const ForgotPasswordContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: end;
- padding: 0.5rem;
- padding-right: 0;
-`;
+"use client";
+
+import { CustomLink } from "@/components";
+import { Column } from "@/styles";
+import styled, { css } from "styled-components";
+
+export const LoginBoxContainer = styled.div`
+ display: flex;
+ width: 40rem;
+ height: 42.4rem;
+ background: #f6f7f7;
+ box-shadow: 0px 10px 19px rgba(178, 179, 181, 0.7);
+ border-radius: 6px;
+ margin-top: 8.25rem;
+ flex-direction: column;
+ align-items: center;
+`;
+export const WelcomeText = styled.h1`
+ margin-top: 4.5rem;
+ width: 100%;
+ height: 7.9rem;
+
+ font-weight: 700px;
+ font-size: 3.2rem;
+ color: #7ac143;
+ text-align: center;
+`;
+export const DivLogin = styled.div`
+ display: flex;
+ width: 32rem;
+ height: 3.571rem;
+ align-items: center;
+ img {
+ margin-left: -4rem;
+ margin-top: 0.5rem;
+ }
+`;
+
+export const LoginText = styled.h1`
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 19px;
+ color: #000000;
+ padding-top: 2rem;
+`;
+export const LoginForgotText = styled.h1`
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #000000;
+ padding-top: 0.9rem;
+ cursor: pointer;
+`;
+export const AsteriscText = styled.span`
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ color: #e71c35;
+`;
+
+export const InputLogin = styled.input`
+ width: 32rem;
+ height: 3.571rem;
+ background: #e5e6e6;
+ box-shadow: inset 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
+ border-radius: 6px;
+
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 17px;
+ color: #858585;
+ padding-left: 1.5rem;
+ margin-top: 0.5rem;
+`;
+export const ButtonLogin = styled.button`
+ width: 32rem;
+ height: 4rem;
+ background: #da0812;
+ border-radius: 2px;
+ font-family: "Roboto";
+ font-style: normal;
+ font-weight: 500;
+ font-size: 2rem;
+ line-height: 23px;
+ text-align: center;
+ color: #ffffff;
+ margin-top: 2.9rem;
+ cursor: pointer;
+`;
+
+export const ContainerLogin = styled.div`
+ display: flex;
+
+ flex-direction: column;
+ .GoLeft {
+ align-self: flex-end;
+ }
+`;
+
+export const Logo = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-height: 280px;
+ flex: 1;
+ /* padding: 128px 0; */
+`;
+
+export const LoginMobile = styled.div`
+ display: flex;
+ width: 100%;
+ height: 100lvh;
+ padding: 0px 20px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ background-color: #f5f5f5;
+`;
+
+export const TextMobile = styled.h1`
+ color: #53565a;
+ font-size: 2rem;
+ font-weight: 500;
+ margin-bottom: calc(2rem - 0.3rem);
+`;
+
+export const InputSection = styled(Column)`
+ display: flex;
+ gap: 1rem;
+ /* margin-bottom: 28px; */
+
+ & > div > input:focus:valid,
+ & > div > input:valid {
+ background-color: #ebf6e3;
+ border-bottom: 1px solid #7ac143;
+ }
+
+ & > div > input:focus:invalid {
+ background-color: #fbdde1;
+ border-bottom: 2px solid #b3261e;
+ }
+`;
+
+export const PasswordMobile = styled.input``;
+
+export const PasswordText = styled.span``;
+
+export const PasswordInput = styled.div`
+ & > div {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ }
+ & > input {
+ display: flex;
+ align-items: center;
+ padding-right: 4px;
+ height: 5.5rem;
+ width: 100%;
+ background-color: #e5e6e6;
+ padding: 8px 4px;
+ border-radius: 4px 4px 0px 0px;
+ margin-bottom: 8px;
+ font-size: 2rem;
+ color: #1c1b1fb2;
+ font-weight: 400;
+ }
+`;
+
+export const ButtonSection = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.2rem;
+ padding-top: 2.4rem;
+ gap: 1rem;
+
+ span,
+ a {
+ font-weight: 500;
+ text-align: center;
+ }
+ span {
+ font-size: 14px;
+ }
+ p {
+ font-size: 16px;
+ color: #131312;
+ }
+
+ p > a {
+ color: #2b6c01;
+ font-size: 16px;
+ }
+`;
+
+interface AccessButtonProps {
+ $isInactive: boolean;
+}
+
+export const AccessButton = styled.button`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100px;
+ height: 40px;
+ width: 265px;
+ gap: 8px;
+ align-self: center;
+
+ ${({ $isInactive }) =>
+ $isInactive
+ ? css`
+ background-color: #dee0dd;
+ color: #919793;
+ `
+ : css`
+ background: #ea374d;
+ color: #fff;
+ `}
+`;
+
+export const FormContainer = styled.form``;
+export const ScreenContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100vw;
+ height: 100vh;
+ transition: 1s ease-in-out;
+
+ @media (max-width: 450px) {
+ ${LoginMobile} {
+ display: flex;
+ flex-direction: column;
+ }
+ background-color: #ffffff;
+ ${LoginBoxContainer} {
+ display: none;
+ }
+ }
+`;
+
+export const ForgotPassword = styled(CustomLink)`
+ display: flex;
+ justify-content: flex-end;
+ color: #5a8f19;
+ font-size: 14px;
+ font-weight: 500;
+`;
+
+export const ForgotPasswordContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ padding: 0.5rem;
+ padding-right: 0;
+`;
diff --git a/src/types/index.tsx b/src/types/index.tsx
index 29065e92..e85e45ce 100644
--- a/src/types/index.tsx
+++ b/src/types/index.tsx
@@ -29,8 +29,9 @@ type IssueDto = {
};
type IconProps = {
- width?: string;
- height?: string;
+ width?: string | number;
+ height?: string | number;
+ size?: string | number;
color?: string;
};