styling fixes (#2041)

* styling fixes * flag * Remove a colon Yes, @Pomax, I phrased this intentionally.
MozillaFoundation · Oct 25, 2018 · b27fb16 · b27fb16
1 parent 88a83bb
commit b27fb16
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test:eslint": "eslint --config ./.eslintrc.yaml \"source/js/**/*.js\" \"source/js/components/**/*.jsx\" webpack.config.js",
     "test:scss": "stylelint \"source/sass/**/*.scss\" \"source/js/components/**/*.scss\" --syntax scss",
     "test": "npm run build && run-s test:**",
-    "watch:images": "chokidar 'source/images/**/*' -c 'npm run build:images'",
+    "watch:images": "chokidar \"source/images/**/*\" -c \"npm run build:images\"",
     "watch:js": "chokidar \"source/js/**/*.js\" \"source/js/**/*.jsx\" -c \"npm run build:js-uncompressed\"",
     "watch:sass": "chokidar \"source/**/*.scss\" -c \"npm run build:sass\""
   },

diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
@@ -150,7 +150,7 @@ export default class CreepVote extends React.Component {
       <div className="row">
         <div className="col-12 text-center">
           <button id="creep-vote-btn" type="submit" className="btn btn-ghost mb-2" disabled={this.state.confidence===undefined}>Vote & See Results</button>
-          <p>{this.state.totalVotes} votes</p>
+          <p class="h6-heading-uppercase">{this.state.totalVotes} votes</p>
         </div>
       </div>
     </form>);
@@ -166,8 +166,8 @@ export default class CreepVote extends React.Component {
       <div>
         <div className="mb-5">
           <div className="col-12 text-center">
-            <h3 className="h5-heading mb-1">Thanks for voting! Here are the results so far:</h3>
-            <div className="text-muted">{this.state.totalVotes + 1} Votes</div>
+            <h3 className="h5-heading mb-1">Thanks for voting! Here are the results</h3>
+            <div className="h6-heading-uppercase text-muted">{this.state.totalVotes + 1} Votes</div>
           </div>
           <div className="row mt-3">
             <div className="col">

diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
@@ -26,6 +26,7 @@ $btn-shadow-width: 3px;
       padding: 0.5em 1.5em;
       text-transform: initial;
       transition: all 0.1s linear;
+      width: 9em;
     }
 
     input { display: none; }

diff --git a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.scss
@@ -47,7 +47,7 @@
 
   //Height of this is set inline via JSX
   .bar {
-    background-color: $light-gray;
+    background-color: #e1e1e1;
   }
 
   //Show a different creep-face in each bar of the graph

diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx
@@ -18,20 +18,20 @@ export default class LikelyhoodChart extends React.Component {
           <tbody>
             <tr className="likely">
               <th>
-                <span className="likely-label">Likely</span>
+                <span className="likely-label">likely</span>
               </th>
               <td className="likelyhood">
                 <span className="bar" style={{width: `${100 - perc}%`,}}></span>
-                <span className="likelyhood-words">{100 - perc}% Likely to buy it</span>
+                <span className="likelyhood-words">{100 - perc}% likely to buy it</span>
               </td>
             </tr>
             <tr className="unlikely">
               <th>
-                <span className="likely-label">Not likely</span>
+                <span className="likely-label">not likely</span>
               </th>
               <td className="likelyhood">
                 <span className="bar" style={{width: `${perc}%`,}}></span>
-                <span className="likelyhood-words">{perc}% Not likely to buy it</span>
+                <span className="likelyhood-words">{perc}% not likely to buy it</span>
               </td>
             </tr>
           </tbody>

diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.scss
@@ -10,7 +10,7 @@
   .bar {
     //For some nice animations later on, width set in JSX
     transition: width 2.5s ease;
-    background-color: $light-gray;
+    background-color: #e1e1e1;
     position: absolute;
     height: 25px;
   }
@@ -20,6 +20,10 @@
     display: block;
   }
 
+  .likelyhood {
+    white-space: nowrap;
+  }
+
   .likelyhood-words {
     position: relative;
     font-weight: bold;