styled forms

src/components/App.jsx

@@ -1,14 +1,13 @@
-import { Routes, Route } from 'react-router-dom';
-// import { lazy } from 'react';
 import { lazy } from 'react';
+import { Routes, Route } from 'react-router-dom';
 
 import Layout from './Layout/Layout';
-import RegisterPage from 'pages/RegisterPage';
-import LoginPage from 'pages/LoginPage';
-import ContactsPage from 'pages/ContactsPage';
-import NotFound from 'pages/NotFound';
+import ContactsPage from 'pages/ContactsPage/ContactsPage';
+import RegisterPage from 'pages/RegisterPage/RegisterPage';
+import NotFound from 'pages/NotFound/NotFound';
 
 const HomePage = lazy(() => import('pages/HomePage/HomePage'));
+const LoginPage = lazy(() => import('pages/LoginPage/LoginPage'));
 
 const App = () => {
   return (

src/components/Layout/Layout.jsx

@@ -1,31 +1,39 @@
-import { NavLink, Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { Suspense } from 'react';
-import { Header, Navigation, NavItem, Container } from './Layout.styled';
+import {
+  Container,
+  Header,
+  Navigation,
+  NavItem,
+  StyledLink,
+  Main,
+} from './Layout.styled';
 
 const Layout = () => {
   return (
     <Container>
       <Header>
         <Navigation>
           <NavItem>
-            <NavLink to="/">Home</NavLink>
+            <StyledLink to="/">Home</StyledLink>
           </NavItem>
           <NavItem>
-            <NavLink to="register">Register</NavLink>
+            <StyledLink to="register">Register</StyledLink>
           </NavItem>
           <NavItem>
-            <NavLink to="login">Log In</NavLink>
+            <StyledLink to="login">Log In</StyledLink>
           </NavItem>
           <NavItem>
-            <NavLink to="contacts">Contacts</NavLink>
+            <StyledLink to="contacts">Contacts</StyledLink>
           </NavItem>
         </Navigation>
       </Header>
-      <main>
-        <Suspense fallback={<div>Loading...</div>}>
+
+      <Main>
+        <Suspense fallback={null}>
           <Outlet />
         </Suspense>
-      </main>
+      </Main>
     </Container>
   );
 };

src/components/Layout/Layout.styled.jsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
 
 export const Container = styled.div`
   width: 1400px;
@@ -15,12 +16,23 @@ export const Navigation = styled.ul`
   gap: 50px;
 `;
 
-export const NavItem = styled.li`
+export const NavItem = styled.li``;
+
+export const StyledLink = styled(NavLink)`
   font-size: 20px;
+  color: #000000;
   background-color: #bfa89e;
   padding: 8px;
   border-radius: 4px;
-  &: active {
+
+  &.active {
+    color: #ebf5ee;
     background-color: #8b786d;
+    padding: 8px;
+    border-radius: 4px;
   }
 `;
+
+export const Main = styled.main`
+  padding: 32px;
+`;

src/components/LoginForm/LoginForm.jsx

@@ -0,0 +1,17 @@
+import { Form, Label, Input, SubmitButton } from './LoginForm.styled';
+
+export const LoginForm = () => {
+  return (
+    <Form>
+      <Label>
+        Email
+        <Input type="email" name="email" />
+      </Label>
+      <Label>
+        Password
+        <Input type="password" name="password" />
+      </Label>
+      <SubmitButton type="submit">Log In</SubmitButton>
+    </Form>
+  );
+};

src/components/LoginForm/LoginForm.styled.jsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+export const Form = styled.form`
+  width: 400px;
+  background-color: #bfa89e;
+  padding: 12px;
+  border-radius: 8px;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  color: #000000;
+  font-size: 18px;
+  margin-bottom: 12px;
+`;
+
+export const Input = styled.input`
+  padding: 4px;
+  font-size: 18px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  outline: transparent;
+
+  &: focus {
+    border-color: #78a1bb;
+  }
+
+  &: hover {
+    border-color: #78a1bb;
+  }
+`;
+
+export const SubmitButton = styled.button`
+  padding: 8px 24px;
+  font-size: 16px;
+  color: #ebf5ee;
+  background-color: #8b786d;
+
+  &: hover {
+    background-color: #78a1bb;
+  }
+`;

src/components/RegisterForm/RegisterForm.jsx

@@ -0,0 +1,21 @@
+import { Form, Label, Input, SubmitButton } from './RegisterForm.styled';
+
+export const RegisterForm = () => {
+  return (
+    <Form>
+      <Label>
+        Username
+        <Input type="text" name="text" />
+      </Label>
+      <Label>
+        Email
+        <Input type="email" name="email" />
+      </Label>
+      <Label>
+        Password
+        <Input type="password" name="password" />
+      </Label>
+      <SubmitButton type="submit">Register</SubmitButton>
+    </Form>
+  );
+};

src/components/RegisterForm/RegisterForm.styled.jsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+export const Form = styled.form`
+  width: 400px;
+  background-color: #bfa89e;
+  padding: 12px;
+  border-radius: 8px;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  color: #000000;
+  font-size: 18px;
+  margin-bottom: 12px;
+`;
+
+export const Input = styled.input`
+  padding: 4px;
+  font-size: 18px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  outline: transparent;
+
+  &: focus {
+    border-color: #78a1bb;
+  }
+
+  &: hover {
+    border-color: #78a1bb;
+  }
+`;
+
+export const SubmitButton = styled.button`
+  padding: 8px 24px;
+  font-size: 16px;
+  color: #ebf5ee;
+  background-color: #8b786d;
+
+  &: hover {
+    background-color: #78a1bb;
+  }
+`;

src/index.css

@@ -27,7 +27,7 @@ ol {
 }
 a {
   text-decoration: none;
-  color: #ebf5ee;
+  color: #000000;
 }
 
 body {
@@ -68,5 +68,5 @@ body::-webkit-scrollbar-thumb {
   text-align: center;
   display: flex;
   justify-content: center;
-  align-items: center;
+  margin-bottom: 4px;
 }

src/index.js

@@ -4,11 +4,15 @@ import App from 'components/App';
 import './index.css';
 
 import { BrowserRouter } from 'react-router-dom';
+// import { Provider } from 'react-redux';
+// import { store } from './redux/store';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    {/* <Provider store={store}> */}
     <BrowserRouter basename="/goit-react-hw-08-phonebook">
       <App />
     </BrowserRouter>
+    {/* </Provider> */}
   </React.StrictMode>
 );

src/pages/HomePage/HomePage.styled.jsx

@@ -8,7 +8,7 @@ export const HomeContainer = styled.div`
   background-size: cover;
   margin: 0 auto;
   max-width: 1400px;
-  height: 89vh;
+  height: 80vh;
 
   display: flex;
   justify-content: center;

src/pages/LoginPage/LoginPage.jsx

@@ -0,0 +1,7 @@
+import { LoginForm } from 'components/LoginForm/LoginForm';
+
+const LoginPage = () => {
+  return <LoginForm />;
+};
+
+export default LoginPage;

src/pages/RegisterPage/RegisterPage.jsx

@@ -0,0 +1,7 @@
+import { RegisterForm } from 'components/RegisterForm/RegisterForm';
+
+const RegisterPage = () => {
+  return <RegisterForm />;
+};
+
+export default RegisterPage;