Add sourcemap and elevate theme provider

Signed-off-by: Lucian <lucian.buzzo@gmail.com>

lib/gui/app/components/drive-selector/target-selector.jsx

@@ -26,8 +26,7 @@ const {
   ChangeButton,
   DetailsText,
   StepButton,
-  StepNameButton,
+  StepNameButton
-  ThemedProvider
 } = require('./../../styled-components')
 const { Txt } = require('rendition')
 const middleEllipsis = require('./../../utils/middle-ellipsis')
@@ -66,7 +65,7 @@ const TargetSelector = (props) => {
   if (targets.length === 1) {
     const target = targets[0]
     return (
-      <ThemedProvider>
+      <React.Fragment>
         <StepNameButton
           plain
           tooltip={props.tooltip}
@@ -74,7 +73,7 @@ const TargetSelector = (props) => {
           {/* eslint-disable no-magic-numbers */}
           { middleEllipsis(target.description, 20) }
         </StepNameButton>
-        { !props.flashing &&
+        {!props.flashing &&
           <ChangeButton
             plain
             mb={14}
@@ -94,7 +93,7 @@ const TargetSelector = (props) => {
           }
           { bytesToClosestUnit(target.size) }
         </DetailsText>
-      </ThemedProvider>
+      </React.Fragment>
     )
   }
 
@@ -118,7 +117,7 @@ const TargetSelector = (props) => {
       ))
     }
     return (
-      <ThemedProvider>
+      <React.Fragment>
         <StepNameButton
           plain
           tooltip={props.tooltip}
@@ -135,20 +134,18 @@ const TargetSelector = (props) => {
           </ChangeButton>
         }
         {targetsTemplate}
-      </ThemedProvider>
+      </React.Fragment>
     )
   }
 
   return (
-    <ThemedProvider>
+    <StepButton
-      <StepButton
+      tabindex={(targets.length > 0) ? -1 : 2 }
-        tabindex={(targets.length > 0) ? -1 : 2 }
+      disabled={props.disabled}
-        disabled={props.disabled}
+      onClick={props.openDriveSelector}
-        onClick={props.openDriveSelector}
+    >
-      >
+      Select target
-        Select target
+    </StepButton>
-      </StepButton>
-    </ThemedProvider>
   )
 }
 

lib/gui/app/components/image-selector/image-selector.jsx

@@ -120,7 +120,6 @@ class ImageSelector extends React.Component {
   }
 
   reselectImage () {
-    console.log('reselecting image')
     analytics.logEvent('Reselect image', {
       previousImage: selectionState.getImage(),
       applicationSessionUuid: store.getState().toJS().applicationSessionUuid,

lib/gui/app/pages/main/DriveSelector.jsx

@@ -20,6 +20,9 @@ const _ = require('lodash')
 const prettyBytes = require('pretty-bytes')
 const propTypes = require('prop-types')
 const React = require('react')
+const {
+  ThemedProvider
+} = require('../../styled-components')
 const driveConstraints = require('../../../../shared/drive-constraints')
 const utils = require('../../../../shared/utils')
 const TargetSelector = require('../../components/drive-selector/target-selector')
@@ -195,43 +198,44 @@ const DriveSelector = ({
   const showStepConnectingLines = !webviewShowing || !flashing
 
   return (
-    <div className="box text-center relative">
+    <ThemedProvider>
+      <div className="box text-center relative">
 
-      {showStepConnectingLines && (
+        {showStepConnectingLines && (
-        <React.Fragment>
+          <React.Fragment>
-          <div
+            <div
-            className="step-border-left"
+              className="step-border-left"
+              disabled={disabled}
+            ></div>
+            <div
+              className="step-border-right"
+              disabled={nextStepDisabled}
+            ></div>
+          </React.Fragment>
+        )}
+
+        <div className="center-block">
+          <SvgIcon
+            paths={[ '../../assets/drive.svg' ]}
             disabled={disabled}
-          ></div>
+          />
-          <div
+        </div>
-            className="step-border-right"
-            disabled={nextStepDisabled}
-          ></div>
-        </React.Fragment>
-      )}
 
-      <div className="center-block">
+        <div className="space-vertical-large">
-        <SvgIcon
+          <TargetSelector
-          paths={[ '../../assets/drive.svg' ]}
+            disabled={disabled}
-          disabled={disabled}
+            show={!hasDrive && showDrivesButton}
-        />
+            tooltip={driveListLabel}
+            selection={selectionState}
+            openDriveSelector={() => openDriveSelector(DriveSelectorService)}
+            reselectDrive={() => reselectDrive(DriveSelectorService)}
+            flashing={flashing}
+            constraints={driveConstraints}
+            targets={targets}
+          />
+        </div>
       </div>
-
+    </ThemedProvider>
-      <div className="space-vertical-large">
-        <TargetSelector
-          disabled={disabled}
-          show={!hasDrive && showDrivesButton}
-          tooltip={driveListLabel}
-          selection={selectionState}
-          openDriveSelector={() => openDriveSelector(DriveSelectorService)}
-          reselectDrive={() => reselectDrive(DriveSelectorService)}
-          flashing={flashing}
-          constraints={driveConstraints}
-          targets={targets}
-        />
-      </div>
-
-    </div>
   )
 }
 

lib/gui/app/pages/main/main.js

@@ -30,7 +30,6 @@ const MainPage = angular.module(MODULE_NAME, [
   require('angular-ui-router'),
 
   require('../../components/drive-selector/drive-selector'),
-  require('../../components/tooltip-modal/tooltip-modal'),
   require('../../components/image-selector'),
   require('../../components/file-selector'),
   require('../../components/featured-project'),

lib/gui/app/theme.js

@@ -15,6 +15,7 @@
  */
 
 'use strict'
+
 exports.colors = {
   dark: {
     foreground: '#fff',

webpack.config.js

@@ -79,7 +79,8 @@ const guiConfig = {
   },
   entry: {
     gui: path.join(__dirname, 'lib', 'gui', 'app', 'app.js')
-  }
+  },
+  devtool: 'source-map'
 }
 
 const etcherConfig = {