From 943d62dd8ce7e8059176f9c335888ba1d183fa5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 20 Nov 2015 17:59:26 +0100
Subject: [PATCH] Fix vertical centering of FileDragAndDrop previews and
 replace glyphicon checkmark

---
 .../file_drag_and_drop_preview_image.js                   | 3 +--
 .../file_drag_and_drop_preview_iterator.js                | 4 +---
 .../file_drag_and_drop_preview_other.js                   | 3 +--
 .../file_drag_and_drop_preview_progress.js                | 5 ++---
 .../ascribe_upload_button/upload_button.js                | 3 ++-
 .../components/ascribe_buttons/submit_to_prize_button.js  | 5 +++--
 .../cyland_accordion_list/cyland_accordion_list_item.js   | 8 ++++----
 .../ikonotv_accordion_list/ikonotv_accordion_list_item.js | 8 ++++----
 sass/ascribe-fonts/ascribe-fonts.scss                     | 1 +
 sass/ascribe_uploader.scss                                | 6 +++---
 10 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
index b5cf4694..927a5b22 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
@@ -62,8 +62,7 @@ const FileDragAndDropPreviewImage = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span
-                    className="glyphicon glyphicon-ok action-file" />
+                <span className='ascribe-icon icon-ascribe-ok action-file'/>
             );
         }
 
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js
index be07b0f5..982544b4 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_iterator.js
@@ -31,11 +31,9 @@ let FileDragAndDropPreviewIterator = React.createClass({
         } = this.props;
         files = files.filter(displayValidFilesFilter);
 
-        const style = files && files.length > 1 ? {marginTop: '2.5em'} : null;
-
         if(files && files.length > 0) {
             return (
-                <div style={style}>
+                <div>
                     {files.map((file, i) => {
                         return (
                             <FileDragAndDropPreview
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
index d293a138..e5e7c947 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
@@ -66,8 +66,7 @@ const FileDragAndDropPreviewOther = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span
-                    className="glyphicon glyphicon-ok action-file" />
+                <span className='ascribe-icon icon-ascribe-ok action-file'/>
             );
         }
 
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
index d8ffbba9..302837d5 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
@@ -5,10 +5,9 @@ import React from 'react';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
-import { getLangText } from '../../../utils/lang_utils';
 
 
-let FileDragAndDropPreviewProgress = React.createClass({
+const FileDragAndDropPreviewProgress = React.createClass({
     propTypes: {
         files: React.PropTypes.array
     },
@@ -45,7 +44,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
         let overallProgress = this.calcOverallProgress();
 
         return (
-            <div style={{marginTop: '2em'}}>
+            <div style={{marginTop: '1.3em'}}>
                 <ProgressBar
                     now={Math.ceil(overallProgress)}
                     label={'%(percent)s%'}
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 028c2508..09516457 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -93,8 +93,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             if(uploadedFile) {
                 return (
                     <span>
-                        <Glyphicon glyph="ok" />
+                        <span className='ascribe-icon icon-ascribe-ok'/>
                         {' ' + truncateTextAtCharIndex(uploadedFile.name, 40)}
+
                     </span>
                 );
             } else {
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/submit_to_prize_button.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/submit_to_prize_button.js
index 8ceb87ea..b10b8da6 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/submit_to_prize_button.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_buttons/submit_to_prize_button.js
@@ -8,6 +8,7 @@ import PieceSubmitToPrizeForm from '../../../../../ascribe_forms/form_submit_to_
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 
+
 let SubmitToPrizeButton = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
@@ -21,8 +22,8 @@ let SubmitToPrizeButton = React.createClass({
                 <button
                     disabled
                     className="btn btn-default btn-xs pull-right">
-                    {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
-                                                              aria-hidden="true"></span>
+                    {getLangText('Submitted to prize') + ' '}
+                    <span className='ascribe-icon icon-ascribe-ok'/>
                 </button>
             );
         }
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
index 9802e93e..9d88408f 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
@@ -76,8 +76,8 @@ let CylandAccordionListItem = React.createClass({
                     <button
                     disabled
                     className="btn btn-default btn-xs pull-right">
-                        {getLangText('Submitted to Cyland')} <span className="glyphicon glyphicon-ok"
-                                                                  aria-hidden="true"></span>
+                        {getLangText('Submitted to Cyland') + ' '}
+                        <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
                 <AclProxy
@@ -86,8 +86,8 @@ let CylandAccordionListItem = React.createClass({
                     <button
                     disabled
                     className="btn btn-default btn-xs pull-right">
-                        {getLangText('Loaned to Cyland')} <span className="glyphicon glyphicon-ok"
-                                                                  aria-hidden="true"></span>
+                        {getLangText('Loaned to Cyland') + ' '}
+                        <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
             </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
index f2f73767..ce8cebf5 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
@@ -81,8 +81,8 @@ let IkonotvAccordionListItem = React.createClass({
                     <button
                     disabled
                     className="btn btn-default btn-xs pull-right">
-                        {getLangText('Submitted to IkonoTV')} <span className="glyphicon glyphicon-ok"
-                                                                  aria-hidden="true"></span>
+                        {getLangText('Submitted to IkonoTV') + ' '}
+                        <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
                 <AclProxy
@@ -91,8 +91,8 @@ let IkonotvAccordionListItem = React.createClass({
                     <button
                     disabled
                     className="btn btn-default btn-xs pull-right">
-                        {getLangText('Loaned to IkonoTV')} <span className="glyphicon glyphicon-ok"
-                                                                  aria-hidden="true"></span>
+                        {getLangText('Loaned to IkonoTV') + ' '}
+                        <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
             </div>
diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss
index bdd428ca..11b42851 100644
--- a/sass/ascribe-fonts/ascribe-fonts.scss
+++ b/sass/ascribe-fonts/ascribe-fonts.scss
@@ -83,6 +83,7 @@
 
 .icon-ascribe-ok:before {
     content: "\e809";
+    font-size: .7em;
 }
 
 .btn-glyph-ascribe {
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index d036ca72..8f9c46b4 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -118,9 +118,10 @@
         color: #d9534f;
     }
 
-    &.glyphicon-ok, &.glyphicon-ok:hover {
+    &.icon-ascribe-ok, &.icon-ascribe-ok:hover {
         cursor: default;
         color: lighten($ascribe--button-default-color, 20%);
+        font-size: 5em;
     }
 }
 
@@ -145,7 +146,6 @@
     }
 }
 
-
 .file-drag-and-drop-preview-other {
     display: table-cell;
     text-align: center;
@@ -155,7 +155,7 @@
         margin-top: 5px;
     }
 
-    .action-file, .spinner-file {
+    .action-file:not(.icon-ascribe-ok), .spinner-file {
         margin-top: 0;
         position: relative;
         top: .3em;