refactoring css

Kapshtyk · May 21, 2023 · 7b9ac04 · 7b9ac04
1 parent 3e5f94d
commit 7b9ac04
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 28 deletions.
diff --git a/src/components/AddRecipe.tsx b/src/components/AddRecipe.tsx
@@ -8,6 +8,7 @@ import { CurrentUserContext, RecipesContext } from '../utils/context'
 import { getCountries } from '../utils/CountryCode'
 
 import cl from '../styles/AddRecipe.module.css'
+import style from '../styles/Form.module.css'
 
 const AddRecipe = () => {
   const fetchRecipes = useContext(RecipesContext).fetchRecipes
@@ -123,7 +124,7 @@ const AddRecipe = () => {
   }
 
   return (
-    <div className={cl.form_container}>
+    <div className={style.container}>
       <h2 className={cl.form_title}>Add recipe</h2>
       <form
         className={cl.form}

diff --git a/src/pages/Authorization.tsx b/src/pages/Authorization.tsx
@@ -8,7 +8,7 @@ import { CurrentUserContext, UsersContext } from '../utils/context'
 import md5 from 'md5'
 
 import cl from '../styles/Authorization.module.css'
-import style from '../styles/AddRecipe.module.css'
+import style from '../styles/Form.module.css'
 
 const Authorization = ({ hasAccount }: AuthorizationType) => {
   const [userData, setUserData] = useState<AuthorizationUserDataType>({
@@ -83,7 +83,7 @@ const Authorization = ({ hasAccount }: AuthorizationType) => {
   }
 
   return (
-    <div className={style.form_container} style={{ width: 400 }}>
+    <div className={style.container} style={{ width: 400 }}>
       <h2 className={cl.authorization_title}>
         {hasAccount ? 'Login' : 'Sign up'}
       </h2>

diff --git a/src/pages/Recipe.tsx b/src/pages/Recipe.tsx
@@ -14,6 +14,7 @@ import {
 import AddComment from '../components/AddComment'
 
 import cl from '../styles/Recipe.module.css'
+import style from '../styles/Form.module.css'
 
 const Recipe = () => {
   const [recipe, setRecipe] = useState<RecipeType | undefined>()
@@ -89,7 +90,7 @@ const Recipe = () => {
 
   if (recipe && 'id' in recipe) {
     return (
-      <div className={cl.recipe_container}>
+      <div className={style.container}>
         <h1 className={cl.recipe_title}>
           {recipe.title} from {recipe.origin}
         </h1>

diff --git a/src/styles/AddRecipe.module.css b/src/styles/AddRecipe.module.css
@@ -1,15 +1,3 @@
-.form_container {
-  max-width: 700px;
-  margin: auto;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  padding: 1.5rem;
-  border: 1px solid #e5e5e5;
-  border-radius: 1rem;
-  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.05),
-    0 2px 1px rgba(0, 0, 0, 0.02);
-}
-
 .form {
   display: flex;
   flex-direction: column;

diff --git a/src/styles/Form.module.css b/src/styles/Form.module.css
@@ -0,0 +1,11 @@
+.container {
+  max-width: 700px;
+  margin: auto;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #e5e5e5;
+  border-radius: 1rem;
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.05),
+    0 2px 1px rgba(0, 0, 0, 0.02);
+}
diff --git a/src/styles/Recipe.module.css b/src/styles/Recipe.module.css
@@ -1,15 +1,3 @@
-.recipe_container {
-  max-width: 700px;
-  margin: auto;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  padding: 1.5rem;
-  border: 1px solid #e5e5e5;
-  border-radius: 1rem;
-  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.05),
-    0 2px 1px rgba(0, 0, 0, 0.02);
-}
-
 .recipe_title {
   font-size: 2rem;
   font-weight: bold;