fix: design issues

nmashchenko · Oct 19, 2023 · 6fcc6ec · 6fcc6ec · github-actions · Oct 19, 2023
1 parent 15578e2
commit 6fcc6ec
Show file tree

Hide file tree

Showing 17 changed files with 90 additions and 48 deletions.
diff --git a/client/src/app/(auth)/layout.tsx b/client/src/app/(auth)/layout.tsx
@@ -3,12 +3,16 @@
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { usePathname, useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
-import { LogoBig } from '@/shared/assets';
+import { LogoBig, LogoSmall } from '@/shared/assets';
 import { Flex, Tabs } from '@/shared/ui';
 import styles from './styles.module.scss';
+import { useGetScreenWidth } from '@/shared/lib';
+
+const baseLayouts = ['confirmation', 'expired', 'success'];
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   const router = useRouter();
+  const width = useGetScreenWidth();
   const pathname = usePathname();
   const options = ['Login', 'Sign Up'];
   const [tab, setTab] = useState(options[0]);
@@ -24,7 +28,7 @@ export default function AuthLayout({ children }: { children: ReactNode }) {
   const header = (
     <header className={styles.header}>
       <div className={styles.logo} onClick={handleBack}>
-        <LogoBig />
+        {width > 420 ? <LogoBig /> : <LogoSmall />}
       </div>
       <div className={styles.headerNormalizer}>
         <Tabs options={options} currentTab={tab} onTabChange={handleChange} />
@@ -61,7 +65,7 @@ export default function AuthLayout({ children }: { children: ReactNode }) {
 
   return (
     <GoogleOAuthProvider clientId={`${process.env.NEXT_PUBLIC_GOOGLE_API_OAUTH_TOKEN}`}>
-      {pathname === '/login' || pathname === '/signup' ? alternative : basic}
+      {baseLayouts.includes(pathname.split('/').at(-1) || '') ? basic : alternative}
     </GoogleOAuthProvider>
   );
 }
diff --git a/client/src/app/(auth)/login/page.tsx b/client/src/app/(auth)/login/page.tsx
@@ -8,7 +8,7 @@ import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 
 import { useState } from 'react';
 import styles from '../shared.module.scss';
-import { Github, Google, LogoBig } from '@/shared/assets';
+import { Github, Google } from '@/shared/assets';
 
 interface LoginProps {
   email: string;
@@ -35,10 +35,7 @@ export default function LoginPage() {
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-      <Flex gap={48} direction='column' maxWidth='370px' width='100%'>
-        <Flex className={styles.additional_logo} width='100%' justify='center' align='center'>
-          <LogoBig />
-        </Flex>
+      <Flex gap={48} direction='column' width='100%' className={styles.width_limiter}>
         <Flex direction='column' gap={36}>
           <Input
             placeholder='Email'

diff --git a/client/src/app/(auth)/password/confirmation/page.tsx b/client/src/app/(auth)/password/confirmation/page.tsx
@@ -11,7 +11,7 @@ export default function Confirmation() {
     <IllustrationStatus
       mainText='Check your email'
       subText='If your email is on file, we will send a reset link'
-      buttonText='Back to login'
+      buttonText='Back'
       buttonHandler={handleBack}
     />
   );

diff --git a/client/src/app/(auth)/password/expired/page.tsx b/client/src/app/(auth)/password/expired/page.tsx
@@ -11,7 +11,7 @@ export default function Expired() {
     <IllustrationStatus
       mainText='Sorry, the link has expired'
       subText='This link expires after 15 minutes and can be used once.'
-      buttonText='Back to login'
+      buttonText='Back'
       buttonHandler={handleBack}
     />
   );

diff --git a/client/src/app/(auth)/password/password.module.scss b/client/src/app/(auth)/password/password.module.scss
@@ -1,3 +1,11 @@
 .text_align {
     text-align: center;
 }
+
+.width_limiter {
+    max-width: 470px;
+
+    @media (width <= 768px) {
+        max-width: 370px;
+    }
+}
diff --git a/client/src/app/(auth)/password/recover/page.tsx b/client/src/app/(auth)/password/recover/page.tsx
@@ -4,8 +4,8 @@ import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ArrowLeft } from '@/shared/assets';
 import { Button, Flex, Input, Typography } from '@/shared/ui';
-import styles from '../password.module.scss';
 import { useRouter } from 'next/navigation';
+import styles from '../password.module.scss';
 
 interface RecoverProps {
   email: string;
@@ -28,7 +28,13 @@ export default function Recover() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Flex direction='column' justify='center' align='center' gap={48} maxWidth='370px'>
+      <Flex
+        direction='column'
+        justify='center'
+        align='center'
+        gap={48}
+        className={styles.width_limiter}
+      >
         <Flex
           direction='column'
           justify='center'

diff --git a/client/src/app/(auth)/password/update/[id]/[token]/page.tsx b/client/src/app/(auth)/password/update/[id]/[token]/page.tsx
@@ -28,7 +28,13 @@ export default function Update({ params }: { params: { id: string; token: string
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Flex direction='column' justify='center' align='center' gap={48} maxWidth='370px'>
+      <Flex
+        direction='column'
+        justify='center'
+        align='center'
+        gap={48}
+        className={styles.width_limiter}
+      >
         <Flex
           direction='column'
           justify='center'

diff --git a/client/src/app/(auth)/shared.module.scss b/client/src/app/(auth)/shared.module.scss
@@ -5,13 +5,6 @@
   align-items: center;
 }
 
-.additional_logo {
-  display: none;
-  @media (width <= 420px) {
-    display: flex;
-  }
-}
-
 .forgot_link {
   cursor: pointer;
 }
@@ -25,3 +18,11 @@
   height: 1px;
   background: var(--grey-normal-color);
 }
+
+.width_limiter {
+  max-width: 470px;
+
+  @media (width <= 768px) {
+    max-width: 370px;
+  }
+}
diff --git a/client/src/app/(auth)/signup/confirmation/page.tsx b/client/src/app/(auth)/signup/confirmation/page.tsx
@@ -11,7 +11,7 @@ export default function Confirmation() {
     <IllustrationStatus
       mainText='Check your email'
       subText='We sent you the registration link'
-      buttonText='Back to login'
+      buttonText='Back'
       buttonHandler={handleBack}
     />
   );

diff --git a/client/src/app/(auth)/signup/page.tsx b/client/src/app/(auth)/signup/page.tsx
@@ -2,7 +2,7 @@
 
 import { useGoogleLogin } from '@react-oauth/google';
 import { useState } from 'react';
-import { Github, Google, LogoBig } from '@/shared/assets';
+import { Github, Google } from '@/shared/assets';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 import styles from '../shared.module.scss';
@@ -33,10 +33,7 @@ export default function SignupPage() {
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-      <Flex gap={48} direction='column' maxWidth='370px' width='100%'>
-        <Flex className={styles.additional_logo} width='100%' justify='center' align='center'>
-          <LogoBig />
-        </Flex>
+      <Flex gap={48} direction='column' width='100%' className={styles.width_limiter}>
         <Flex direction='column' gap={36}>
           <Input
             placeholder='Email'

diff --git a/client/src/app/(auth)/styles.module.scss b/client/src/app/(auth)/styles.module.scss
@@ -1,18 +1,11 @@
 .logo {
   cursor: pointer;
-  @media (width <= 420px) {
-    display: none;
-  }
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-
-  @media (width <= 420px) {
-    justify-content: center;
-  }
 }
 
 .container {

diff --git a/client/src/app/(auth)/ui/illustration/illustration.module.scss b/client/src/app/(auth)/ui/illustration/illustration.module.scss
@@ -3,3 +3,7 @@
   max-width: 705px;
   margin-bottom: 56px;
 }
+
+.text_align {
+  text-align: center;
+}
diff --git a/client/src/app/(auth)/ui/illustration/illustration.tsx b/client/src/app/(auth)/ui/illustration/illustration.tsx
@@ -1,4 +1,4 @@
-import { Email } from '@/shared/assets';
+import { ArrowLeft, Email } from '@/shared/assets';
 import { Button, Flex, Typography } from '@/shared/ui';
 import styles from './illustration.module.scss';
 import { FC } from 'react';
@@ -15,19 +15,22 @@ export const IllustrationStatus: FC<ConfirmProps> = props => {
   return (
     <div className={styles.container}>
       <Email />
-      <Flex justify='center' align='center' direction='column' gap='8px'>
-        <Typography size='heading_m'>{mainText}</Typography>
-        <Typography size='body_m' color='greyNormal'>
-          {subText}
-        </Typography>
-      </Flex>
-      {buttonText && (
-        <Flex align='center' justify='center'>
-          <Button onClick={buttonHandler} width='136px' typeBtn='tertiary' color='greenBright'>
-            {buttonText}
-          </Button>
+      <Flex direction='column' gap={24} className={styles.text_align}>
+        <Flex justify='center' align='center' direction='column' gap={8}>
+          <Typography size='heading_m'>{mainText}</Typography>
+          <Typography size='body_m' color='greyNormal'>
+            {subText}
+          </Typography>
         </Flex>
-      )}
+        {buttonText && (
+          <Flex align='center' justify='center'>
+            <Button onClick={buttonHandler} width='136px' size='m' typeBtn='secondary'>
+              <ArrowLeft />
+              {buttonText}
+            </Button>
+          </Flex>
+        )}
+      </Flex>
     </div>
   );
 };
diff --git a/client/src/app/styles/reset.scss b/client/src/app/styles/reset.scss
@@ -27,7 +27,7 @@ a:active {
 
 html,
 body {
-  height: 100vh;
+  min-height: 100dvh;
 }
 
 body {

diff --git a/client/src/shared/assets/icons/index.ts b/client/src/shared/assets/icons/index.ts
@@ -12,7 +12,7 @@ export { Crown } from './crown';
 export { Search } from './search';
 export { ArrowLeft } from './arrows';
 export { CaretUp, CaretDown } from './caret';
-export { LogoBig } from './logo';
+export { LogoBig, LogoSmall } from './logo';
 export { Google, Github } from './socials';
 export {
   C,

diff --git a/client/src/shared/assets/icons/logo/index.ts b/client/src/shared/assets/icons/logo/index.ts
@@ -1 +1,2 @@
 export { LogoBig } from './logo-big';
+export { LogoSmall } from './logo-small';
diff --git a/client/src/shared/assets/icons/logo/logo-small.tsx b/client/src/shared/assets/icons/logo/logo-small.tsx
@@ -0,0 +1,22 @@
+import { FC, SVGProps } from 'react';
+export const LogoSmall: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='62'
+      height='40'
+      viewBox='0 0 62 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M8.096 31C7.86133 31 7.66933 30.9253 7.52 30.776C7.37067 30.6267 7.296 30.4347 7.296 30.2V13.048H1.472C1.25867 13.048 1.07733 12.9733 0.928 12.824C0.778667 12.6747 0.704 12.4933 0.704 12.28V9.4C0.704 9.16533 0.778667 8.97333 0.928 8.824C1.07733 8.67467 1.25867 8.6 1.472 8.6H18.24C18.4747 8.6 18.6667 8.67467 18.816 8.824C18.9653 8.97333 19.04 9.16533 19.04 9.4V12.28C19.04 12.4933 18.9653 12.6747 18.816 12.824C18.6667 12.9733 18.4747 13.048 18.24 13.048H12.448V30.2C12.448 30.4347 12.3733 30.6267 12.224 30.776C12.0747 30.9253 11.8827 31 11.648 31H8.096ZM51.4945 31.32C49.4465 31.32 47.7292 31.0213 46.3425 30.424C44.9772 29.8267 43.9425 29.048 43.2385 28.088C42.5345 27.128 42.1612 26.104 42.1185 25.016C42.1185 24.8453 42.1825 24.696 42.3105 24.568C42.4385 24.4187 42.5985 24.344 42.7905 24.344H46.2145C46.4918 24.344 46.7052 24.408 46.8545 24.536C47.0038 24.6427 47.1425 24.7813 47.2705 24.952C47.4198 25.3147 47.6545 25.6667 47.9745 26.008C48.3158 26.3493 48.7745 26.6373 49.3505 26.872C49.9265 27.0853 50.6412 27.192 51.4945 27.192C52.8812 27.192 53.9158 26.968 54.5985 26.52C55.3025 26.072 55.6545 25.464 55.6545 24.696C55.6545 24.1413 55.4625 23.6933 55.0785 23.352C54.7158 23.0107 54.1292 22.7013 53.3185 22.424C52.5292 22.1467 51.4732 21.848 50.1505 21.528C48.5505 21.1867 47.1852 20.7493 46.0545 20.216C44.9452 19.6613 44.1025 18.9573 43.5265 18.104C42.9718 17.2293 42.6945 16.152 42.6945 14.872C42.6945 13.592 43.0465 12.4613 43.7505 11.48C44.4545 10.4773 45.4465 9.69867 46.7265 9.144C48.0065 8.568 49.5318 8.28 51.3025 8.28C52.7318 8.28 53.9905 8.472 55.0785 8.856C56.1878 9.24 57.1052 9.74133 57.8305 10.36C58.5772 10.9787 59.1425 11.64 59.5265 12.344C59.9105 13.048 60.1132 13.7307 60.1345 14.392C60.1345 14.5627 60.0705 14.7227 59.9425 14.872C59.8145 15 59.6545 15.064 59.4625 15.064H55.8785C55.6652 15.064 55.4732 15.0213 55.3025 14.936C55.1318 14.8507 54.9932 14.7013 54.8865 14.488C54.7585 13.9333 54.3745 13.4533 53.7345 13.048C53.1158 12.6213 52.3052 12.408 51.3025 12.408C50.2572 12.408 49.4252 12.6 48.8065 12.984C48.2092 13.368 47.9105 13.9547 47.9105 14.744C47.9105 15.256 48.0598 15.6933 48.3585 16.056C48.6785 16.3973 49.2012 16.7067 49.9265 16.984C50.6732 17.24 51.6545 17.528 52.8705 17.848C54.7478 18.232 56.2732 18.6907 57.4465 19.224C58.6198 19.7573 59.4838 20.4507 60.0385 21.304C60.5932 22.136 60.8705 23.192 60.8705 24.472C60.8705 25.9013 60.4652 27.128 59.6545 28.152C58.8652 29.176 57.7665 29.9653 56.3585 30.52C54.9718 31.0533 53.3505 31.32 51.4945 31.32Z'
+        fill='white'
+      />
+      <path
+        d='M30.406 31.32C28.9127 31.32 27.59 31.1493 26.438 30.808C25.3073 30.4453 24.358 29.9547 23.59 29.336C22.822 28.696 22.246 27.96 21.862 27.128C21.478 26.2747 21.286 25.3467 21.286 24.344C21.286 23.128 21.5847 22.072 22.182 21.176C22.7793 20.28 23.5367 19.5867 24.454 19.096C23.7073 18.6053 23.1207 17.9867 22.694 17.24C22.2887 16.472 22.086 15.5867 22.086 14.584C22.086 13.368 22.3953 12.2907 23.014 11.352C23.6327 10.4133 24.55 9.66667 25.766 9.112C27.0033 8.55733 28.55 8.28 30.406 8.28C32.2407 8.28 33.766 8.55733 34.982 9.112C36.198 9.64533 37.1153 10.3813 37.734 11.32C38.3527 12.2587 38.662 13.336 38.662 14.552C38.662 15.5547 38.4593 16.44 38.054 17.208C37.6487 17.976 37.0727 18.6053 36.326 19.096C37.3073 19.5653 38.086 20.2587 38.662 21.176C39.238 22.0933 39.526 23.16 39.526 24.376C39.526 25.6987 39.1847 26.8827 38.502 27.928C37.8193 28.9733 36.7953 29.8053 35.43 30.424C34.0647 31.0213 32.39 31.32 30.406 31.32ZM30.406 27.64C31.1527 27.64 31.8353 27.512 32.454 27.256C33.0727 26.9787 33.5527 26.5947 33.894 26.104C34.2567 25.6133 34.438 25.0373 34.438 24.376C34.438 23.6933 34.2567 23.1173 33.894 22.648C33.5527 22.1573 33.0727 21.784 32.454 21.528C31.8353 21.2507 31.1527 21.112 30.406 21.112C29.638 21.112 28.9447 21.2507 28.326 21.528C27.7287 21.784 27.2487 22.1573 26.886 22.648C26.5233 23.1173 26.342 23.6933 26.342 24.376C26.342 25.0373 26.5233 25.6133 26.886 26.104C27.2487 26.5947 27.7287 26.9787 28.326 27.256C28.9447 27.512 29.638 27.64 30.406 27.64ZM30.406 17.624C31.0673 17.6027 31.6647 17.4747 32.198 17.24C32.7313 17.0053 33.158 16.6853 33.478 16.28C33.798 15.8533 33.958 15.3627 33.958 14.808C33.958 14.232 33.798 13.7413 33.478 13.336C33.1793 12.9093 32.7633 12.5787 32.23 12.344C31.6967 12.1093 31.0887 11.992 30.406 11.992C29.7233 11.992 29.1047 12.1093 28.55 12.344C28.0167 12.5787 27.6007 12.9093 27.302 13.336C27.0033 13.7413 26.854 14.232 26.854 14.808C26.854 15.384 27.0033 15.8853 27.302 16.312C27.6007 16.7173 28.0167 17.0373 28.55 17.272C29.1047 17.5067 29.7233 17.624 30.406 17.624Z'
+        fill='#5BD424'
+      />
+    </svg>
+  );
+};