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,12 +134,11 @@ const TargetSelector = (props) => {
           </ChangeButton>
         }
         {targetsTemplate}
-      </ThemedProvider>
+      </React.Fragment>
     )
   }
 
   return (
-    <ThemedProvider>
     <StepButton
       tabindex={(targets.length > 0) ? -1 : 2 }
       disabled={props.disabled}
@@ -148,7 +146,6 @@ const TargetSelector = (props) => {
     >
       Select target
     </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,6 +198,7 @@ const DriveSelector = ({
   const showStepConnectingLines = !webviewShowing || !flashing
 
   return (
+    <ThemedProvider>
       <div className="box text-center relative">
 
         {showStepConnectingLines && (
@@ -230,8 +234,8 @@ const DriveSelector = ({
             targets={targets}
           />
         </div>
-
       </div>
+    </ThemedProvider>
   )
 }
 

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 = {