Yet in login and base components

Logout button and modal created

perfil user in progress

backend/src/controllers/WhatsAppSessionController.ts

@@ -7,7 +7,7 @@ import UpdateWhatsAppService from "../services/WhatsappService/UpdateWhatsAppSer
 
 import { restartWhatsSession } from "../helpers/RestartWhatsSession";
 
-import path from 'path'; 
+import path from 'path';
 
 // import { WWebJsw } from "../../WWebJS/session-bd_40"
 
@@ -37,7 +37,7 @@ const update = async (req: Request, res: Response): Promise<Response> => {
 
 
 const restart = async (req: Request, res: Response): Promise<Response> => {
-  
+
   const { whatsappId } = req.params;
 
   console.log('FROM REQUEST WHATSAPP ID: ', whatsappId)
@@ -58,9 +58,9 @@ const remove = async (req: Request, res: Response): Promise<Response> => {
   const wbot = getWbot(whatsapp.id);
 
   console.log(
-    'Desconectou s whatsapp.id: ', whatsapp.id, 
-    ' | PATH TO DELETE',path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`)
-    ) 
+    'Desconectou s whatsapp.id: ', whatsapp.id,
+    ' | PATH TO DELETE', path.join(process.cwd(), '.wwebjs_auth', `session-bd_${whatsapp.id}`)
+  )
 
   //removeDir(path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`))
 

backend/src/libs/wbot.ts

@@ -46,8 +46,6 @@ const syncUnreadMessages = async (wbot: Session) => {
 export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
   return new Promise((resolve, reject) => {
     try {
-
-
       const io = getIO();
       const sessionName = whatsapp.name;
       let sessionCfg;
@@ -55,8 +53,6 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
       if (whatsapp && whatsapp.session) {
         sessionCfg = JSON.parse(whatsapp.session);
       }
-
-
       //NOVA OPÇÃO MD
       const wbot: Session = new Client({
         session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }),
@@ -85,7 +81,7 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
 
       wbot.on("qr", async qr => {
 
-         
+
         if (!backupSession.includes(whatsapp.id)) {
           backupSession.push(whatsapp.id)
         }
@@ -163,16 +159,16 @@ export const initWbot = async (whatsapp: Whatsapp): Promise<Session> => {
         await syncUnreadMessages(wbot);
 
         resolve(wbot);
- 
+
 
 
 
         console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>.. BACKUP SESSION whatsapp.id ${whatsapp.id} | backupSession: ${backupSession}`)
 
-        const whatsIndex = backupSession.findIndex((id:number) => id === +whatsapp.id);
+        const whatsIndex = backupSession.findIndex((id: number) => id === +whatsapp.id);
 
         console.log('               whatsIndex: ', whatsIndex)
-       
+
         if (whatsIndex !== -1) {
 
           backupSession.splice(whatsIndex, 1);

frontend/src/assets/icons/UserModal/perfil.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0C4.032 0 0 4.032 0 9C0 13.968 4.032 18 9 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 9 0ZM12.249 5.706C13.212 5.706 13.986 6.48 13.986 7.443C13.986 8.406 13.212 9.18 12.249 9.18C11.286 9.18 10.512 8.406 10.512 7.443C10.503 6.48 11.286 5.706 12.249 5.706ZM6.849 4.284C8.019 4.284 8.973 5.238 8.973 6.408C8.973 7.578 8.019 8.532 6.849 8.532C5.679 8.532 4.725 7.578 4.725 6.408C4.725 5.229 5.67 4.284 6.849 4.284ZM6.849 12.501V15.876C4.689 15.201 2.979 13.536 2.223 11.412C3.168 10.404 5.526 9.891 6.849 9.891C7.326 9.891 7.929 9.963 8.559 10.089C7.083 10.872 6.849 11.907 6.849 12.501ZM9 16.2C8.757 16.2 8.523 16.191 8.289 16.164V12.501C8.289 11.223 10.935 10.584 12.249 10.584C13.212 10.584 14.877 10.935 15.705 11.619C14.652 14.292 12.051 16.2 9 16.2Z" fill="current" />
+</svg>

frontend/src/assets/icons/UserModal/signoff.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.6257 4.41706C14.3603 4.15175 13.9303 4.15175 13.6648 4.41706C13.3995 4.68238 13.3995 5.11246 13.6648 5.37778C14.9115 6.62446 15.598 8.28202 15.598 10.0451C15.598 11.8081 14.9115 13.4656 13.6648 14.7122C12.3783 15.9988 10.6886 16.642 8.99843 16.6418C7.30826 16.6417 5.61773 15.9983 4.33101 14.7116C1.75803 12.1386 1.7583 7.95194 4.33146 5.37877C4.59678 5.11346 4.59678 4.68328 4.33146 4.41806C4.06615 4.15275 3.63606 4.15275 3.37066 4.41806C0.267772 7.52095 0.267501 12.5697 3.37021 15.6724C4.92206 17.2243 6.96015 18.0001 8.99852 18C11.0363 17.9999 13.0744 17.2243 14.6257 15.673C16.129 14.1698 16.9568 12.1712 16.9568 10.0452C16.9569 7.91915 16.1289 5.92036 14.6257 4.41706Z" fill="current" />
+    <path d="M8.99772 8.80131C9.37301 8.80131 9.67709 8.49713 9.67709 8.12194V0.679365C9.67709 0.304174 9.37301 0 8.99772 0C8.62244 0 8.31836 0.304174 8.31836 0.679365V8.12194C8.31836 8.49722 8.62244 8.80131 8.99772 8.80131Z" fill="current" />
+</svg>

frontend/src/components/Base/BTN/Btn.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import BtnBaseStyled from "./Btn.styled";
+
+const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => {
+  return (
+    <BtnBaseStyled bgcolor={bgcolor} fontcolor={fontcolor} {...props}>
+      {text}
+    </BtnBaseStyled>
+  );
+};
+
+export default BtnComponent;

frontend/src/components/Base/BTN/Btn.styled.jsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+const BtnBaseStyled = styled.button`
+  cursor: pointer;
+  border: 1px solid ${({ bgcolor }) => bgcolor};
+  background-color: ${({ bgcolor }) => bgcolor};
+  color: ${({ fontcolor }) => fontcolor};
+  padding: 6px 16px 3px;
+  border-radius: 5px;
+  margin: 12px 0;
+  font-size: 18px;
+  font-family: "Helvetica55";
+  vertical-align: baseline;
+  transition: all 0.2s linear;
+  &:hover {
+    border: 1px solid ${({ bgcolor }) => bgcolor};
+    color: ${({ bgcolor }) => bgcolor};
+    background-color: ${({ fontcolor }) => fontcolor};
+    transition: all 0.2s linear;
+  }
+`;
+
+export default BtnBaseStyled;
+

frontend/src/components/Base/Form/FormComponent.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import FormComponentStyled from "./FormComponent.style";
+
+
+const FormComponent = ({ children, ...props }) => {
+  return <FormComponentStyled {...props}>{children}</FormComponentStyled>;
+};
+
+export default FormComponent;
+

frontend/src/components/Base/Form/FormComponent.style.jsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const FormComponentStyled = styled.form`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+export default FormComponentStyled;

frontend/src/components/Base/Form/Input/InputComponent.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import LabelComponent from "../Label/LabelComponent";
+import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
+
+const InputComponent = ({ type, id, label, ...props }) => {
+  return (
+    <InputContainerStyled>
+      <LabelComponent forhtml={id} label={label} />
+      <InputComponentStyled type={type} id={id} {...props} />
+    </InputContainerStyled>
+  );
+};
+
+export default InputComponent;
+

frontend/src/components/Base/Form/Input/InputComponent.style.jsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+const InputComponentStyled = styled.input`
+  background-color: ${color.pricinpal.grisOscuro};
+  padding: 12px;
+  font-size: 14px;
+  font-family: "Helvetica85";
+  color: ${color.pricinpal.blanco};
+  border: 2px solid ${color.pricinpal.blanco};
+  border-radius: 5px;
+  ::placeholder {
+    color: ${color.gradient.placeholder};
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const InputContainerStyled = styled.div`
+width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 12px 0;
+`;
+
+export  {InputComponentStyled,InputContainerStyled};
+

frontend/src/components/Base/Form/Label/LabelComponent.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import LabelComponentStyled from "./LabelComponent.style"
+
+
+const LabelComponent = ({label,forhtml}) => {
+  return (
+    <LabelComponentStyled forhtml={forhtml}>{label}</LabelComponentStyled>
+  )
+}
+
+export default LabelComponent

frontend/src/components/Base/Form/Label/LabelComponent.style.jsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+const LabelComponentStyled = styled.label`
+  color: ${color.pricinpal.blanco};
+  text-align: left;
+  font-size: 16px;
+  font-family: "Helvetica85";
+  text-transform: uppercase;
+  margin: 6px 0;
+`;
+
+export default LabelComponentStyled;
+

frontend/src/components/Base/MainContainer.jsx

@@ -1,18 +0,0 @@
-import React from "react";
-import PageTitle from "../PageTitle/PageTitle";
-
-import MainContainerStyled, { ContentContainer, TitleContainer } from "./MainContainer.style";
-
-const MainContainer = ({ children }) => {
-  return (
-    <MainContainerStyled>
-      <TitleContainer>
-        <PageTitle />
-      </TitleContainer>
-      <ContentContainer>{children}</ContentContainer>
-    </MainContainerStyled>
-  );
-};
-
-export default MainContainer;
-

frontend/src/components/Base/MainContainer/MainContainer.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import PageTitle from "../../PageTitle/PageTitle";
+
+
+import MainContainerStyled, {
+  TitleContainerStyled,
+  ContentContainerStyled,
+} from "./MainContainer.style";
+
+const MainContainer = ({ children }) => {
+  return (
+    <MainContainerStyled>
+      <TitleContainerStyled>
+        <PageTitle />
+      </TitleContainerStyled>
+      <ContentContainerStyled>{children}</ContentContainerStyled>
+    </MainContainerStyled>
+  );
+};
+
+export default MainContainer;
+

frontend/src/components/Base/MainContainer/MainContainer.style.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const MainContainer = styled.main`
+const MainContainerStyled = styled.main`
   padding-left: 97px;
   padding-top: 26px;
   margin-right: 16px;
@@ -10,17 +10,17 @@ const MainContainer = styled.main`
   align-items: flex-end;
   height: 96vh;
 `;
-const TitleContainer = styled.div`
+const TitleContainerStyled = styled.div`
   width: 100%;
 `;
-const ContentContainer = styled.div`
+const ContentContainerStyled = styled.div`
   width: 100%;
   height: 100vh;
   overflow: hidden;
   margin-top: 16px;
 `;
 
-export default MainContainer;
+export default MainContainerStyled;
 
-export { TitleContainer, ContentContainer };
+export { TitleContainerStyled, ContentContainerStyled };
 

frontend/src/components/ConfirmationModal/ConfirmationModal.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import BtnComponent from "../Base/BTN/Btn";
+
+import {
+  ConfirmationModalStyled,
+  ModalOverlayStyled,
+  ModalConfirmationBtns,
+} from "./ConfirmationModal.style";
+
+import { color } from "../../style/varibles";
+
+const ConfirmationModal = ({ children, title, modal, click }) => {
+  const { handleModal, handleLogout } = click;
+  return (
+    <ModalOverlayStyled modal={modal} onClick={handleModal}>
+      <ConfirmationModalStyled>
+        <h1>{title}</h1>
+        <p>{children}</p>
+        <ModalConfirmationBtns>
+          <BtnComponent
+            text="Cancelar"
+            bgcolor={color.pricinpal.blanco}
+            fontcolor={color.pricinpal.grisOscuro}
+            onClick={handleModal}
+          />
+          <BtnComponent
+            text="Sim"
+            bgcolor={color.status.yes}
+            fontcolor={color.pricinpal.blanco}
+            onClick={handleLogout}
+          />
+        </ModalConfirmationBtns>
+      </ConfirmationModalStyled>
+    </ModalOverlayStyled>
+  );
+};
+
+export default ConfirmationModal;
+

frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+const ModalOverlayStyled = styled.div`
+  display: ${({modal}) => (modal ? "flex" : "none")};
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #00000050;
+  z-index: 9999;
+  top: 0;
+  right: 0;
+`;
+
+const ConfirmationModalStyled = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 16px;
+  justify-content: center;
+  text-align: center;
+  z-index: 10000;
+  border-radius: 5px;
+  background-color: ${color.pricinpal.grisOscuro};
+  width: 50%;
+  h1 {
+    margin: 16px 0;
+  }
+  p {
+    font-size: 18px;
+    margin: 16px 0;
+  }
+`;
+
+const ModalConfirmationBtns = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+`;
+
+export { ConfirmationModalStyled, ModalOverlayStyled, ModalConfirmationBtns };
+

frontend/src/components/Menu/MenuComponent.jsx

@@ -61,7 +61,7 @@ const MenuComponent = () => {
       <MenuTop hover={hover}/>
       <MenuListStyled>
         <MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
-        <MenuItem icon={<Contact />} text="Contatos" to="contacts" hover={hover} />
+        <MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} />
         <MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} />
         <MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
         <Divider />

frontend/src/components/PageTitle/PageTitle.jsx

@@ -1,17 +1,22 @@
 import React from "react";
 import { PageTitleStyled } from "./PageTitle.style";
+
 import UserBtn from "./UserBtn/UserBtn";
 
 import { AuthContext } from "../../context/Auth/AuthContext";
-
-import logo from "../../assets/images/Logo.png"
+import logo from "../../assets/images/Logo.png";
 
 const PageTitle = () => {
+  const [modal, setModal] = React.useState(false);
   const { user } = React.useContext(AuthContext);
+
+  const handleModal = () => {
+    setModal(!modal);
+  };
   return (
     <PageTitleStyled>
       <h1>PageTitle</h1>
-      <UserBtn user={user} img={logo}/>
+      <UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
     </PageTitleStyled>
   );
 };

frontend/src/components/PageTitle/PageTitle.style.jsx

@@ -17,11 +17,12 @@ const UserBtnStyled = styled.button`
   border: none;
   border-radius: 5px;
   font-family: "Helvetica55";
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
   font-size: 14px;
   text-transform: capitalize;
   align-items: center;
-  img{
+  cursor: pointer;
+  img {
     background-color: white;
     width: 24px;
     height: 24px;
@@ -29,6 +30,39 @@ const UserBtnStyled = styled.button`
     border-radius: 50%;
     margin-right: 12px;
   }
-  `;
+`;
+
+const UserModalStyled = styled.div`
+  display: ${({ modal }) => (modal ? "flex" : "none")};
+  position: absolute;
+  background-color: white;
+  padding: 12px;
+  right: 2rem;
+  top: 5.5rem;
+  border-radius: 5px;
+  box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity};
+`;
+
+const UserModalListStyled = styled.ul`
+  display: flex;
+  flex-direction: column;
+`;
+
+const UserModalItemStyled = styled.li`
+  display: flex;
+  justify-content: left;
+  color: ${color.pricinpal.grisOscuro};
+  margin: 6px 0;
+  cursor: pointer;
+  svg {
+    margin-right: 12px;
+  }
+`;
+export {
+  PageTitleStyled,
+  UserBtnStyled,
+  UserModalStyled,
+  UserModalListStyled,
+  UserModalItemStyled,
+};
 
-export { PageTitleStyled, UserBtnStyled };

frontend/src/components/PageTitle/UserBtn/UserBtn.jsx

@@ -1,12 +1,39 @@
 import React from "react";
-import { UserBtnStyled } from "../PageTitle.style";
+import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";
+
+import { AuthContext } from "../../../context/Auth/AuthContext";
+import UserItem from "./UserItem";
+
+import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
+import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
+import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
+import UserModal from "../../UserModal/UserModal";
+
+const UserBtn = ({ user, img, modal, modalSet }) => {
+  const [modalConfirm, setModalConfirm] = React.useState(false);
+  const { handleLogout } = React.useContext(AuthContext);
+
+  const handleModal = () => {
+    setModalConfirm(!modalConfirm);
+  };
 
-const UserBtn = ({ user, img }) => {
   return (
-    <UserBtnStyled>
-      <img src={img} alt={user ? user.name : null} width="24px" />
-      Bem Vindo, {user ? user.name : null}
-    </UserBtnStyled>
+    <>
+      <UserBtnStyled onClick={modalSet}>
+        <img src={img} alt={user ? user.name : null} width="24px" />
+        Bem Vindo, {user ? user.name : null}
+      </UserBtnStyled>
+      <UserModalStyled modal={modal}>
+        <UserModalListStyled>
+          <UserItem title="Perfil" icon={<Perfil />} />
+          <UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
+        </UserModalListStyled>
+      </UserModalStyled>
+      <UserModal />
+      <ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
+        Deseja Sair do sistema?
+      </ConfirmationModal>
+    </>
   );
 };
 

frontend/src/components/PageTitle/UserBtn/UserItem.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { UserModalItemStyled } from "../PageTitle.style";
+
+const UserItem = ({ icon, title, onClick }) => {
+  return (
+    <UserModalItemStyled onClick={onClick}>
+      {icon}
+      {title}
+    </UserModalItemStyled>
+  );
+};
+
+export default UserItem;
+

frontend/src/components/UserModal/UserModal.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";
+
+import api from "../../services/api";
+import { AuthContext } from "../../context/Auth/AuthContext";
+import { Can } from "../Can";
+import BtnComponent from "../Base/BTN/Btn";
+
+import FormComponent from "../Base/Form/FormComponent";
+import InputComponent from "../Base/Form/Input/InputComponent";
+
+const style = {
+  width: "100%",
+  justifyContent: "flex-start",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+}
+
+const UserModal = () => {
+  return (
+    <ModalOverlayStyled>
+      <UserModalStyled>
+        <div style={style}>
+          <h1>Imagem</h1>
+          <p>Desc</p>
+        </div>
+        <FormComponent method="get">
+          <InputComponent id="nome" label="Nome" type="text" />
+          <InputComponent id="email" label="E-mail" type="email" />
+          <InputComponent id="password" label="Senha" type="password" />
+          <UserBtns>
+            <BtnComponent text="Cancelar" />
+            <BtnComponent text="Salvar" />
+          </UserBtns>
+        </FormComponent>
+      </UserModalStyled>
+    </ModalOverlayStyled>
+  );
+};
+
+export default UserModal;
+

frontend/src/components/UserModal/UserModal.style.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+const ModalOverlayStyled = styled.div`
+  /* display: ${({ modal }) => (modal ? "flex" : "none")}; */
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #00000050;
+  z-index: 9999;
+  top: 0;
+  right: 0;
+`;
+const UserModalStyled = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  padding: 12px;
+  z-index: 10000;
+  border-radius: 5px;
+  background-color: ${color.pricinpal.grisOscuro};
+  width: 50%;
+`;
+const UserBtns = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export { ModalOverlayStyled, UserModalStyled,UserBtns };
+

frontend/src/layout/index.js

@@ -1,18 +1,18 @@
 import React from "react";
 
 import Loading from "../components/LoadingScreen/Loading";
-import MainContainer from "../components/Base/MainContainer";
+import MainContainer from "../components/Base/MainContainer/MainContainer";
 import { AuthContext } from "../context/Auth/AuthContext";
 import { i18n } from "../translate/i18n";
 import MenuComponent from "../components/Menu/MenuComponent";
 
 const LoggedInLayout = ({ children }) => {
   const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
-  const { user } = React.useContext(AuthContext);
-
   const logout = (e) => {
     handleLogout();
   };
+  const { user } = React.useContext(AuthContext);
+
 
   if (loading) {
     return <Loading />;

frontend/src/pages/Login/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { AuthContext } from "../../context/Auth/AuthContext";
 import { i18n } from "../../translate/i18n";
 
-import ContainerLogin from "../../components/Base/ContainerLogin";
+import ContainerLogin from "../../components/Base/ContainerLogin/ContainerLogin";
 import VideoComponent from "../../components/VideoTag/VideoComponent";
 import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
 import Company from "../../components/LoginComponents/CompanyLogo/Company";

frontend/src/style/varibles.jsx

@@ -50,7 +50,11 @@ export const color = {
     warning: "#FFC700"
   },
   gradient:{
-    bgOpacity:"#212F3CD8"
+    bgOpacity:"#212F3CD8",
+    placeholder:"#ffffff83"
+  },
+  shadow:{
+    dark:"2px 2px 4px 2px"
   }
 };