change login buttons and general styles

sytabaresa · Dec 18, 2023 · 10a877c · 10a877c
1 parent 19800ac
commit 10a877c
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 95 deletions.
diff --git a/src/common/components/atoms/about.tsx b/src/common/components/atoms/about.tsx
@@ -35,7 +35,7 @@ export const About = () => {
                             className="link"
                             href="https://www.linkedin.com/in/sytabaresa"
                         >
-                            @sytabares
+                            @syta
                         </a>
                         <br />
                         A product of <a href="https://einv.tech" className="" ><EinvLogo className="ml-1 inline fill-current w-6 h-6" /></a>

diff --git a/src/common/components/atoms/icons/index.tsx b/src/common/components/atoms/icons/index.tsx
@@ -14,19 +14,23 @@ const IconGen = (meta: Record<string, any>) => (props: IconProps) => {
 export const TestIcon = IconGen({ alt: "arc-icon", src: "" })
 
 export function GoogleIcon(props) {
-    return <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 210 210" {...props}>
-        <path d="M0,105C0,47.103,47.103,0,105,0c23.383,0,45.515,7.523,64.004,21.756l-24.4,31.696C133.172,44.652,119.477,40,105,40
-c-35.841,0-65,29.159-65,65s29.159,65,65,65c28.867,0,53.398-18.913,61.852-45H105V85h105v20c0,57.897-47.103,105-105,105
-S0,162.897,0,105z"/>
+    return <svg viewBox="0 0 24 24"  {...props}>
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" className={cn("fill-[#4285F4]", props.className)} />
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" className={cn("fill-[#34A853]", props.className)} />
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" className={cn("fill-[#FBBC05]", props.className)} />
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" className={cn("fill-[#EA4335]", props.className)} />
+        <path d="M1 1h22v22H1z" fill="none" />
     </svg>
 }
 
+
+
 export function MicrosoftIcon(props) {
     return <svg viewBox="0 0 21 21"  {...props}>
-        <path d="M0 0h10v10H0z" />
-        <path d="M11 0h10v10H11z" />
-        <path d="M0 11h10v10H0z" />
-        <path d="M11 11h10v10H11z" />
+        <path d="M0 0h10v10H0z" className={cn("fill-[#f35325]", props.className)} />
+        <path d="M11 0h10v10H11z" className={cn("fill-[#81bc06]", props.className)} />
+        <path d="M0 11h10v10H0z" className={cn("fill-[#05a6f0]", props.className)} />
+        <path d="M11 11h10v10H11z" className={cn("fill-[#ffba08]", props.className)} />
     </svg>
 }
 

diff --git a/src/common/components/atoms/langMenu.tsx b/src/common/components/atoms/langMenu.tsx
@@ -11,9 +11,9 @@ export const LangMenu = (props: HTMLAttributes<HTMLDivElement>) => {
 
     // console.log("lang", locales, lang)
 
-    return <div className={cn('dropdown dropdown-end uppercase', className)} {...rest}>
+    return <div className={cn('dropdown dropdown-end uppercase text-sm', className)} {...rest}>
         {t.common.lang()}:
-        <label tabIndex={0} aria-label={t.common.lang()} className="btn btn-ghost btn-primary m-1" role="button">{lang || '--'}</label>
+        <label tabIndex={0} aria-label={t.common.lang()} className="btn btn-ghost btn-square mx-1" role="button">{lang || '--'}</label>
         <div className="dropdown-content text-base-content p-2 shadow bg-base-100 rounded-box">
             <ul tabIndex={0} className=" menu" role="menu">
                 {locales.map((item, i) =>

diff --git a/src/common/components/atoms/smithButton.tsx b/src/common/components/atoms/smithButton.tsx
@@ -8,7 +8,7 @@ const SmithButton = () => {
     const { t } = useTranslation();
 
     return <label className="label py-1 cursor-pointer">
-        <span className={cn('label-text uppercase text-right w-12 mr-2 font-bold',
+        <span className={cn('label-text uppercase text-right w-12 mr-2 font-bold leading-tight',
             current.context.smithMode ? '' : 'opacity-50')}>{t.canvas.smith_mode()}</span>
         <input
             type="checkbox"

diff --git a/src/common/components/atoms/themeSwitcher.tsx b/src/common/components/atoms/themeSwitcher.tsx
@@ -16,7 +16,7 @@ export function ThemeSwitcher(props: LabelHTMLAttributes<HTMLLabelElement>) {
         // console.log('set', e.target.checked)
         setTheme(e.target.checked ? "dark" : "light")
     }
-    return <label className='swap swap-rotate' {...rest}>
+    return <label className='btn btn-ghost btn-square swap swap-rotate' {...rest}>
         <input
             // aria-label={t.common.theme()}
             type="checkbox"

diff --git a/src/common/components/organisms/login/emailLogin.tsx b/src/common/components/organisms/login/emailLogin.tsx
@@ -0,0 +1,39 @@
+import SingUpForm from "@components/organisms/login/signupForm";
+import LoginForm from "@components/organisms/login/loginForm";
+import { cn } from "@utils/styles";
+import { useTranslation } from "@modules/i18n";
+import { HTMLAttributes, useState } from "react";
+
+export interface EmailLoginProps extends HTMLAttributes<HTMLDivElement> {
+
+}
+
+export function EmailLogin({ className }: EmailLoginProps) {
+    const [isLogin, setIsLogin] = useState(true);
+    const { t } = useTranslation();
+
+
+    return <div className={cn(className)}>
+        <div className="tabs flex justify-center">
+            <a
+                className={cn('tab tab-lg tab-bordered uppercase font-bold', isLogin ? "tab-active" : "")}
+                onClick={() => setIsLogin(true)}
+            >
+                {t.login.login()}
+            </a>
+            <a
+                className={cn('tab tab-lg tab-bordered uppercase font-bold', !isLogin ? "tab-active" : "")}
+                onClick={() => setIsLogin(false)}
+            >
+                {t.login.sign_up()}
+            </a>
+        </div>
+        <div className="w-full z-10 my-4">
+            {isLogin ? (
+                <LoginForm />
+            ) : (
+                <SingUpForm />
+            )}
+        </div>
+    </div>
+}
diff --git a/src/common/components/organisms/login/loginForm.tsx b/src/common/components/organisms/login/loginForm.tsx
@@ -20,7 +20,6 @@ const LoginForm = ({ }: LoginFormProps) => {
   const { login } = useAuthProvider()
 
   const onSubmitLogin = async (data) => {
-    const { email, password } = data;
 
     try {
       const user = await login(data)
@@ -31,29 +30,8 @@ const LoginForm = ({ }: LoginFormProps) => {
     }
   };
 
-  const onGoogleLogin = async (data) => {
-    try {
-      const user = await login({ provider: 'google' })
-    } catch (err) {
-      setError("root.login", { message: err })
-    }
-  }
-
-  const onMicrosoftLogin = async (data) => {
-    try {
-      const user = await login({ provider: 'microsoft' })
-    } catch (err) {
-      setError("root.login", { message: err })
-    }
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmitLogin)} className="form-control" method="post">
-      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
-        <span className="">
-          {errors?.root?.login?.message}
-        </span>
-      </div>
       <label htmlFor="user" className="label">
         <span className="label-text uppercase font-bold">
           {t.login.username()}
@@ -95,26 +73,17 @@ const LoginForm = ({ }: LoginFormProps) => {
         </label>
       )}
       <button
-        className="btn btn-primary mt-10 w-full lg:btn-wide self-center"
+        className="btn btn-primary mt-6 w-full lg:btn-wide self-center"
         type="submit"
       >
         {isSubmitting ? t.login.logging_in() + "..." : isSubmitSuccessful ? t.login.done() : t.login.login()}
       </button>
-      <button className="group btn btn-outline bg-base-100 text-secondary
-       hover:bg-secondary hover:border-secondary w-full lg:btn-wide mt-2 self-center" onClick={onGoogleLogin}>
-        <div className="w-6 h-6 fill-secondary group-hover:fill-base-100 mr-4">
-          <GoogleIcon />
-        </div>
-        {t.login.google_login()}
-      </button>
-      <button className="group btn btn-outline bg-base-100 text-warning
-       hover:bg-warning hover:border-warning w-full lg:btn-wide mt-2 self-center" onClick={onMicrosoftLogin}>
-        <div className="w-6 h-6 fill-warning group-hover:fill-base-100 mr-4">
-          <MicrosoftIcon />
-        </div>
-        {t.login.microsoft_login()}
-      </button>
-    </form >
+      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
+        <span className="">
+          {errors?.root?.login?.message}
+        </span>
+      </div>
+    </form>
   )
 }
 

diff --git a/src/common/components/organisms/login/signupForm.tsx b/src/common/components/organisms/login/signupForm.tsx
@@ -38,11 +38,6 @@ const SingUpForm = ({ }: SignUpFormProps) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmitSignUp)} className="form-control">
-      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
-        <span className="">
-          {errors?.root?.login?.message}
-        </span>
-      </div>
       <label htmlFor="user" className="label">
         <span className="label-text uppercase font-bold">{t.login.username()}</span>
       </label>
@@ -93,9 +88,14 @@ const SingUpForm = ({ }: SignUpFormProps) => {
           <span className="label-text-alt uppercase" role="alert">{t.login.password_match()}</span>
         </label>
       )}
-      <button className="btn btn-primary mt-10 w-full lg:btn-wide self-center" type="submit">
+      <button className="btn btn-primary mt-6 w-full lg:btn-wide self-center" type="submit">
         {t.login.sign_up()}
       </button>
+      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
+        <span className="">
+          {errors?.root?.login?.message}
+        </span>
+      </div>
     </form>
   );
 };

diff --git a/src/common/components/organisms/primitivesMenu.tsx b/src/common/components/organisms/primitivesMenu.tsx
@@ -91,7 +91,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
           <button
             aria-label={t.canvas.delete()}
             tabIndex={0}
-            className={cn('btn btn-outline btn-secondary btn-outline-accent bg-base-100 btn-square',
+            className={cn('btn btn-outline btn-secondary bg-base-100 btn-square',
               current.name == "delete" ? 'btn-active' : '')}
             onClick={_delete}>
             <TrashIcon className="w-6" />
@@ -112,7 +112,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
           <button
             aria-label={t.canvas.move()}
             tabIndex={0}
-            className={cn('btn btn-outline btn-primary btn-outline-accent btn-square',
+            className={cn('btn btn-outline btn-primary btn-square',
               current.name == "idle" ? ' btn-active' : '')}
             onClick={() => send('EXIT')}>
             <HandIcon className="w-6" />

diff --git a/src/modules/i18n/en/index.ts b/src/modules/i18n/en/index.ts
@@ -63,8 +63,10 @@ const en: Translation = {
 		password_required: "Password Required",
 		google_login: "with Google",
 		microsoft_login: "with Microsoft",
+		email_login: "with Email",
 		repeat_password: "Repeat Password",
-		login: "Login",
+		login: "Log in",
+		login_title: "Log in",
 		sign_up: "Sign Up",
 		logging_in: "Logging In",
 		done: "Done",

diff --git a/src/modules/i18n/es/index.ts b/src/modules/i18n/es/index.ts
@@ -62,10 +62,12 @@ const es: BaseTranslation = {
 		password_required: "Contraseña Requerida",
 		google_login: "con Google",
 		microsoft_login: "con Microsoft",
+		email_login: "con email",
 		repeat_password: "Repita Contraseña",
 		sign_up: "Registrarse",
-		login: "Login",
-		logging_in: "Loguéandose",
+		login: "Iniciar",
+		login_title: "Inicia sesión",
+		logging_in: "Iniciando",
 		done: "Hecho",
 		password_match: "Contraseñas no concuerdan"
 	},

diff --git a/src/modules/i18n/i18n-types.ts b/src/modules/i18n/i18n-types.ts
@@ -209,14 +209,22 @@ type RootTranslation = {
 		 * with Microsoft
 		 */
 		microsoft_login: string
+		/**
+		 * with Email
+		 */
+		email_login: string
 		/**
 		 * Repeat Password
 		 */
 		repeat_password: string
 		/**
-		 * Login
+		 * Log in
 		 */
 		login: string
+		/**
+		 * Log in
+		 */
+		login_title: string
 		/**
 		 * Sign Up
 		 */
@@ -770,14 +778,22 @@ export type TranslationFunctions = {
 		 * with Microsoft
 		 */
 		microsoft_login: () => LocalizedString
+		/**
+		 * with Email
+		 */
+		email_login: () => LocalizedString
 		/**
 		 * Repeat Password
 		 */
 		repeat_password: () => LocalizedString
 		/**
-		 * Login
+		 * Log in
 		 */
 		login: () => LocalizedString
+		/**
+		 * Log in
+		 */
+		login_title: () => LocalizedString
 		/**
 		 * Sign Up
 		 */