CSSTransition added

moiskillnadne · Nov 3, 2024 · 222b98f · 222b98f
1 parent eebffc6
commit 222b98f
Show file tree

Hide file tree

Showing 15 changed files with 226 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -17,8 +17,7 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:[email protected]&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-i18next": "^15.1.0",
     "react-router-dom": "^6.27.0",
     "react-toastify": "^10.0.6",
+    "react-transition-group": "^4.4.5",
     "tailwindcss": "^3.4.14",
     "zod": "^3.23.8"
   },
@@ -33,6 +34,7 @@
     "@types/node": "^22.8.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-transition-group": "^4",
     "@typescript-eslint/eslint-plugin": "^8.11.0",
     "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-react": "^4.3.3",

diff --git a/src/app/index.css b/src/app/index.css
@@ -20,14 +20,82 @@ span {
   cursor: default;
 }
 
+.text-ru {
+  font-family: sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+.text-en {
+  font-family: "Urbanist", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px white inset; 
-  box-shadow: 0 0 0px 1000px white inset;
-  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0px 1000px #F1EBF5 inset; 
+  box-shadow: 0 0 0px 1000px #F1EBF5 inset;
+  -webkit-text-fill-color: #3A3341;
 }
 
 input:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px white inset; 
-  box-shadow: 0 0 0px 1000px white inset;
-  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0px 1000px #F1EBF5 inset; 
+  box-shadow: 0 0 0px 1000px #F1EBF5 inset;
+  -webkit-text-fill-color: #3A3341;
+}
+
+.node-opacity-enter {
+  opacity: 0;
+}
+.node-opacity-enter-active {
+  opacity: 1;
+  transition: opacity 500ms;
+}
+.node-opacity-exit {
+  opacity: 1;
+}
+.node-opacity-exit-active {
+  opacity: 0;
+  transition: opacity 500ms;
+}
+
+.node-height-and-opacity-enter {
+  opacity: 0;
+  height: 0%;
+}
+
+.node-height-and-opacity-enter-active {
+  opacity: 1;
+  height: 100%;
+  transition-property: opacity, height;
+  transition-duration: 300ms, 600ms;
+  transition-delay: 0ms, 400ms;
+}
+
+.node-height-and-opacity-exit {
+  opacity: 1;
+  height: 100%;
+}
+
+.node-height-and-opacity-exit-active {
+  opacity: 0;
+  height: 0%;
+  transition-property: opacity, height;
+  transition-duration: 300ms, 600ms;
+  transition-delay: 0ms, 400ms;
+}
+
+.node-height-enter {
+  height: 0%;
+}
+.node-height-enter-active {
+  height: 100%;
+  transition: height 750ms;
+}
+.node-height-exit {
+  height: 100%;
+}
+.node-height-exit-active {
+  height: 0%;
+  transition: height 750ms;
 }
diff --git a/src/feature/translation/ui/LanguageSwitcher.tsx b/src/feature/translation/ui/LanguageSwitcher.tsx
@@ -4,7 +4,7 @@ export const LanguageSwitcher = () => {
   const { switchLanguage, language } = useCustomTranslation()
 
   return (
-    <button className="font-bold text-[26px] cursor-pointer" onClick={switchLanguage}>
+    <button className="font-bold text-[26px] cursor-pointer text-black" onClick={switchLanguage}>
       {language.toUpperCase()}
     </button>
   )

diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
@@ -16,6 +16,7 @@
     "toCompleteChallenge": "to complete your daily challenge!",
     "youCanRestFor": "you can rest for",
     "login": "Login",
+    "loginWithCode": "Login with code",
     "fastLogin": "Fast login",
     "logout": "Logout",
     "enterEmailForCode": "Enter your email. You will receive an email with an authorization code.",
@@ -29,6 +30,7 @@
     "yes": "Yes",
     "no": "No",
     "welcomeToChallengeLogger": ["Welcome to", "Challenge Logger"],
+    "loginViaCodeHint": ["The email with the code has been sent.","If the email does not arrive, then try again."],
     "yourAccount": "Your account",
     "sendingEmail": "Sending email",
     "sendingCode": "Sending code",

diff --git a/src/i18n/ru/translation.json b/src/i18n/ru/translation.json
@@ -16,6 +16,7 @@
     "toCompleteChallenge": "для выполнения вашего ежедневного вызова!",
     "youCanRestFor": "вы можете отдыхать еще",
     "login": "Логин",
+    "loginWithCode": "Войти с кодом",
     "fastLogin": "Быстрый вход",
     "logout": "Выйти",
     "enterEmailForCode": "Введите ваш емайл. Вам придет письмо с кодом для авторизации.",
@@ -29,6 +30,7 @@
     "yes": "Да",
     "no": "Нет",
     "welcomeToChallengeLogger": ["Добро пожаловать в", "Challenge Logger"],
+    "loginViaCodeHint": ["Письмо с кодом было отправлено.","Если письмо не приходит, то попробуйте еще раз."],
     "yourAccount": "Ваш аккаунт",
     "sendingEmail": "Отправка письма",
     "sendingCode": "Отправка кода",

diff --git a/src/shared/ui/Button/index.tsx b/src/shared/ui/Button/index.tsx
@@ -0,0 +1,25 @@
+import { Typography } from '../Typography'
+
+type Props = {
+  label: string
+  onClick: () => void
+  isLoading?: boolean
+  isDisabled?: boolean
+  classNames?: string
+}
+
+export const Button = ({ label, onClick, isDisabled, isLoading, classNames }: Props) => {
+  return (
+    <button
+      onClick={onClick}
+      disabled={isDisabled || isLoading}
+      className={`border-[1px] rounded-full h-full w-full flex justify-center items-center ${classNames}`}
+    >
+      {isLoading ? (
+        <div className="animate-spin h-[25px] w-[25px] border-[2px] rounded-full border-black/50 border-t-black"></div>
+      ) : (
+        <Typography text={label} />
+      )}
+    </button>
+  )
+}
diff --git a/src/shared/ui/Page/Page.tsx b/src/shared/ui/Page/Page.tsx
@@ -4,7 +4,7 @@ type Props = PropsWithChildren<unknown>
 
 export const Page = ({ children }: Props) => {
   return (
-    <div id="page-component" className="w-screen h-dvh bg-white">
+    <div id="page-component" className="w-screen h-dvh bg-background">
       <div className="h-full w-full flex flex-col overflow-hidden">{children}</div>
     </div>
   )

diff --git a/src/shared/ui/Typography/index.tsx b/src/shared/ui/Typography/index.tsx
@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react'
+
+import { useTranslation } from 'react-i18next'
+
+type Props = PropsWithChildren<{
+  text?: string
+  classNames?: string
+}>
+
+export const Typography = (props: Props) => {
+  const { i18n } = useTranslation()
+
+  const language = i18n.language as 'en' | 'ru'
+
+  const fontFamilyMap = {
+    en: 'text-en',
+    ru: 'text-ru',
+  }
+
+  return (
+    <div className={`${fontFamilyMap[language]} ${props.classNames}`}>
+      {props.text ?? props.children}
+    </div>
+  )
+}
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
@@ -2,3 +2,5 @@ export * from './Page'
 export * from './RightArrow'
 export * from './PlusIcon'
 export * from './Modal'
+export * from './Typography'
+export * from './Button'
diff --git a/src/widget/Login/ui/LoginButton.tsx b/src/widget/Login/ui/LoginButton.tsx
@@ -1,28 +1,35 @@
+import { ForwardedRef, forwardRef } from 'react'
+
 import { useCustomTranslation } from '~/feature/translation'
+import { Button } from '~/shared/ui'
 
 type Props = {
   labelKey: string
   onClick: () => void
   isLoading?: boolean
   isDisabled?: boolean
+  classNames?: string
 }
 
-export const LoginButton = ({ onClick, isLoading, labelKey, isDisabled }: Props) => {
-  const { t } = useCustomTranslation()
+export const LoginButton = forwardRef(
+  (
+    { onClick, isLoading, labelKey, isDisabled, classNames }: Props,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const { t } = useCustomTranslation()
 
-  return (
-    <div className="w-[300px] h-[45px]">
-      <button
-        onClick={onClick}
-        disabled={isDisabled || isLoading}
-        className="border-[1px] rounded-full bg-green border-black h-full w-full flex justify-center items-center"
-      >
-        {isLoading ? (
-          <div className="animate-spin h-[25px] w-[25px] border-[2px] rounded-full border-black/50 border-t-black"></div>
-        ) : (
-          t(labelKey)
-        )}
-      </button>
-    </div>
-  )
-}
+    return (
+      <div ref={ref} className="w-[300px] h-[45px]">
+        <Button
+          label={t(labelKey)}
+          onClick={onClick}
+          isLoading={isLoading}
+          isDisabled={isDisabled}
+          classNames={classNames}
+        />
+      </div>
+    )
+  },
+)
+
+LoginButton.displayName = 'LoginButton'
diff --git a/src/widget/Login/ui/LoginHeader.tsx b/src/widget/Login/ui/LoginHeader.tsx
@@ -1,4 +1,5 @@
 import { useCustomTranslation } from '~/feature/translation'
+import { Typography } from '~/shared/ui'
 
 export const LoginHeader = () => {
   const { t } = useCustomTranslation()
@@ -9,9 +10,9 @@ export const LoginHeader = () => {
         <div className="w-[250px] py-[18px] px-[24px]">
           <img className="w-[250px]" src="/web-app-manifest-512x512.png" alt="" />
         </div>
-        <h2 className="font-bold text-[32px] whitespace-pre-wrap text-center">
+        <Typography classNames="font-bold text-[32px] whitespace-pre-wrap text-center text-black">
           {t('welcomeToChallengeLogger')}
-        </h2>
+        </Typography>
       </div>
     </div>
   )

diff --git a/src/widget/Login/ui/index.tsx b/src/widget/Login/ui/index.tsx
@@ -1,19 +1,21 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser'
 import { useMutation } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
+import { CSSTransition } from 'react-transition-group'
 import z from 'zod'
 
 import { LoginButton } from './LoginButton'
 import { LoginHeader } from './LoginHeader'
-import { useToast } from '../../../shared/hooks'
 
 import { useAuthenticateViaPasskeys } from '~/feature/AuthorizePasskeys/'
 import { useOTPLogin } from '~/feature/LoginOTP'
 import { useCustomTranslation } from '~/feature/translation'
 import { authService } from '~/shared/api/auth.service'
 import { Routes } from '~/shared/constants'
+import { useToast } from '~/shared/hooks'
+import { Typography } from '~/shared/ui'
 
 const emailSchema = z.string().email()
 
@@ -24,6 +26,8 @@ export const LoginWidget = () => {
 
   const navigate = useNavigate()
 
+  const hintRef = useRef(null)
+
   const { showPromiseToast, dismissAllToasts, showErrorToast } = useToast()
 
   const codeInputVisibility = new Map([
@@ -163,27 +167,35 @@ export const LoginWidget = () => {
           />
         </div>
         <LoginButton
-          labelKey={'login'}
+          labelKey={'loginWithCode'}
           onClick={isEmailSent ? confirmLoginOTP : loginOTP}
           isDisabled={passkeysMutation.isPending || verifyLoginChallenge.isPending}
           isLoading={loadingState.isTryLoginLoading || loadingState.isConfirmLoginLoading}
+          classNames="bg-violet20 border-violet"
         />
 
-        {browserSupportsWebAuthn() && (
+        {!isEmailSent && browserSupportsWebAuthn() && (
           <LoginButton
             labelKey={'fastLogin'}
             onClick={loginPasskeys}
             isDisabled={loadingState.isTryLoginLoading || loadingState.isConfirmLoginLoading}
             isLoading={passkeysMutation.isPending || verifyLoginChallenge.isPending}
+            classNames="border-violet"
           />
         )}
       </div>
 
-      <div className="w-[350px] px-[12px]">
-        <p className="text-black/75 text-center">
-          {isEmailSent ? t('enterCodeFromEmail') : t('enterEmailForCode')}
-        </p>
-      </div>
+      <CSSTransition
+        in={isEmailSent}
+        nodeRef={hintRef}
+        timeout={1000}
+        classNames="node-opacity"
+        unmountOnExit
+      >
+        <div ref={hintRef} className="w-[350px] px-[12px]">
+          <Typography classNames="text-black/75 text-center">{t('loginViaCodeHint')}</Typography>
+        </div>
+      </CSSTransition>
     </div>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,6 +8,10 @@ export default {
         red: '#FF2B6B',
         green: '#C1FF72',
         blue: '#37F0F7',
+        background: '#F1EBF5',
+        black: '#3A3341',
+        violet: '#B29BC7',
+        violet20: 'rgba(178, 155, 199, 0.2)',
       },
       fontFamily: {
         monospace: ['Source Code Pro', 'monospace'],