Update text, adjust some small styling issues, fill out Readme

Medium · Oct 16, 2017 · 32fa9c1 · 32fa9c1
1 parent 2de8c67
commit 32fa9c1
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,17 @@
 # Snowflake
 
-## Environment
+Snowflake is Medium's tool for planning and supporting our engineers' career development. You can read more
+about how we use this tool in our [growth framework documentation](https://medium.com/s/engineering-growth-framework).
+Our growth tool is hosted [publicly](https://snowflake.medium.com).
+
+![The Lannisters send their regards](https://i.imgur.com/e9DYLBr.png)
+
+## Contributions
+
+You are free to use, change and build on this work to make it useful for your organisation. We will happily consider
+unencumbered code contributions to improve functionality, but as this is the actual tool we use within Medium, acceptance is likely to be intentional, and deliberate. Meaning, slow. As such, you may prefer to fork the codebase for your own needs. We will not accept any contributions that modify the text of the application (but, thank you in advance for pointing out any typos).
+
+## Installation
 
 Get yarn if you don’t have it already:
 
@@ -10,12 +21,17 @@ Install dependencies:
 
 `yarn`
 
-## Running the dev server
+### Running the dev server
 
 `yarn dev`
 
-## Building
+### Building
 
 `yarn export`
 
 This will put a static version of the site in `out/`.
+
+## Future work
+
+* Load initial data from a file, to improve flexibility.
+* Add restricted job title selection and validation.
diff --git a/components/LevelThermometer.js b/components/LevelThermometer.js
@@ -110,10 +110,10 @@ class LevelThermometer extends React.Component<Props> {
               )
             })}
             <g ref={ref => this.topAxis = ref} className="top-axis"
-                transform={`translate(0, -4)`}
+                transform={`translate(0, -2)`}
                 />
             <g ref={ref => this.bottomAxis = ref} className="bottom-axis"
-                transform={`translate(0,${height - margins.top - margins.bottom + 3})`}
+                transform={`translate(0,${height - margins.top - margins.bottom + 1})`}
                 />
           </g>
         </svg>

diff --git a/components/PointSummaries.js b/components/PointSummaries.js
@@ -29,14 +29,14 @@ class PointSummaries extends React.Component<Props> {
     }
 
     const blocks = [
-      {
-        label: 'Total points',
-        value: totalPoints
-      },
       {
         label: 'Current level',
         value: currentLevel
       },
+      {
+        label: 'Total points',
+        value: totalPoints
+      },
       {
         label: 'Points to next level',
         value: pointsToNextLevel
@@ -52,7 +52,7 @@ class PointSummaries extends React.Component<Props> {
             margin-left: -3px;
           }
           .point-summary-label {
-            font-size: 14px;
+            font-size: 12px;
             text-align: center;
             font-weight: normal;
             width: 120px;
@@ -62,7 +62,7 @@ class PointSummaries extends React.Component<Props> {
             background: #eee;
             font-size: 24px;
             font-weight: bold;
-            line-height: 40px;
+            line-height: 50px;
             border-radius: 2px;
             text-align: center;
           }

diff --git a/components/SnowflakeApp.js b/components/SnowflakeApp.js
@@ -136,22 +136,28 @@ class SnowflakeApp extends React.Component<Props, SnowflakeAppState> {
           }
           .name-input {
             border: none;
-            border-bottom: 2px solid #ccc;
             display: block;
+            border-bottom: 2px solid #fff;
             font-size: 30px;
             line-height: 40px;
             font-weight: bold;
-            width: 100%;
+            width: 380px;
+          }
+          .name-input:hover, .name-input:focus {
+            border-bottom: 2px solid #ccc;
           }
           .title-input {
             border: none;
-            border-bottom: 2px solid #ccc;
+            border-bottom: 2px solid #fff;
             display: block;
-            font-size: 20px;
-            line-height: 40px;
-            font-weight: bold;
-            width: 100%;
-            margin-bottom: 30px;
+            color: #888
+            font-size: 24px;
+            line-height: 30px;
+            width: 380px;
+            margin-bottom: 20px;
+          }
+          .title-input:hover, .title-input:focus {
+            border-bottom: 2px solid #ccc;
           }
         `}</style>
         <div style={{display: 'flex'}}>

diff --git a/components/Track.js b/components/Track.js
@@ -22,7 +22,7 @@ class Track extends React.Component<Props> {
             margin: 0;
           }
           h2 {
-            margin: 0;
+            margin: 0 0 10px 0;
           }
           p.track-description {
             margin-top: 0;
@@ -66,7 +66,7 @@ class Track extends React.Component<Props> {
           </table>
           {currentMilestone ? (
             <div style={{flex: 1}}>
-              <p>{currentMilestone.summary}</p>
+              <h3>{currentMilestone.summary}</h3>
               <h4>Example behaviors:</h4>
               <ul>
                 {currentMilestone.signals.map((signal, i) => (

diff --git a/components/TrackSelector.js b/components/TrackSelector.js
@@ -19,8 +19,8 @@ class TrackSelector extends React.Component<Props> {
             width: 100%;
             border-spacing: 3px;
             border-bottom: 2px solid #ccc;
-            padding-bottom: 25px;
-            margin-bottom: 25px;
+            padding-bottom: 20px;
+            margin-bottom: 20px;
             margin-left: -3px;
           }
           .track-selector-value {