From 064ebb7af7f75f33a5e51227274db8b39d15f3d3 Mon Sep 17 00:00:00 2001
From: Robert <robert.tm2018@gmail.com>
Date: Fri, 19 Feb 2021 18:26:02 -0500
Subject: [PATCH] Add notices to Header and Optimized styles for header

---
 package-lock.json             | 45 ++++++++++++++++++++++++++++++++++-
 package.json                  |  3 +++
 src/App.js                    | 18 +++++++++-----
 src/stylesheets/Header.css    | 11 +++++++++
 src/stylesheets/SearchBar.css |  2 +-
 5 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1478b9e..cfe6dd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1202,6 +1202,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+      "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+      "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1784,6 +1813,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz",
+      "integrity": "sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
@@ -1808,6 +1839,8 @@
     },
     "@testing-library/react": {
       "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.5.tgz",
+      "integrity": "sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.28.1"
@@ -1815,6 +1848,8 @@
     },
     "@testing-library/user-event": {
       "version": "12.7.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.7.1.tgz",
+      "integrity": "sha512-COfCkYgcxc+P9+pEAIGlmBuIDjO91Chf9GOBHI8AhIiMyaoOrKVPQny1uf0HIAYNoHKL5slhkqOPP2ZyNaVQGw==",
       "requires": {
         "@babel/runtime": "^7.12.5"
       }
@@ -11010,6 +11045,8 @@
     },
     "react": {
       "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -11169,6 +11206,8 @@
     },
     "react-dom": {
       "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -11192,6 +11231,8 @@
     },
     "react-scripts": {
       "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.2.tgz",
+      "integrity": "sha512-okaWNaGDGtnXyM2CLMUl8gYZnAubgxEulC40FYjsxn5bbj+G/mDINdy24wHz4Vypb/LWtIe8rdBU78k/74v8Mw==",
       "requires": {
         "@babel/core": "7.12.3",
         "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
@@ -14079,7 +14120,9 @@
       }
     },
     "web-vitals": {
-      "version": "1.1.0"
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.0.tgz",
+      "integrity": "sha512-1cx54eRxY/+M0KNKdNpNnuXAXG+vJEvwScV4DiV9rOYDguHoeDIzm09ghBohOPtkqPO5OtPC14FWkNva3SDisg=="
     },
     "webidl-conversions": {
       "version": "6.1.0",
diff --git a/package.json b/package.json
index 584f493..5a0f62a 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/src/App.js b/src/App.js
index 2726f78..0398b2c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,18 +4,24 @@ import Link from "./components/Link";
 import Card from "./components/Card"
 import SearchBar from "./components/SearchBar";
 /* import Main from "./components/Main"; */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBell, faCommentDots, faUser } from '@fortawesome/free-solid-svg-icons'
 
 const App = () => {
   return (
     <>
       <Header className="header" >
-        <Link>Hola</Link>
-        <p>Search</p>
-        <Link/>
-        <Link>Inicio</Link>
-        <Link>Hoy</Link>
-        <Link>Siguiendo</Link>
+        <div className="header__nav">
+          <Link>Inicio</Link>
+          <Link>Hoy</Link>
+          <Link>Siguiendo</Link>
+        </div>
         <SearchBar/>
+        <div className="header__notices">
+          <FontAwesomeIcon icon={faBell} />
+          <FontAwesomeIcon icon={faCommentDots} />
+          <FontAwesomeIcon icon={faUser} />
+        </div>
       </Header>
       {/* <Main /> */}
       <Card description="Una Foto"
diff --git a/src/stylesheets/Header.css b/src/stylesheets/Header.css
index a1b01cc..63a0c4a 100644
--- a/src/stylesheets/Header.css
+++ b/src/stylesheets/Header.css
@@ -6,4 +6,15 @@
 /*   justify-content: space-between; */
   align-items: center;
   background-color: var(--background-header);
+}
+
+.header__nav{
+  display: flex;
+  gap: 8px;
+}
+
+.header__notices {
+  display: flex;
+  gap: 19px;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/src/stylesheets/SearchBar.css b/src/stylesheets/SearchBar.css
index 50cbf88..15a3c05 100644
--- a/src/stylesheets/SearchBar.css
+++ b/src/stylesheets/SearchBar.css
@@ -1,5 +1,5 @@
 .searchbar {
-  max-width: 944px;
+  width: 944px;
   padding: 16px;
   background: var(--background-search);
   border-radius: 24px;