CSS Refactor ListPages

JavChz · Apr 10, 2022 · 1faa353 · 1faa353
1 parent 68ad5a2
commit 1faa353
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 29 deletions.
diff --git a/src/AddForm/index.js b/src/AddForm/index.js
@@ -1,6 +1,6 @@
 import { useContext, useState } from "react";
 import { AppContext } from "../AppContext";
-
+import './AddForm.css';
 function AddForm() {
 	const defaultForm = {name: "", url: ""}
   const { SaveChanges, list } = useContext(AppContext);
@@ -15,7 +15,7 @@ function AddForm() {
     SaveChanges([...list, addition]);
   };
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={onSubmit} className="AddForm">
       <input
         name="name"
         onChange={changeHandler}

diff --git a/src/ListPages/ListPages.css b/src/ListPages/ListPages.css
@@ -17,9 +17,9 @@
   background: var(--main-color-light);
   border-radius: 0.2rem;
   border: 0.1rem solid var(--main-color-light);
+  box-shadow: var(--box-shadow-mid);
   box-sizing: border-box;
   cursor: move;
-  box-shadow: var(--box-shadow-mid);
   display: flex;
   font-weight: bold;
   justify-content: space-around;
@@ -98,33 +98,10 @@
   filter: hue-rotate(185deg) brightness(3.6);
 
 }
-.Pages .Pages__move {
+.Pages__move {
   cursor: grab;
   margin-right: 1rem;
 }
-form {
-  width: 100%;
-  box-sizing: border-box;
-}
-form input {
-  box-sizing: border-box;
-  margin-bottom: 1rem;
-  font-size: 1.4rem;
-  padding: 1rem;
-  width: 100%;
-}
-
-form input[type=submit]{
-  background: var(--main-color-light);
-  border-radius: .2rem;
-  border: 2px solid var(--main-color);
-  color: var(--main-color);
-  cursor: pointer;
-  font-weight: bold;
-  transition: all var(--transition-main);
-}
-form input[type=submit]:hover{
-  background: var(--main-color);
-  color: var(--main-color-light);
-  border-color: var(--main-color-light);
+.Pages__move:hover{
+  filter: hue-rotate(45deg) brightness(3.6);
 }