yinjs
diff --git a/‎09 Redux/src/components/about.tsx
Copy file name to clipboardExpand all lines: 09 Redux/src/components/about.tsx
+6-6Lines changed: 6 additions & 6 deletions b/‎09 Redux/src/components/about.tsx
Copy file name to clipboardExpand all lines: 09 Redux/src/components/about.tsx
+6-6Lines changed: 6 additions & 6 deletions
diff --git a/‎09 Redux/src/components/header.tsx
Copy file name to clipboardExpand all lines: 09 Redux/src/components/header.tsx
+5-3Lines changed: 5 additions & 3 deletions b/‎09 Redux/src/components/header.tsx
Copy file name to clipboardExpand all lines: 09 Redux/src/components/header.tsx
+5-3Lines changed: 5 additions & 3 deletions
diff --git a/‎09 Redux/src/css/site.css
Copy file name to clipboard
+26-14Lines changed: 26 additions & 14 deletions b/‎09 Redux/src/css/site.css
Copy file name to clipboard
+26-14Lines changed: 26 additions & 14 deletions
diff --git a/‎09 Redux/src/images/lemoncode.png
Copy file name to clipboard
97.2 KB b/‎09 Redux/src/images/lemoncode.png
Copy file name to clipboard
97.2 KB
@@ -2,29 +2,29 @@ import * as React from 'react';
 
 export const About: React.StatelessComponent<{}> = () => {
   return (
-    <div className="row about-page">
-      <h1 className="jumbotron">09 Redux</h1>
+    <div className="row about-page col-12">
+      <h1 className="jumbotron col-2">09 Redux</h1>
 
-      <div className="col-xs-12">
+      <div className="col-10" id="header-title">
         <h1>
           <small>This sample takes as starting point sample "08 ParamNavigation".</small>
         </h1>
-        <div className="col-xs-12">
+        <div className="col-10">
           <h3>
             <small>We are adding Redux pattern</small>
           </h3>
         </div>
       </div>
 
-      <div className="col-xs-12 top-buffer">
+      <div className="col-2 top-buffer">
         <h3>Highlights</h3>
         <hr />
         <h3>
           <small>The most interesting parts worth to take a look</small>
         </h3>
       </div>
 
-      <div className="col-xs-12 top-buffer">
+      <div className="col-10">
         <ul>
           <li className="top-buffer">
             <h4><b>Actions:</b></h4>
 
@@ -4,17 +4,19 @@ import { Link } from 'react-router-dom';
 
 export const Header: React.StatelessComponent<{}> = () => {
   return (
-    <div className="row">
-      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+    <div className="row col-12">
+
+      <nav className="navbar navbar-expand-lg navbar-light bg-white" id="navbar">
+        <img className="navbar-icon" src={require('../images/lemoncode.png')} alt="logo" />
         <a className="navbar-brand" href="#">Lemoncode</a>
+
         <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span className="navbar-toggler-icon"></span>
         </button>
 
         <div className="collapse navbar-collapse" id="navbarSupportedContent">
           <ul className="navbar-nav mr-auto">
             <li className="nav-item">
-              {/* <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a> */}
               <Link className="nav-link" to="/about"> About</Link>
             </li>
             <li className="nav-item ">
 
@@ -1,25 +1,37 @@
-.top-buffer{
-  margin-top: 20px;
+.top-buffer {
+    margin-top: 20px;
 }
 
-.about-page{
-  position: relative;
-  top: -20px;
+.navbar-icon {
+    width: 5em;
+    height: 5em;
 }
 
-.about-page .jumbotron{
-  margin: 0;
-  background:rgba(9,69,95,0.8);
-  color: white;
-  border-radius: 0 !important;
+.about-page .jumbotron {
+    margin: 0;
+    background: rgba(9, 69, 95, 0.8);
+    color: white;
+    border-radius: 0 !important;
 }
 
 /*React apply activeClassName to <a> element, but Bootstrap active class is over <li> element*/
-.navbar .nav .active, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
-  background: #e7e7e7 !important;
-  color: #333 !important;
+
+.navbar .nav .active,
+.navbar-default .navbar-nav>.active>a,
+.navbar-default .navbar-nav>.active>a:hover,
+.navbar-default .navbar-nav>.active>a:focus {
+    background: white !important;
+    color: #333 !important;
 }
 
 .avatar {
-   max-width: 80px
+    max-width: 80px
+}
+
+#navbar {
+    padding-left: 0px !important;
 }
+
+#header-title {
+    background-color: rgb(238, 235, 235);
+}