From ce0e794b90cf3fc2e59e52a623cac88c4405279d Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Fri, 29 Mar 2024 01:02:26 -0300
Subject: [PATCH] styled myinfo

---
 components/footer/Footer.tsx |   2 +-
 components/ui/Icon.tsx       |   1 +
 components/ui/MyInfo.tsx     | 285 ++++++++++++++++++++---------------
 components/ui/PageWrap.tsx   |  23 +++
 components/ui/SignIn.tsx     |  18 ---
 static/sprites.svg           |   3 +
 6 files changed, 194 insertions(+), 138 deletions(-)
 create mode 100644 components/ui/PageWrap.tsx

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
index 6fdbd48..ceb0798 100644
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -17,7 +17,7 @@ function Footer({
 }: Props) {
   return (
     <footer>
-      <div class="bg-[#eeeeee] flex justify-center items-center fixed bottom-0 w-full p-4 gap-5">
+      <div class="bg-[#eeeeee] flex justify-center items-center bottom-0 w-full p-4 gap-5 mt-20">
         <Image
           loading="lazy"
           src={logo?.image || ""}
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
index ed909cb..b344334 100644
--- a/components/ui/Icon.tsx
+++ b/components/ui/Icon.tsx
@@ -16,6 +16,7 @@ export type AvailableIcons =
   | "Discount"
   | "Elo"
   | "Ecanna"
+  | "Edit"
   | "Facebook"
   | "FilterList"
   | "Heart"
diff --git a/components/ui/MyInfo.tsx b/components/ui/MyInfo.tsx
index 887ff98..076f6a0 100644
--- a/components/ui/MyInfo.tsx
+++ b/components/ui/MyInfo.tsx
@@ -8,6 +8,8 @@ import { invoke } from "../../runtime.ts";
 import Image from "apps/website/components/Image.tsx";
 import { h } from "preact";
 import { Props as UpdateDataProps } from "../../actions/updateUserData.ts";
+import Icon from "../../components/ui/Icon.tsx";
+import PageWrap from "../../components/ui/PageWrap.tsx";
 
 function MyInfo() {
   const [isLoading, setIsLoading] = useState(false);
@@ -210,152 +212,186 @@ function MyInfo() {
     isLoading
       ? <span class="loading loading-spinner text-green-600"></span>
       : (
-        <div>
-          <h3>Meus Dados</h3>
-          <div>
-            {/* Perosnal Info */}
-            <h2>Dados Pessoais</h2>
+        <PageWrap>
+          <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center mb-10">
+            Meus Dados
+          </h3>
+          <div class="flex flex-col items-center">
             {/* Selfie */}
             <div>
-              {!userImg
-                ? (
-                  <div class="h-[144px] w-[108px] bg-slate-500 flex justify-center items-center">
-                    <span class="text-white font-medium">
-                      Faça o upload da sua foto
-                    </span>
+              <label for="selfieInput">
+                <div class="relative h-[144px] w-[108px] shadow-md cursor-pointer">
+                  <div class="absolute h-7 w-7 flex justify-center items-center rounded-full bg-black bg-opacity-40 top-[10px] left-[71px]">
+                    <div class="text-white">
+                      <Icon id="Edit" size={12} />
+                    </div>
                   </div>
-                )
-                : (
                   <div class="h-[144px] w-[108px]flex justify-center items-center">
                     <Image
-                      src={userImg}
+                      class="rounded-md"
+                      src={userImg
+                        ? userImg
+                        : "http://drive.google.com/uc?export=view&id=1hLMYkRlOko2T-VSRO8AOUIH7ytvHDKeD"}
                       alt={"user selfie"}
                       width={108}
                       height={144}
                     />
                   </div>
-                )}
+                </div>
+              </label>
               <input
+                id="selfieInput"
                 type="file"
-                class="file-input file-input-bordered file-input-xs w-full max-w-xs"
+                class="hidden"
                 onChange={(e) => handleUploadSelfie(e)}
               />
             </div>
 
-            <div class="flex gap-5">
-              <label class="input input-bordered flex items-center gap-2">
-                Nome
+            {/* Personal info */}
+            <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
+              Dados Pessoais
+            </h2>
+            <div class="flex flex-wrap gap-[4%] w-full">
+              <label class="form-control w-[48%]">
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">
+                    Nome
+                  </span>
+                </div>
                 <input
                   placeholder="Nome"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
                   name="name"
                   disabled={name ? true : false}
                   value={name}
-                  // onFocus={() => setDisplayCidResults(true)}
-                  // onBlur={() => setDisplayCidResults(false)}
                 />
               </label>
-              <label class="input input-bordered flex items-center gap-2">
-                CPF
+              <label class="w-[48%]">
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">CPF</span>
+                </div>
                 <input
                   placeholder="CPF"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
                   name="cpf"
                   disabled={cpf ? true : false}
                   value={cpf}
-                  // onFocus={() => setDisplayCidResults(true)}
-                  // onBlur={() => setDisplayCidResults(false)}
                 />
               </label>
             </div>
 
             {/* Adrress */}
-            <h2>Endereço Residencial - Também usado para entregas</h2>
-            <div class="join">
-              <label class="input input-bordered flex items-center gap-2 join-item">
-                CEP
-                <input
-                  placeholder="CEP"
-                  name="cep"
-                  disabled={addressStreet != "" ? true : false}
-                  value={postalCode}
-                  onChange={(e) => {
-                    setPostalCode(e.currentTarget.value);
-                  }}
-                  // onFocus={() => setDisplayCidResults(true)}
-                  // onBlur={() => setDisplayCidResults(false)}
-                />
-              </label>
-              <button
-                class="btn btn-secondary join-item"
-                onClick={() => handleValidatePostalCode(postalCode)}
+            <h2 class="text-[#8b8b8b] font-semibold mb-4 mt-10 w-full">
+              Endereço e Contato
+            </h2>
+            <div class="flex flex-wrap gap-5 justify-left">
+              <div class="join">
+                <label class="join-item">
+                  <div class="label pb-1">
+                    <span class="label-text text-xs text-[#585858]">
+                      CEP
+                    </span>
+                  </div>
+                  <input
+                    placeholder="CEP"
+                    name="cep"
+                    class="input rounded-md text-[#8b8b8b] border-none"
+                    // disabled={addressStreet != "" ? true : false}
+                    value={postalCode}
+                    onChange={(e) => {
+                      setPostalCode(e.currentTarget.value);
+                    }}
+                    // onFocus={() => setDisplayCidResults(true)}
+                    // onBlur={() => setDisplayCidResults(false)}
+                  />
+                  <button
+                    class="btn btn-ghost bg-[#dedede] text-[#5d5d5d] join-item"
+                    onClick={() => handleValidatePostalCode(postalCode)}
+                  >
+                    Validar CEP{" "}
+                    {isLoadingPostalCode && (
+                      <span class="loading loading-spinner text-green-600">
+                      </span>
+                    )}
+                  </button>
+                </label>
+              </div>
+              <div
+                class={`flex flex-wrap gap-[2%] justify-left ${
+                  addressStreet !== "" ? "" : "hidden"
+                }`}
               >
-                Validar CEP{" "}
-                {isLoadingPostalCode && (
-                  <span class="loading loading-spinner text-green-600"></span>
-                )}
-              </button>
-            </div>
-
-            <div class={addressStreet !== "" ? "" : "hidden"}>
-              <label>
-                <div class="label">
-                  <span class="label-text">Logradouro</span>
-                </div>
-                <input
-                  class="input input-ghost"
-                  placeholder="logradouro"
-                  name="cep"
-                  disabled
-                  value={addressStreet}
-                />
-              </label>
-              <label>
-                <div class="label">
-                  <span class="label-text">Número*</span>
-                </div>
-                <input
-                  class="input input-bordered"
-                  placeholder="número"
-                  name="cep"
-                  value={addressNumber}
-                  onChange={(e) => {
-                    setAddressNumber(e.currentTarget.value);
-                  }}
-                />
-              </label>
-              <label>
-                <div class="label">
-                  <span class="label-text">Complemento (casa, ap, etc)</span>
-                </div>
-                <input
-                  class="input input-bordered"
-                  placeholder="complemento"
-                  name="cep"
-                  value={addressComplement}
-                  onChange={(e) => {
-                    setAddressComplement(e.currentTarget.value);
-                  }}
-                />
-              </label>
-              <label>
-                <div class="label">
-                  <span class="label-text">Bairro - cidade/uf</span>
-                </div>
-                <input
-                  class="input input-ghost w-full"
-                  placeholder="Bairro - cidade/uf"
-                  name="localidade"
-                  disabled
-                  value={`${addressNeighborhood} - ${addressCity}`}
-                />
-              </label>
+                <label class="w-[32%]">
+                  <div class="label pb-1">
+                    <span class="label-text text-xs text-[#585858]">
+                      Logradouro
+                    </span>
+                  </div>
+                  <input
+                    class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                    placeholder="logradouro"
+                    name="cep"
+                    disabled
+                    value={addressStreet}
+                  />
+                </label>
+                <label class="w-[32%]">
+                  <div class="label pb-1">
+                    <span class="label-text text-xs text-[#585858]">
+                      Número*
+                    </span>
+                  </div>
+                  <input
+                    class="input rounded-md text-[#8b8b8b] border-none w-full"
+                    placeholder="número"
+                    name="cep"
+                    value={addressNumber}
+                    onChange={(e) => {
+                      setAddressNumber(e.currentTarget.value);
+                    }}
+                  />
+                </label>
+                <label class="w-[32%]">
+                  <div class="label pb-1">
+                    <span class="label-text text-xs text-[#585858]">
+                      Complemento (casa, ap, etc)
+                    </span>
+                  </div>
+                  <input
+                    class="input rounded-md text-[#8b8b8b] border-none w-full"
+                    placeholder="complemento"
+                    name="cep"
+                    value={addressComplement}
+                    onChange={(e) => {
+                      setAddressComplement(e.currentTarget.value);
+                    }}
+                  />
+                </label>
+                <label class="w-[32%]">
+                  <div class="label pb-1">
+                    <span class="label-text text-xs text-[#585858]">
+                      Bairro - cidade/uf
+                    </span>
+                  </div>
+                  <input
+                    class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                    placeholder="Bairro - cidade/uf"
+                    name="localidade"
+                    disabled
+                    value={`${addressNeighborhood} - ${addressCity}`}
+                  />
+                </label>
+              </div>
             </div>
 
             {/* CIDs */}
-            <h2>Selecione seus CIDs</h2>
-            <div class="join flex flex-col">
+            <h2 class="text-[#8b8b8b] font-semibold mb-4 mt-10 w-full">
+              CIDs (Diagnósticos)
+            </h2>
+            <div class="join flex flex-col w-full">
               <input
-                placeholder="Pesquise seus CIDs"
-                class="input input-bordered join-item"
+                placeholder="Pesquise e selecione seus CIDs"
+                class="input rounded-md text-[#8b8b8b] border-none join-item mb-2"
                 name="cids"
                 value={cidSearchTerm}
                 onChange={(e) => {
@@ -365,8 +401,12 @@ function MyInfo() {
                 // onFocus={() => setDisplayCidResults(true)}
                 // onBlur={() => setDisplayCidResults(false)}
               />
-              <div class={`join-item`}>
-                <ul>
+              <div
+                class={`join-item ${
+                  cidSearchResponse.length > 0 ? "" : "hidden"
+                } `}
+              >
+                <ul class="flex flex-col gap-4 bg-white px-4 pb-4 pt-0 text-sm">
                   {cidSearchResponse.slice(0, 5).map((c) => {
                     const cid = c as {
                       full_code: string;
@@ -387,15 +427,20 @@ function MyInfo() {
                 </ul>
               </div>
               <div>
-                {cids.map((c) => {
+                {cids.map((c, index) => {
                   const cid = c as { full_code: string; name: string };
                   return (
-                    <div class="badge badge-success gap-2">
+                    <div class="badge badge-secondary text-white gap-2 p-3 my-2">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24"
-                        class="inline-block w-4 h-4 stroke-current"
+                        class="inline-block w-4 h-4 stroke-current cursor-pointer"
+                        onClick={() => {
+                          const newCids = [...cids];
+                          newCids.splice(index, 1);
+                          setCids(newCids);
+                        }}
                       >
                         <path
                           stroke-linecap="round"
@@ -417,21 +462,23 @@ function MyInfo() {
               <input
                 type="checkbox"
                 checked={termsAgree}
-                class="checkbox checkbox-xs border-white"
+                class="checkbox checkbox-xs border-[#8b8b8b] bg-white"
                 onChange={(e) => {
                   setTermsAgree(e.currentTarget.checked);
                 }}
               />
-              <span class="label-text text-xs text-black">
+              <span class="label-text text-xs text-[#8b8b8b]">
                 Declaro, sob minha responsabilidade, que todas as informações
                 inseridas neste formulário são verdadeiras
               </span>
             </label>
           </div>
-          <button class="btn btn-primary" onClick={handleSubmit}>
-            Salvar Dados
-          </button>
-        </div>
+          <div class="flex justify-end mt-4 w-full">
+            <button class="btn btn-primary" onClick={handleSubmit}>
+              Salvar Dados
+            </button>
+          </div>
+        </PageWrap>
       )
   );
 }
diff --git a/components/ui/PageWrap.tsx b/components/ui/PageWrap.tsx
new file mode 100644
index 0000000..05df70c
--- /dev/null
+++ b/components/ui/PageWrap.tsx
@@ -0,0 +1,23 @@
+import { ComponentChildren } from "preact";
+
+interface Props {
+  children?: ComponentChildren;
+}
+
+function PageWrap(props: Props) {
+  const {
+    children,
+  } = props;
+
+  return (
+    <div class="flex justify-center">
+      <div class="rounded-xl bg-[#ededed] shadow-md p-14 max-w-[800px]">
+        <div class="flex flex-col items-center">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PageWrap;
diff --git a/components/ui/SignIn.tsx b/components/ui/SignIn.tsx
index 55554fa..54d24ac 100644
--- a/components/ui/SignIn.tsx
+++ b/components/ui/SignIn.tsx
@@ -1,5 +1,4 @@
 import SignInForm from "deco-sites/ecannadeco/islands/SignInForm.tsx";
-import Icon from "../../components/ui/Icon.tsx";
 import FormWrap from "../../components/ui/FormWrap.tsx";
 
 export interface Props {
@@ -13,23 +12,6 @@ function SignIn(
     <FormWrap>
       <SignInForm formTitle={formTitle} />
     </FormWrap>
-    // <div
-    //   id="SignIn"
-    //   class="container grid-cols-1 md:grid-cols-2 flex flex-col a md:flex-row my-24"
-    // >
-    //   <div class="flex w-full justify-center md:flex md:px-24 mt-8 md:mt-0">
-    //     <div class="py-10 px-14 bg-[#ededed] rounded-xl relative">
-    //       <div class="absolute top-[-43px] left-1/2 transform -translate-x-1/2">
-    //         <div class="relative bg-white rounded-full h-[73px] w-[73px] shadow-md">
-    //           <div class="absolute text-secondary left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
-    //             <Icon id="Ecanna" width={49} height={35} />
-    //           </div>
-    //         </div>
-    //       </div>
-    //       <SignInForm formTitle={formTitle} />
-    //     </div>
-    //   </div>
-    // </div>
   );
 }
 
diff --git a/static/sprites.svg b/static/sprites.svg
index 0857856..16124a6 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -1,4 +1,7 @@
 <svg style="display:none">
+	<symbol fill="none" viewBox="0 0 12 12" id="Edit" xmlns="http://www.w3.org/2000/svg">
+	<path d="M0 12h2.5l7.374-7.374-2.5-2.5L0 9.5V12Zm1.333-1.947 6.041-6.04.614.613-6.041 6.04h-.614v-.613ZM10.248.192a.664.664 0 0 0-.94 0l-1.22 1.22 2.5 2.5 1.22-1.22c.26-.26.26-.68 0-.94l-1.56-1.56Z" fill="currentColor"/>
+	</symbol>
 	<symbol fill="none" viewBox="0 0 185 131" id="Ecanna" xmlns="http://www.w3.org/2000/svg">
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M91.874.02c39.8.2 46.3.5 51.5 2 3.3 1 7.8 2.8 10 4.1 2.2 1.3 5.4 3.8 7.2 5.7 1.8 1.8 4.2 5.5 5.5 8.3 2.1 4.7 2.3 6.5 2.5 27.3.2 17.3 0 22.2-1 22.1-.6 0-3.5-.4-6.2-.9-3-.5-7.2-.4-10.5.2-3 .6-7.3 1.9-9.5 3-2.2 1.2-5.2 3.1-9.5 6.8h-96.5l.8 7.2c.4 4 1.5 8.6 2.5 10.3 1 1.7 3.3 3.5 5.2 4.199 2.4.8 12.4 1.2 31 1.2 21 .1 28.7.4 32.5 1.5 2.8.9 6.9 3.2 9.5 5.4 2.7 2.3 5.4 5.9 6.6 8.8 1.2 2.7 2.4 6.6 3.4 12.4h-40.3c-22.1 0-43.1-.5-46.7-1-3.6-.5-8.8-1.6-11.5-2.4-2.8-.9-7.5-3-10.5-4.8-3-1.8-7.1-5.5-9.2-8.3-2.1-2.8-4.8-7.7-6-11-2-5.5-2.2-8.3-2.6-33-.2-17.4 0-29.7.7-34.5.7-4.1 2.2-9.8 3.5-12.5 1.2-2.8 3.8-6.8 5.8-9 1.9-2.2 6-5.2 8.9-6.7 3-1.4 7.4-3.1 9.9-3.8 2.5-.6 7.4-1.5 11-2 3.6-.4 27-.7 52-.6Zm-53.7 35.3c-.7 1.8-1.6 6.9-2 11.3l-.8 8.1c85.2-.6 86.4-.7 89.2-2.7 1.5-1.1 3.8-3.6 5.1-5.5 1.6-2.5 2.2-4.8 2.2-8.7 0-4.5-.4-5.5-2.8-7.2-2.6-2-4-2.1-42.7-2-35.8 0-40.4.2-43.4 1.8-2.1 1-4 3-4.8 4.9Zm120.2 39.7c3.4.2 7.7 1.2 10 2.3 2.2 1.1 5.3 3.2 7 4.5 1.7 1.4 4.299 5 5.899 7.9 1.6 3 3.101 7.6 3.401 10.399.3 3-.2 7.2-1.1 10.5-1 3.667-3 7.167-6 10.5-2.8 3.2-6.301 5.8-9.801 7.4-4.4 1.9-6.599 2.3-12.399 1.9-4.1-.2-8.6-1.2-11-2.3-2.2-1.1-5.6-3.6-7.5-5.5-1.9-1.9-4.4-5.3-5.5-7.5-1.5-3-2-6-2-12.5 0-7.3.4-9.1 2.6-13 1.4-2.5 4.6-6.2 7-8.3 2.4-2.1 6.4-4.4 8.9-5.2 2.6-.9 7-1.3 10.5-1.1Z" fill="currentColor"/>
 	</symbol>