Changes Container

src/components/App.jsx

@@ -6,8 +6,10 @@ import { lazy, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { RestrictedRoute } from './RestrictedRoute';
 import { PrivateRoute } from './PrivateRoute';
+import { Container } from './Container/Container';
+
+// import css from './App.module.css'
 
-import css from './App.module.css'
 const Register = lazy(() => import('../pages/Register'));
 const Home = lazy(() => import('../pages/Home'));
 const Login = lazy(() => import('../pages/Login'));
@@ -25,7 +27,7 @@ export const App = () => {
   return isRefreshing ? (
     <b>Refreshing user...</b>
   ) : (
-    <div className={css.container}>
+    <Container>
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
@@ -53,7 +55,7 @@ export const App = () => {
           <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>
-    </div>
+    </Container>
   );
 };
 

src/components/App.module.css

@@ -1,18 +1,7 @@
-/* .h1 {
-    margin-bottom: 20px;
-    font-size: 32px;
-    text-align: center;
-    color: white;
-}
-.h2 {
-    margin-bottom: 10px;
-    font-size: 24px;
-    font-weight: 700;
-    text-align: center;
-    color: white;
-} */
 
-.container {
-    /* max-width: 1200px; */
-    width: 700px;
-};
+
+/* .container { */
+
+    /* width: 100%;
+    max-width: 1200px;
+}; */

src/components/ContactFind/ContactFind.jsx

@@ -15,7 +15,7 @@ export const ContactFind = () => {
   };
 
     return (
-      <>
+      <div className={css.wrap_find}>
         <label className={css.find_label} htmlFor={inputId}>
           Find contacts by name
         </label>
@@ -31,6 +31,6 @@ export const ContactFind = () => {
           required
           onChange={changeFilter}
         />
-      </>
+      </div>
     );
 };

src/components/ContactFind/ContactFind.module.css

@@ -4,26 +4,26 @@
     font-size: 16px;
     text-align: center;
     color: white;
-        /* align-items: center;
-            display: flex;
-            flex-direction: column; */
+    align-items: center;
+    display: flex;
+    flex-direction: column; 
 
 }
-
+.wrap_find {
+   align-items: center;
+   display: flex;
+    flex-direction: column; 
+
+}
 .find_input {
     min-width: 250px;
     min-height: 26px;
-    margin-bottom: 10px;
     font-size: 16px;
     outline: none;
     border-radius: 5px;
     border-width: 0;
+    margin-bottom: 15px;
     padding: 5px 10px;
-
-    display: flex;
-    justify-content: center; 
-    margin-right: auto;
-        margin-left: auto;
 
 }
 

src/components/ContactItem/ContactItem.module.css

@@ -3,8 +3,8 @@
     align-items: center;
     column-gap: 10px;
     color: white;
-    padding-left: 120px;
-    padding-right: 120px;;
+    /* padding-left: 120px;
+    padding-right: 120px;; */
 }
 
 .delete_btn {

src/components/ContactList/ContactList.module.css

@@ -1,6 +1,8 @@
 .contacts_list {
     display: flex;
-    flex-direction: column;
+    /* flex-direction: column; */
     justify-content: center;
     row-gap: 15px;
+    padding-left: 0;
+
 }

src/components/Container/Container.jsx

@@ -0,0 +1,7 @@
+import css from './Container.module.css'
+
+export const Container = ({children}) => {
+    return <div className={css.container}>
+        {children}
+    </div>;
+}

src/components/Container/Container.module.css

@@ -0,0 +1,10 @@
+.container {
+    width: 100%;
+    max-width: 1200px;
+
+
+  /* min-height: calc(100vh - 50px); */
+  /* display: flex;
+  align-items: center;
+  justify-content: center; */
+};

src/components/RegisterForm/RegisterForm.jsx

@@ -23,7 +23,7 @@ export const RegisterForm = () => {
   return (
     <form className={css.form} onSubmit={handleSubmit} autoComplete="off">
       <label className={css.label}>
-        Username
+        User name
         <input className={css.register_input} type="text" name="name" />
       </label>
       <label className={css.label}>

src/pages/Home.jsx

@@ -1,26 +1,41 @@
-const styles = {
-  container: {
-    minHeight: 'calc(100vh - 50px)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontWeight: 500,
-    fontSize: 48,
-    textAlign: 'center',
-  },
-};
+// import { Container } from 'components/Container/Container';
+import css from './Home.module.css'
+// const styles = {
+  // container: {
+  //   minHeight: 'calc(100vh - 50px)',
+  //   display: 'flex',
+  //   alignItems: 'center',
+  //   justifyContent: 'center',
+  // },
+  // title: {
+  //   fontWeight: 500,
+  //   fontSize: 28,
+  //   textAlign: 'center',
+  // },
+// };
+
+// export default function Home() {
+//   return (
+//     <div style={styles.container}>
+//       <h1 style={styles.title}>
+//         Phonebook welcome page{' '}
+//         <span role="img" aria-label="Greeting icon">
+//           💁‍♀️
+//         </span>
+//       </h1>
+//     </div>
+//   );
+//
 
 export default function Home() {
   return (
-    <div style={styles.container}>
-      <h1 style={styles.title}>
+    <div className={css.wrap}>
+      <h1 className={css.title}>
         Phonebook welcome page{' '}
         <span role="img" aria-label="Greeting icon">
           💁‍♀️
         </span>
       </h1>
     </div>
   );
-}
+}

src/pages/Home.module.css

@@ -0,0 +1,12 @@
+.title {
+
+    font-weight: 500px;
+    font-size: 48px;
+    text-align: center;
+}
+.wrap {
+    min-height: calc(100vh - 50px); 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/pages/Phonebook.module.css

@@ -6,6 +6,8 @@
     rgba(255, 100, 124, 1) 100%
   );
   margin: 50px auto 0;
-  padding: 40px;
+  padding-top: 40px;
+  padding-bottom: 40px;
   border-radius: 15px;
+  padding: 40px;
 }