From fc597abbc98fa498108fe7688892a66a620d42e9 Mon Sep 17 00:00:00 2001
From: Lucian <lucian.buzzo@gmail.com>
Date: Wed, 4 Dec 2019 14:00:54 +0000
Subject: [PATCH] Add sourcemap and elevate theme provider

Signed-off-by: Lucian <lucian.buzzo@gmail.com>
---
 .../drive-selector/target-selector.jsx        | 29 ++++----
 .../image-selector/image-selector.jsx         |  1 -
 lib/gui/app/pages/main/DriveSelector.jsx      | 70 ++++++++++---------
 lib/gui/app/pages/main/main.js                |  1 -
 lib/gui/app/theme.js                          |  1 +
 webpack.config.js                             |  3 +-
 6 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/lib/gui/app/components/drive-selector/target-selector.jsx b/lib/gui/app/components/drive-selector/target-selector.jsx
index 9706b89a..27b846ad 100644
--- a/lib/gui/app/components/drive-selector/target-selector.jsx
+++ b/lib/gui/app/components/drive-selector/target-selector.jsx
@@ -26,8 +26,7 @@ const {
   ChangeButton,
   DetailsText,
   StepButton,
-  StepNameButton,
-  ThemedProvider
+  StepNameButton
 } = 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
-        tabindex={(targets.length > 0) ? -1 : 2 }
-        disabled={props.disabled}
-        onClick={props.openDriveSelector}
-      >
-        Select target
-      </StepButton>
-    </ThemedProvider>
+    <StepButton
+      tabindex={(targets.length > 0) ? -1 : 2 }
+      disabled={props.disabled}
+      onClick={props.openDriveSelector}
+    >
+      Select target
+    </StepButton>
   )
 }
 
diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx
index 74c63560..1d5e8c9b 100644
--- a/lib/gui/app/components/image-selector/image-selector.jsx
+++ b/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,
diff --git a/lib/gui/app/pages/main/DriveSelector.jsx b/lib/gui/app/pages/main/DriveSelector.jsx
index a6baf852..bd7828a0 100644
--- a/lib/gui/app/pages/main/DriveSelector.jsx
+++ b/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 && (
-        <React.Fragment>
-          <div
-            className="step-border-left"
+        {showStepConnectingLines && (
+          <React.Fragment>
+            <div
+              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
-            className="step-border-right"
-            disabled={nextStepDisabled}
-          ></div>
-        </React.Fragment>
-      )}
+          />
+        </div>
 
-      <div className="center-block">
-        <SvgIcon
-          paths={[ '../../assets/drive.svg' ]}
-          disabled={disabled}
-        />
+        <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>
-
-      <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>
+    </ThemedProvider>
   )
 }
 
diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js
index 7af9a48e..76ec8ee2 100644
--- a/lib/gui/app/pages/main/main.js
+++ b/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'),
diff --git a/lib/gui/app/theme.js b/lib/gui/app/theme.js
index ca0549fb..9e566a51 100644
--- a/lib/gui/app/theme.js
+++ b/lib/gui/app/theme.js
@@ -15,6 +15,7 @@
  */
 
 'use strict'
+
 exports.colors = {
   dark: {
     foreground: '#fff',
diff --git a/webpack.config.js b/webpack.config.js
index b0bc3bd0..3099ed62 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -79,7 +79,8 @@ const guiConfig = {
   },
   entry: {
     gui: path.join(__dirname, 'lib', 'gui', 'app', 'app.js')
-  }
+  },
+  devtool: 'source-map'
 }
 
 const etcherConfig = {