Header update

xyfer17 · Feb 27, 2023 · 0a10e7b · 0a10e7b
1 parent 7e4f857
commit 0a10e7b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "task.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
+      "src": "task.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "task.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/component/Header.jsx b/src/component/Header.jsx
@@ -13,7 +13,7 @@ const Header = () => {
           </a>
         </Logo>
 
-        <span>Task Manager App</span>
+        <span>Task Manager APP</span>
 
         <Logo>
           <a href="/">
@@ -34,27 +34,35 @@ const Container = styled.div`
 const Content = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 10px 20px;
+  padding: 1px 20px;
 
   span {
     display: flex;
     align-items: center;
     text-align: center;
+    font-size: 25px;
+    color: #28c7cc;
+    @media (max-width: 768px) {
+      font-size: 18px;
+    }
   }
 `;
 
 const Logo = styled.div`
-  box-shadow: 0 2px 7px #dc6666eb;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 3px;
-  border-radius: 10px;
+  border-radius: 5px;
   img {
     height: 3rem;
-    border-radius: 0.5rem;
+
+    border-radius: 0.3rem;
     transition: all 0.3s;
     &:hover {
       transform: scale(1.07);
     }
+
+    @media (max-width: 768px) {
+      height: 2rem;
+    }
   }
 `;
 

diff --git a/src/component/Home.jsx b/src/component/Home.jsx
@@ -1,12 +1,34 @@
 import React from "react";
 import Header from "./Header";
+import styled from "styled-components";
 
 const Home = () => {
   return (
     <div>
       <Header />
+      <Container>
+        <Content>
+          <span>test</span>
+          <span>test</span>
+          <span>test</span>
+          <span>test</span>
+        </Content>
+      </Container>
     </div>
   );
 };
 
+const Container = styled.div`
+  padding-top: 150px;
+
+  justify-content: center;
+  display: flex;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export default Home;