style(GUI): capitalize every text for consitency purposes (#1056)

Fixes: https://github.com/resin-io/etcher/issues/881
Change-Type: patch
Changelog-Entry: Capitalize every text throughout the application.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h4 class="modal-title">SELECT A DRIVE</h4>
+  <h4 class="modal-title">Select a Drive</h4>
   <button class="close" ng-click="modal.closeModal()">&times;</button>
 </div>
 
@@ -18,7 +18,7 @@
             <span class="label label-warning"
                 ng-show="modal.constraints.isDriveLargeEnough(drive, modal.state.getImage()) && !modal.constraints.isDriveLocked(drive) && !modal.constraints.isDriveSizeRecommended(drive, modal.state.getImage())">
                 <i class="glyphicon glyphicon-warning-sign"></i>
-                NOT RECOMMENDED</span>
+                Not Recommended</span>
 
             <!-- There can be a case where the device it not large enough, and it's also locked. -->
             <!-- Since in this case both labels will be displayed, we chose to only show the -->
@@ -28,17 +28,17 @@
             <span class="label label-danger"
               ng-hide="modal.constraints.isDriveLargeEnough(drive, modal.state.getImage())">
                 <i class="glyphicon glyphicon-resize-small"></i>
-                TOO SMALL FOR IMAGE</span>
+                Too Small For Image</span>
 
             <span class="label label-danger"
               ng-show="modal.constraints.isDriveLocked(drive) && modal.constraints.isDriveLargeEnough(drive, modal.state.getImage())">
                 <i class="glyphicon glyphicon-lock"></i>
-                LOCKED</span>
+                Locked</span>
 
             <span class="label label-danger"
               ng-show="modal.constraints.isSystemDrive(drive)">
                 <i class="glyphicon glyphicon-hdd"></i>
-                SYSTEM DRIVE</span>
+                System Drive</span>
 
           </footer>
         </div>

lib/gui/components/modal/styles/_modal.scss

@@ -25,8 +25,7 @@
 .modal-header {
   display: flex;
   align-items: baseline;
-  text-transform: uppercase;
+  font-size: 12px;
-  font-size: 11px;
   color: $palette-theme-light-soft-foreground;
   padding: 11px 20px;
   flex-grow: 0;

lib/gui/css/main.css

@@ -6227,8 +6227,7 @@ body {
 .modal-header {
   display: flex;
   align-items: baseline;
-  text-transform: uppercase;
+  font-size: 12px;
-  font-size: 11px;
   color: #b3b3b3;
   padding: 11px 20px;
   flex-grow: 0; }
@@ -6446,24 +6445,6 @@ body {
   background-color: #f2f2f2;
   word-wrap: break-word; }
 
-/*
- * Copyright 2016 resin.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-.modal-flash-error-modal .modal-title .glyphicon, .modal-flash-error-modal .modal-title .tick {
-  color: #d9534f; }
-
 /*
  * Copyright 2016 resin.io
  *

lib/gui/index.html

@@ -41,7 +41,7 @@
         os-open-external="https://etcher.io?ref=etcher_footer"></svg-icon>
 
       <span class="caption">
-        IS <span class="caption" os-open-external="https://github.com/resin-io/etcher">AN OPEN SOURCE PROJECT</span> BY
+        is <span class="caption" os-open-external="https://github.com/resin-io/etcher">an open source project</span> by
       </span>
 
       <svg-icon path="../../../assets/resin.svg"

lib/gui/pages/main/templates/main.tpl.html

@@ -5,7 +5,7 @@
       <svg-icon class="center-block"
         path="../../../assets/drive.svg"
         ng-disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
-      <span class="icon-caption">SELECT DRIVE</span>
+      <span class="icon-caption">Select Drive</span>
 
       <span class="badge space-top-medium">1</span>
 
@@ -47,7 +47,7 @@
         ng-disabled="main.shouldImageStepBeDisabled()"></svg-icon>
       <span
         class="icon-caption"
-        ng-disabled="main.shouldImageStepBeDisabled()">SELECT IMAGE</span>
+        ng-disabled="main.shouldImageStepBeDisabled()">Select Image</span>
       <span
         class="badge space-top-medium"
         ng-disabled="main.shouldImageStepBeDisabled()">2</span>
@@ -75,7 +75,7 @@
             <span class="glyphicon glyphicon-info-sign"
               ng-class="{ 'text-disabled': main.shouldImageStepBeDisabled() }"
               ng-click="main.tooltipModal.show({
-                title: 'IMAGE FILE NAME',
+                title: 'Image File Name',
                 message: main.selection.getImagePath()
               })"></span>
           </div>
@@ -94,7 +94,7 @@
         path="../../../assets/flash.svg"
         ng-disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
       <span class="icon-caption"
-        ng-disabled="main.shouldFlashStepBeDisabled()">FLASH IMAGE</span>
+        ng-disabled="main.shouldFlashStepBeDisabled()">Flash Image</span>
 
       <span class="badge space-top-medium" ng-disabled="main.shouldFlashStepBeDisabled()">3</span>
 

lib/gui/pages/settings/templates/settings.tpl.html

@@ -50,7 +50,7 @@
           description: 'Are you sure you want to turn this on? You will be able to overwrite your system drives if you\'re not careful.',
           confirmationLabel: 'Enable unsafe mode'
         })">
-      <span>Unsafe mode <span class="label label-danger">DANGEROUS</span></span>
+      <span>Unsafe mode <span class="label label-danger">Dangerous</span></span>
     </label>
   </div>
 </div>

lib/gui/scss/main.scss

@@ -35,7 +35,6 @@ $link-color: #ddd;
 @import "../components/progress-button/styles/progress-button";
 @import "../components/drive-selector/styles/drive-selector";
 @import "../components/tooltip-modal/styles/tooltip-modal";
-@import "../components/flash-error-modal/styles/flash-error-modal";
 @import "../components/warning-modal/styles/warning-modal";
 @import "../pages/main/styles/main";
 @import "../pages/settings/styles/settings";