Merge pull request #7 from deco-sites/feature/style-mydocs

finished styling upload new doc
deco-sites · Apr 1, 2024 · 255ecf1 · 255ecf1
2 parents a1655c7 + 359f468
commit 255ecf1
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 43 deletions.
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
@@ -14,6 +14,7 @@ export type AvailableIcons =
   | "Diners"
   | "Discord"
   | "Discount"
+  | "Download"
   | "Elo"
   | "Ecanna"
   | "Edit"

diff --git a/components/ui/MyDocs.tsx b/components/ui/MyDocs.tsx
@@ -1,5 +1,6 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Modal from "../../components/ui/Modal.tsx";
+import PageWrap from "../../components/ui/PageWrap.tsx";
 import { useEffect, useState } from "preact/hooks";
 import { useUI } from "../../sdk/useUI.ts";
 import { h } from "preact";
@@ -20,14 +21,18 @@ const DocList = ({ docs }: { docs: DocListType[] }) => {
       <ul>
         {docs.map((d) => {
           return (
-            <li class="flex items-center">
+            <li class="flex items-center gap-4">
               <a class="w-full" href={d.file_url}>
-                <div class="flex justify-between rounded-xl bg-slate-300 w-full px-5 h-10 items-center">
+                <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
                   <div class="flex gap-2">
-                    <Icon id="Anexo" size={24} />
-                    <span>{d.title}</span>
+                    <span class="text-[#8F8D8D]">
+                      <Icon id="Anexo" size={24} />
+                    </span>
+                    <span class="text-[#393939] font-semibold">{d.title}</span>
                   </div>
-                  <span class="badge">{d.category}</span>
+                  <span class="text-[#8F8D8D] flex justify-end w-6">
+                    <Icon id="Download" height={19} />
+                  </span>
                 </div>
               </a>
               <Icon id="Trash" size={24} />
@@ -39,12 +44,12 @@ const DocList = ({ docs }: { docs: DocListType[] }) => {
   } else {
     return (
       <div
-        class="flex justify-between rounded-xl bg-red-300 w-full px-5 h-10 items-center cursor-pointer gap-4 text-red-600"
+        class="flex flex-col rounded-md bg-[#E9932E] w-full px-5 p-4 items-center cursor-pointer gap-4 text-[#954409]"
         onClick={() => {
           displayNewDocModal.value = true;
         }}
       >
-        <span class="">
+        <span class="font-semibold">
           Você ainda não tem documentos deste tipo. Clique para fazer upload
         </span>
         <Icon id="Upload" size={24} />
@@ -142,10 +147,12 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
       open={displayNewDocModal.value}
       onClose={() => displayNewDocModal.value = false}
     >
-      <div class="flex flex-col p-16 gap-3 bg-white">
-        <h3>Subir novo Documento</h3>
+      <div class="flex flex-col p-16 gap-3 bg-[#EDEDED] rounded-xl">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+          Subir novo Documento
+        </h3>
         <input
-          class="input input-bordered"
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white"
           placeholder="Título do Documento"
           value={docTitle}
           onChange={(e) => {
@@ -157,7 +164,7 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
           onChange={(e) => {
             setDocCategory(e.currentTarget.value);
           }}
-          class="select select-primary w-full max-w-xs"
+          class="select select-primary w-full max-w-xs text-[#8b8b8b] border-none disabled:bg-[#e3e3e3] bg-white"
         >
           <option disabled selected>Tipo de Documento</option>
           <option value="habeas_corpus">Jurídico / Habeas Corpus</option>
@@ -172,16 +179,24 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
           </div>
           <input
             type="file"
-            class="file-input file-input-bordered file-input-xs w-full max-w-xs"
+            class="file-input file-input-primary w-full max-w-xs"
             onChange={(e) => handleStoreDocument(e)}
           />
         </label>
 
-        <button class="btn btn-primary" onClick={handleCreate}>
+        <button class="btn btn-secondary text-white" onClick={handleCreate}>
           Subir Documento{"   "}{isUploading
             ? <span class="loading loading-spinner text-white"></span>
             : <Icon id="Upload" size={24} />}
         </button>
+        <button
+          onClick={() => {
+            displayNewDocModal.value = false;
+          }}
+          class="btn btn-ghost uppercase font-medium"
+        >
+          Cancelar
+        </button>
       </div>
     </Modal>
   );
@@ -223,16 +238,19 @@ function MyDocs() {
   const idDocs = docs.filter((d) => d.category === "identification");
 
   return (
-    <div class="">
-      <div class="flex justify-between mb-10">
-        <h3>Meus Documentos</h3>
+    <PageWrap>
+      <div class="flex justify-between gap-4 mb-10">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+          Meus Documentos
+        </h3>
         <button
-          class="btn btn-success"
+          class="rounded-md bg-secondary h-8 w-[85px] flex items-center p-3 justify-between text-white"
           onClick={() => {
             displayNewDocModal.value = true;
           }}
         >
-          Subir novo Documento
+          <span class="text-sm font-medium">Subir</span>
+          <Icon id="Upload" size={18} />
         </button>
         <NewDocModal onFinishCreate={getDocuments} />
         <PlanLimitAlert
@@ -242,32 +260,32 @@ function MyDocs() {
         />
       </div>
       <div class="flex flex-col gap-3">
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos de Anvisa</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={anvisaDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos Médicos</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={medicalDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos Judiciais</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={habeasDocs} />}
-        </div>
-        <div class="p-9 bg-slate-100">
-          <h2>Documentos de Identificação</h2>
-          {isLoading
-            ? <span class="loading loading-spinner text-black"></span>
-            : <DocList docs={idDocs} />}
-        </div>
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Dados Pessoais
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={anvisaDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos Médicos
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={medicalDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos Judiciais
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={habeasDocs} />}
+        <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+          Documentos de Identificação
+        </h2>
+        {isLoading
+          ? <span class="loading loading-spinner text-black"></span>
+          : <DocList docs={idDocs} />}
       </div>
-    </div>
+    </PageWrap>
   );
 }
 

diff --git a/static/sprites.svg b/static/sprites.svg