OV-4: * change to match layout already made

BinaryStudioAcademy · Aug 19, 2024 · 253804a · 253804a
1 parent 95c3a32
commit 253804a
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 59 deletions.
diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx
@@ -1,61 +1,18 @@
-import reactLogo from '~/assets/img/react.svg';
-import { Link, RouterOutlet } from '~/bundles/common/components/components.js';
+import { RouterOutlet } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
-import {
-    useAppDispatch,
-    useAppSelector,
-    useEffect,
-    useLocation,
-} from '~/bundles/common/hooks/hooks.js';
-import { actions as userActions } from '~/bundles/users/store/users.js';
+import { useLocation } from '~/bundles/common/hooks/hooks.js';
 
 const App: React.FC = () => {
     const { pathname } = useLocation();
-    const dispatch = useAppDispatch();
-    const { users, dataStatus } = useAppSelector(({ users }) => ({
-        users: users.users,
-        dataStatus: users.dataStatus,
-    }));
 
-    const isRoot = pathname === AppRoute.ROOT;
-
-    useEffect(() => {
-        if (isRoot) {
-            void dispatch(userActions.loadAll());
-        }
-    }, [isRoot, dispatch]);
+    const isAuth =
+        pathname === AppRoute.SIGN_IN || pathname === AppRoute.SIGN_UP;
 
     return (
         <>
-            <img src={reactLogo} width="30" alt="logo" />
-
-            <ul>
-                <li>
-                    <Link to={AppRoute.ROOT}>Root</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_IN}>Sign in</Link>
-                </li>
-                <li>
-                    <Link to={AppRoute.SIGN_UP}>Sign up</Link>
-                </li>
-            </ul>
-            <p>Current path: {pathname}</p>
-
-            <div>
-                <RouterOutlet />
-            </div>
-            {isRoot && (
-                <>
-                    <h2>Users:</h2>
-                    <h3>Status: {dataStatus}</h3>
-                    <ul>
-                        {users.map((it) => (
-                            <li key={it.id}>{it.email}</li>
-                        ))}
-                    </ul>
-                </>
-            )}
+            {/* TODO Header */}
+            {!isAuth && 'Header'}
+            <RouterOutlet />
         </>
     );
 };

diff --git a/frontend/src/bundles/auth/pages/auth.tsx b/frontend/src/bundles/auth/pages/auth.tsx
@@ -1,5 +1,6 @@
 import { Navigate } from 'react-router-dom';
 
+import { Center, SimpleGrid } from '~/bundles/common/components/components.js';
 import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
@@ -30,6 +31,10 @@ const Auth: React.FC = () => {
         [dispatch],
     );
 
+    if(dataStatus === DataStatus.FULFILLED) {
+        return <Navigate to={AppRoute.ROOT} replace />;
+    }
+
     const getScreen = (screen: string): React.ReactNode => {
         switch (screen) {
             case AppRoute.SIGN_IN: {
@@ -43,15 +48,18 @@ const Auth: React.FC = () => {
         return null;
     };
 
-    if(dataStatus === DataStatus.FULFILLED) {
-        return <Navigate to={AppRoute.ROOT} replace />;
-    }
-
     return (
-        <>
-            state: {dataStatus}
-            {getScreen(pathname)}
-        </>
+        <SimpleGrid columns={2} height="100vh">
+            {/* TODO: Replace with valid loader */}
+            {dataStatus === DataStatus.PENDING && (
+                <p style={{ position: 'absolute', top: 0, color: 'white' }}>
+                    Loading...
+                </p>
+            )}
+            <Center bgColor="background.600">{getScreen(pathname)}</Center>
+            {/* TODO: Add logo */}
+            <Center bgColor="background.900">LOGO</Center>
+        </SimpleGrid>
     );
 };
 

diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -1,7 +1,24 @@
 const colors = {
+    white: '#ffffff',
+    background: {
+        900: '#0a0049',
+        600: '#35399a',
+        300: '#3c9cf5',
+        50: '#e2e1ec',
+    },
     brand: {
         900: '#1a365d',
         200: '#b3e0ff',
+        secondary: {
+            300: '#ff6e1c',
+            600: '#eb5500',
+            900: '#e13b00',
+        },
+    },
+    typography: {
+        900: '#181b1a',
+        600: '#616271',
+        300: '#989898',
     },
     text: {
         default: '#36454f',

diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
@@ -1,7 +1,81 @@
+import { colors } from './colors.styles.js';
+
 const components = {
     Heading: {
         baseStyle: {
-            color: 'text.accent',
+            color: colors.text.accent,
+        },
+    },
+    Button: {
+        variants: {
+            solid: {
+                color: colors.white,
+                bgColor: colors.brand.secondary[300],
+                _hover: {
+                    bg: colors.brand.secondary[600],
+                    _disabled: {
+                        bg: colors.brand.secondary[600],
+                    },
+                },
+            },
+            ghostIcon: {
+                color: colors.white,
+                _hover: {
+                    color: colors.brand.secondary[300],
+                },
+            },
+        },
+    },
+    Link: {
+        variants: {
+            primary: {
+                color: colors.text.default,
+            },
+            secondary: {
+                color: colors.brand.secondary[300],
+                _hover: {
+                    color: colors.brand.secondary[600],
+                },
+            },
+        },
+        baseStyle: {
+            _hover: {
+                textDecoration: 'none',
+            },
+        },
+    },
+    Input: {
+        variants: {
+            outline: {
+                field: {
+                    _focus: {
+                        borderWidth: '2px',
+                        borderColor: colors.brand.secondary[300],
+                        boxShadow: 'none',
+                    },
+                    _placeholder: {
+                        color: colors.typography[300],
+                    },
+                    _invalid: {
+                        borderWidth: '2px',
+                        borderColor: colors.brand.secondary[900],
+                        boxShadow: 'none',
+                    },
+                    _autofill: {
+                        textFillColor: colors.white,
+                        caretColor: colors.white,
+                        boxShadow: '0 0 0 0 inherit inset',
+                        transition: 'background-color 5000s ease-in-out 0s',
+                    },
+                },
+            },
+        },
+    },
+    FormError: {
+        baseStyle: {
+            text: {
+                color: colors.brand.secondary[900],
+            },
         },
     },
 };