Merge pull request #17 from mariia-iureva/Yael

Final style adjustments!
mariia-iureva · Jan 20, 2023 · 4d12aef · 4d12aef
2 parents b314f35 + 994743d
commit 4d12aef
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,10 +1,12 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@700&display=swap'); */
-@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
 
 body {
-  color: #333333;
+  color: #454545;
   margin: 1rem;
   background-color: rgb(233, 230, 225);
+  font-family: 'Nunito', sans-serif;
 }
 
 .page__container {
@@ -24,13 +26,13 @@ body {
 h1, h2 {
   display: inline-block;
   align-items: center;
-  font-family: 'Fjalla One';
+  font-family: 'Roboto';
   text-transform: uppercase;
   letter-spacing: .1em;
 }
 
 h1:hover, h2:hover {
-  opacity: 0.4;
+  color: #00aa95;
   transition: 0.3s all ease-in-out;
 }
 
@@ -69,6 +71,16 @@ footer {
 
 input {
   box-sizing: initial;
+  border: 0;
+  border-radius: 5px;
+}
+
+select, input {
+  padding: .4em;
+}
+
+select {
+  width: 25%;
 }
 
 .new-board-form__submit, .new-card-form__submit {
@@ -83,6 +95,13 @@ button:hover, li:hover, #hide-btn:hover {
   background-color: lightgrey;
   transition: 0.3s all ease-in-out;
   color: #555;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.1) 0 7px 13px -3px;
+  transform: translateY(-2px);
+}
+
+button:active {
+  box-shadow: #D6D6E7 0 3px 7px inset;
+  transform: translateY(2px);
 }
 
 label {

diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,6 @@ import "./App.css";
 import Board from "./components/Board";
 import BoardList from "./components/BoardList";
 import NewBoardForm from "./components/NewBoardForm";
-import NewCardForm from "./components/NewCardForm";
 
 function App() {
   const [boardsData, setBoardsData] = useState([]);

diff --git a/src/components/BoardList.css b/src/components/BoardList.css
@@ -2,7 +2,7 @@
     border: 1px solid #000;
     background-color: white;
     margin-right: 2rem;
-    max-height: 9rem;
+    max-height: 25rem;
     min-height: 9rem;
     overflow: scroll;
     box-shadow: 0 4px 8px 0 rgba(240, 232, 232, 0.5), 0 6px 20px 0 rgba(0,0,0,0.14);

diff --git a/src/components/Card.css b/src/components/Card.css
@@ -7,7 +7,12 @@
     min-height: 200px;
     padding: 2rem;
     box-shadow: 0 4px 8px 0 rgba(240, 232, 232, 0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-  }
+}
+
+.card-entry:hover {
+  box-shadow: 0 4px 8px 0 rgba(240, 232, 232, 0.4), 0 6px 20px 0 rgba(0,0,0,0.39);
+  transition: 0.3s all ease-in-out;
+}
 
 .card-entry-message {
   font-size: 1.4rem;
@@ -21,6 +26,7 @@
   list-style-type: none;
   padding: .5em;
   width: 100%;
+  border-radius: 4px;
 }
 
 p {