diff --git a/src/App.js b/src/App.js index 01bafcb..08535ed 100644 --- a/src/App.js +++ b/src/App.js @@ -83,15 +83,16 @@ function App() { return (
+
- +

{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : null}

- + {numberOfResults === 0 ? : null} @@ -120,6 +121,7 @@ function App() { {loader ? : null}
+
); } diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index fc22d1a..bda66db 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -36,7 +36,7 @@ const AddItem = ({onExit, reFetch, tags, SetLoader}) => { <>
- New bookmark + New bookmark

* Link:

diff --git a/src/styles/App.css b/src/styles/App.css index 581c090..f3e7a7b 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -2,6 +2,15 @@ min-height: 100vh; background-color: #1f2c38; color: white; + display: flex; +} + +.content { + width: 100%; + padding: 20px; + max-width: 1200px; + margin-left: auto; + margin-right: auto; } .head { @@ -9,13 +18,12 @@ } .search { - margin: 20px 20px 0px 20px; padding: 10px; font-family: 'Font Awesome 5 Free'; font-size: 1.2rem; padding-left: 10px; border: none; - width: 20%; + width: 35%; min-width: 300px; color: white; background-color:#273949; @@ -29,7 +37,6 @@ .btn { position: relative; border-radius: 100%; - margin: 20px 20px 0px auto; font-family: 'Font Awesome 5 Free'; width: 40px; height: 40px; @@ -43,6 +50,10 @@ transition: background-color 0.1s; } +.add-btn { + margin-left: auto; +} + .btn:hover { background-color: rgb(76, 117, 170); } @@ -56,7 +67,7 @@ textarea:focus, input:focus{ } .results { - margin: 20px 20px 0px 30px; + margin: 20px 20px 0px 5px; display: inline-block; } diff --git a/src/styles/Filters.css b/src/styles/Filters.css index 4845a86..ff086ed 100644 --- a/src/styles/Filters.css +++ b/src/styles/Filters.css @@ -48,7 +48,7 @@ } .filter label:active { - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + box-shadow: 0px 0px 10px rgb(83, 143, 255); } @keyframes fadein { diff --git a/src/styles/List.css b/src/styles/List.css index a83526b..95ed725 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -24,12 +24,12 @@ } .list-row { + margin-top: 20px; display: flex; justify-content: space-between; align-items: center; background-color:#273949; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; - margin: 20px; } .list-row:hover img { @@ -110,7 +110,9 @@ } .tags div::before { - content: "#"; + + color: rgb(35, 112, 156); + content: "# "; } .num { diff --git a/src/styles/Sort.css b/src/styles/Sort.css index 9cc9dc7..aba8e0d 100644 --- a/src/styles/Sort.css +++ b/src/styles/Sort.css @@ -52,7 +52,7 @@ } .sort-by-btn:active { - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + box-shadow: 0px 0px 10px rgb(83, 143, 255); } @keyframes fadein { diff --git a/src/styles/index.css b/src/styles/index.css index b44e744..a0e413d 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -10,5 +10,5 @@ body { } *::selection { - background-color: rgba(255, 255, 0, 0.6); + background-color: rgba(115, 192, 255, 0.9); } \ No newline at end of file