Add GitHub link + Fix styles (less ugly on Windows now)

Author: Oblosys

examples/parent-child-demo/package.json

@@ -14,7 +14,7 @@
     "prop-types": "^15.6.1",
     "react": "16.3.1",
     "react-dom": "16.3.1",
-    "react-hot-loader": "^4.1.0",
+    "react-hot-loader": "4.1.2",
     "react-lifecycle-visualizer": "2.0.0-beta.4",
     "react-redux": "^5.0.7",
     "react-scripts": "^1.0.10",

examples/parent-child-demo/src/Main.js

@@ -71,6 +71,12 @@ export default class Main extends Component {
               checked={this.state.isShowingParent}
               onChange={this.onCheckboxChange}
             />
+            <a
+              className='github-link'
+              href='https://github.com/Oblosys/react-lifecycle-visualizer#readme'
+            >
+              GitHub
+            </a>
           </div>
         </div>
         <div className='traced-component'>

examples/parent-child-demo/src/components/LabeledCheckbox.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const LabeledCheckbox = ({label, checked, onChange}) => (
-  <label>
+  <label className='labeled-checkbox'>
     <input type='checkbox' checked={checked} onChange={onChange}/>
-    {label}
+    <div>{label}</div>
   </label>
 );
 

examples/parent-child-demo/src/components/Tagged.js

@@ -7,7 +7,7 @@ const Tagged = ({name, showProps, children}) => {
     ).join(' ');
 
   return (
-    <div>
+    <div className='tagged'>
       { (React.Children.count(children) === 0)
         ? <span className='tag'>{'<' + name + shownProps + '/>'}</span>
         : <Fragment>

examples/parent-child-demo/src/samples/Legacy.js

@@ -34,7 +34,7 @@ export default class Parent extends Component {
     return (
       <Tagged name='Parent'>
         <div>state = {JSON.stringify(this.state)}</div>
-        <div>
+        <div className='controls'>
           <SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
           <SimpleButton value='inc x'       onClick={this.incX}/>
           <LabeledCheckbox
@@ -73,7 +73,7 @@ class Child extends Component {
     return (
       <Tagged name='Child' showProps={{x: this.props.x}}>
         <div>state = {JSON.stringify(this.state)}</div>
-        <div>
+        <div className='controls'>
           <SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
           <SimpleButton value='inc x'       onClick={() => this.props.incX()}/>
           <SimpleButton value='inc y'       onClick={() => this.incY()}/>

examples/parent-child-demo/src/samples/New.js

@@ -30,7 +30,7 @@ export default class Parent extends Component {
     return (
       <Tagged name='Parent'>
         <div>state = {JSON.stringify(this.state)}</div>
-        <div>
+        <div className='controls'>
           <SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
           <SimpleButton value='inc x'       onClick={this.incX}/>
           <LabeledCheckbox
@@ -76,7 +76,7 @@ class Child extends Component {
     return (
       <Tagged name='Child' showProps={{x: this.props.x}}>
         <div>state = {JSON.stringify(this.state)}</div>
-        <div>
+        <div className='controls'>
           <SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
           <SimpleButton value='inc x'       onClick={() => this.props.incX()}/>
           <SimpleButton value='inc y'       onClick={() => this.incY()}/>

examples/parent-child-demo/src/style.scss

@@ -1,42 +1,63 @@
+$codeFont: Consolas, monospace;
+$uiFont: arial, sans-serif;
+
 body {
-  font-family: Consolas;
+  font-family: $uiFont;
   font-size: 13px;
   height: 100vh;
   width: 100vw;
   margin: 0;
   display: flex;
 }
+
 #root {
   margin: 0;
   flex-grow: 1;
   display: flex;
 }
+
 .app {
   flex-grow: 1;
   display: flex;
 }
+
 .main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   border-right: solid #ddd 1px;
 
   .header {
-    padding: 4px 5px 1px 10px;
+    padding: 5px 5px 0 10px;
     border-bottom: solid #ccc 1px;
     flex-shrink: 0;
     display: flex;
     flex-wrap: wrap;
     background-color: #f0f0f0;
 
     > * {
+      display: flex;
+      align-items: center;
       white-space: nowrap;
       margin-bottom: 5px;
     }
+    > *:last-child {
+      flex-grow: 1;
+    }
     > * > * {
       margin-right: 10px;
     }
+
+    .simple-button {
+      font-family: $codeFont;
+    }
+
+    .github-link {
+      flex-grow: 1;
+      text-align: right;
+    }
   }
+
   .traced-component {
     padding: 5px;
     flex-grow: 1;
@@ -45,25 +66,36 @@ body {
   }
 }
 
+.controls {
+  display: flex;
+}
+
+.labeled-checkbox {
+  display: inline-flex;
+  align-items: center;
+  height: 17px;
+}
+
 .simple-button {
-    display: inline-block;
-    padding: 2px 3px 0 3px;
-    line-height: 13px;
-    font-size: 12px;
-    border: solid #aaa 1px;
-    border-radius: 4px;
-    user-select: none;
-    background-color: white;
+  display: inline-block;
+  padding: 1px 3px 0 3px;
+  font-size: 12px;
+  border: solid #aaa 1px;
+  border-radius: 4px;
+  user-select: none;
+  background-color: white;
 }
 .simple-button:not(:last-child) {
   margin-right: 5px;
 }
 .simple-button:hover {
   background-color: #ddd;
 }
+
 .tagged {
-  margin-top: 6px;
+  font-family: $codeFont;
 }
+
 .indented {
   padding-left: 1.5em;
 }

src/components/Log.jsx

@@ -51,14 +51,16 @@ class Log extends Component {
               <span className='emoji-button'     onClick={() => this.props.stepLog(1)}>{'\u23E9'}</span>
             </div>
             <div>
-              Delay:
+              Delay:{' '}
               <DelaySelector
                 value={this.props.replayTimerDelay}
                 onChange={(evt) => this.props.setDelay(+evt.currentTarget.value)}
               />
             </div>
           </div>
-          <div>(hover to highlight, shift-up/down to navigate)</div>
+          <div className='hint'>
+            (hover to highlight, shift-up/down to navigate)
+          </div>
         </div>
         <LogEntries
           entries={this.props.logEntries}

src/react-lifecycle-visualizer.scss

@@ -1,24 +1,27 @@
+$codeFont: Consolas, monospace;
+$uiFont: arial, sans-serif;
+
 .log {
   padding: 3px 8px 5px 8px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
 
   .header {
+    font-family: $uiFont;
     flex-basis: 3ex;
     flex-shrink: 0;
     user-select: none;
-    line-height: 24px;
 
     .controls {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      line-height: 22px;
 
       .title {
         font-size: 130%;
         font-weight: bold;
-        // margin-right: 20px;
       }
 
       .buttons {
@@ -28,13 +31,21 @@
         .emoji-button {
           font-size: 140%;
           position: relative;
-          top: 3px;
+          top: 0.5px;
         }
       }
     }
+
+    .hint {
+      padding-top: 2px;
+      font-family: $codeFont;
+      line-height: 20px;
+      text-align: left;
+    }
   }
 
   .entries {
+    font-family: $codeFont;
     flex-grow: 1;
     overflow-y: scroll;
     background-color: #f0f0f0;
@@ -44,11 +55,15 @@
       animation-name: emphasize;
       animation-duration: 10s;
     }
+
     @keyframes emphasize {
       from {background-color: lightblue;}
       to {background-color: inherit;}
     }
+
     .entry {
+      padding-left: 2px;
+      padding-right: 2px;
       white-space: pre;
       cursor: default;
     }
@@ -59,9 +74,10 @@
 
   .simple-button {
     display: inline-block;
-    padding: 2px 3px 0 3px;
+    padding: 1px 3px 0 3px;
     margin-bottom: 2px;
-    line-height: 15px;
+    height: 13px;
+    line-height: 12px;
     font-size: 12px;
     border: solid #aaa 1px;
     border-radius: 4px;
@@ -77,6 +93,7 @@
   padding: 2px 0 2px 0;
 }
 .lifecycle-panel-inner {
+  font-family: $codeFont;
   display: inline-flex;
   flex-shrink: 0;
   flex-direction: column;
@@ -95,6 +112,7 @@
     right: 0px;
     padding-right: 4px;
   }
+
   .lifecycle-method::BEFORE {
     content: '-';
   }