❗️ Feat(Files) Update styles

ViktorSvertoka · Feb 29, 2024 · 3b1bcc8 · 3b1bcc8
1 parent abe9ca6
commit 3b1bcc8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -9,30 +9,28 @@ const App = () => {
   const contacts = useSelector(getContacts);
 
   return (
-    <div className="h-full bg-homeBg bg-cover bg-center bg-fixed p-5">
-      <div className="flex flex-col justify-center">
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-          <BiSolidContact className="mx-auto" size="75" color="#4f46e5" />
-          <h1 className="mt-10 text-center text-3xl font-bold leading-9 tracking-tight text-gray-900">
-            Phonebook
-          </h1>
-        </div>
-        <ContactForm />
-        {contacts.length > 0 ? (
-          <>
-            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
-              Contacts
-            </h2>
-
-            <Filter />
-          </>
-        ) : (
-          <p className="mt-10 text-center text-1xl font-bold leading-9 tracking-tight text-gray-600">
-            Your phonebook is empty. Add first contact!
-          </p>
-        )}
-        {contacts.length > 0 && <ContactList />}
+    <div className="flex flex-col justify-center p-5">
+      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+        <BiSolidContact className="mx-auto" size="75" color="#4f46e5" />
+        <h1 className="mt-10 text-center text-3xl font-bold leading-9 tracking-tight text-gray-900">
+          Phonebook
+        </h1>
       </div>
+      <ContactForm />
+      {contacts.length > 0 ? (
+        <>
+          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+            Contacts
+          </h2>
+
+          <Filter />
+        </>
+      ) : (
+        <p className="mt-10 text-center text-1xl font-bold leading-9 tracking-tight text-gray-600">
+          Your phonebook is empty. Add first contact!
+        </p>
+      )}
+      {contacts.length > 0 && <ContactList />}
     </div>
   );
 };

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  background: url(./images/bg.jpg) center / cover no-repeat;
+  background-attachment: fixed;
+  min-height: 100vh;
+}