lesson-6

Author: iamshaunjp

dojo-blog/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4"},{"size":432,"mtime":1607775534246,"results":"5","hashOfConfig":"6"},{"size":251,"mtime":1607783104290,"results":"7","hashOfConfig":"6"},{"size":257,"mtime":1607782981753,"results":"8","hashOfConfig":"6"},{"size":131,"mtime":1607783090089,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"13wetv0",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[]]
+[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4"},{"size":432,"mtime":1607775534246,"results":"5","hashOfConfig":"6"},{"size":231,"mtime":1607876502242,"results":"7","hashOfConfig":"6"},{"size":378,"mtime":1607876760570,"results":"8","hashOfConfig":"6"},{"size":131,"mtime":1607783090089,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"13wetv0",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["19","20"],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"]

dojo-blog/src/App.css

@@ -1,4 +1,3 @@
-import './App.css';
 import Navbar from './Navbar';
 import Home from './Home';
 

dojo-blog/src/App.js

@@ -4,7 +4,11 @@ const Navbar = () => {
       <h1>The Dojo Blog</h1>
       <div className="links">
         <a href="/">Home</a>
-        <a href="/create">New Blog</a>
+        <a href="/create" style={{ 
+          color: 'white', 
+          backgroundColor: '#f1356d',
+          borderRadius: '8px' 
+        }}>New Blog</a>
       </div>
     </nav>
   );

dojo-blog/src/Navbar.js

@@ -1,13 +1,35 @@
-body {
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+/* base styles */
+* {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: "Quicksand";
+  color: #333;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.navbar {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+  margin: 0 auto;
+  border-bottom: 1px solid #f2f2f2;
+}
+.navbar h1 {
+  color: #f1356d;
+}
+.navbar .links {
+  margin-left: auto;
+}
+.navbar a {
+  margin-left: 16px;
+  text-decoration: none;
+  padding: 6px;
+}
+.navbar a:hover {
+  color: #f1356d;
+}
+.content {
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 20px;
 }