first commit

Author: shanoysinc

.eslintcache

@@ -0,0 +1 @@
+[{"C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\index.js":"1","C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\App.js":"2","C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\components\\header\\NavBar.js":"3"},{"size":406,"mtime":1606964373187,"results":"4","hashOfConfig":"5"},{"size":172,"mtime":1606969775166,"results":"6","hashOfConfig":"5"},{"size":586,"mtime":1606970037139,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1be71of",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\index.js",[],"C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\App.js",[],"C:\\Users\\Sebas\\Documents\\ProdCode\\codecademy\\src\\components\\header\\NavBar.js",[]]

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "node-sass": "4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

src/App.css

@@ -1,25 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.scss";
+import NavBar from "./components/header/NavBar";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	return (
+		<div className="App">
+			<NavBar />
+		</div>
+	);
 }
 
 export default App;

src/App.js

@@ -0,0 +1,26 @@
+$margin-sml: 0.25em;
+$margin-md: 0.5em;
+$margin-lg: 1em;
+$margin-xlg: 1.5em;
+
+$padding-sml: 0.25em;
+$padding-md: 0.5em;
+$padding-lg: 1em;
+$padding-xlg: 1.5em;
+
+:root {
+	box-sizing: border-box;
+}
+
+*,
+::before,
+::after {
+	box-sizing: inherit;
+}
+
+body {
+	background-color: #fff0e5;
+	margin: 0;
+}
+
+@import "./components/header/navbar";

src/App.scss

@@ -0,0 +1,22 @@
+import React from "react";
+import logo from "../../assests/svg/codecademy-logo.com.svg";
+import notification from "../../assests/svg/notification.svg";
+import menu from "../../assests/svg/menu.svg";
+
+const NavBar = () => {
+	return (
+		<div className="navbar">
+			<img src={logo} alt="logo" className="navbar__icon" />
+			<div className="move-right">
+				<img
+					src={notification}
+					alt="notification"
+					className=" navbar__icon--sml"
+				/>
+				<img src={menu} alt="menu" className="navbar__icon--sml" />
+			</div>
+		</div>
+	);
+};
+
+export default NavBar;

src/App.test.js

@@ -0,0 +1,15 @@
+.navbar {
+	background-color: hsl(0, 0%, 98%);
+	padding: $padding-lg;
+	border-bottom: 1px solid black;
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	&__icon {
+		height: 27px;
+	}
+	&__icon--sml {
+		height: 20px;
+		padding-left: $padding-xlg;
+	}
+}

src/assests/svg/codecademy-logo.com.svg

@@ -1,17 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();