Merge pull request #4 from deco-sites/feature/login-style

adjusted login style

components/ui/FormWrap.tsx

@@ -0,0 +1,31 @@
+import { ComponentChildren } from "preact";
+import Icon from "../../components/ui/Icon.tsx";
+
+interface Props {
+  children?: ComponentChildren;
+}
+
+function FormWrap(props: Props) {
+  const {
+    children,
+  } = props;
+
+  return (
+    <div 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>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FormWrap;

components/ui/Icon.tsx

@@ -15,6 +15,7 @@ export type AvailableIcons =
   | "Discord"
   | "Discount"
   | "Elo"
+  | "Ecanna"
   | "Facebook"
   | "FilterList"
   | "Heart"

components/ui/SignIn.tsx

@@ -1,35 +1,35 @@
 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 {
-  textSection: {
-    title: string;
-    /** @format html */
-    text: string;
-  };
   formTitle: string;
 }
 
 function SignIn(
-  { textSection, formTitle }: Props,
+  { formTitle }: Props,
 ) {
   return (
-    <div
-      id="SignIn"
-      class="container grid-cols-1 md:grid-cols-2 flex flex-col a md:flex-row my-24"
-    >
-      <div class="justify-center col-span-1 w-full md:w-[50%] flex md:justify-end">
-        <div class="max-w-[480px] flex flex-col gap-4">
-          <span class="font-semibold">{textSection.title}</span>
-          <div
-            class="text-sm text-left"
-            dangerouslySetInnerHTML={{ __html: textSection.text || "" }}
-          />
-        </div>
-      </div>
-      <div class="flex w-full md:w-[50%] justify-center md:flex md:justify-start md:px-24 mt-8 md:mt-0">
-        <SignInForm />
-      </div>
-    </div>
+    <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>
   );
 }
 

components/ui/SignInForm.tsx

@@ -45,34 +45,36 @@ function SignInForm({ formTitle }: Props) {
   };
 
   return (
-    <div class="max-w-[480px]">
+    <div class="max-w-[480px] md:max-w-[600px]">
       <form
-        class="form-control justify-start gap-2 py-8 px-10 bg-[#931C31] rounded-xl"
+        class="form-control justify-start gap-2"
         onSubmit={(e) => handleSubmit(e)}
       >
-        <span class="text-sm text-white font-semibold w-[80%] mb-4">
+        <span class="text-2xl text-[#8b8b8b] font-semibold text-center my-4">
           {formTitle}
         </span>
-        <input
-          placeholder="Email"
-          class="input input-bordered"
-          name="email"
-          value={email}
-          onChange={(e) => e.target && setEmail(e.currentTarget.value)}
-        />
-        <input
-          type="password"
-          placeholder="Senha"
-          class="input input-bordered"
-          value={password}
-          onChange={(e) => e.target && setPassword(e.currentTarget.value)}
-          name="email"
-        />
+        <div class="flex flex-col gap-4">
+          <input
+            placeholder="Email"
+            class="input rounded-md text-[#8b8b8b] outline-none"
+            name="email"
+            value={email}
+            onChange={(e) => e.target && setEmail(e.currentTarget.value)}
+          />
+          <input
+            type="password"
+            placeholder="Senha"
+            class="input rounded-md text-[#8b8b8b] outline-none"
+            value={password}
+            onChange={(e) => e.target && setPassword(e.currentTarget.value)}
+            name="email"
+          />
+        </div>
         <button
           type={"submit"}
-          class="btn bg-[#2B2B30] text-white mt-5 disabled:loading border-none"
+          class="btn btn-primary text-white mt-5 disabled:loading border-none uppercase text-sm font-semibold"
         >
-          {loading ? "Enviando..." : "Enviar"}
+          {loading ? "Entrando..." : "ENTRAR"}
         </button>
       </form>
     </div>