From f645388b37043a4716f8968cf5a1a1f719a8320d Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Tue, 3 Jul 2018 18:21:37 +0200
Subject: [PATCH] polish update modals

---
 src/components/modals/UpdateFirmware/index.js |  1 +
 .../steps/01-step-install-full-firmware.js    | 24 ++++++++++++-------
 .../UpdateFirmware/steps/02-step-flash-mcu.js |  2 +-
 .../steps/03-step-confirmation.js             |  2 +-
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/modals/UpdateFirmware/index.js b/src/components/modals/UpdateFirmware/index.js
index 4d10ad60..7eb99708 100644
--- a/src/components/modals/UpdateFirmware/index.js
+++ b/src/components/modals/UpdateFirmware/index.js
@@ -116,6 +116,7 @@ class UpdateModal extends PureComponent<Props, State> {
         preventBackdropClick={stepId !== 'finish'}
         render={() => (
           <Stepper
+            onStepChange={this.handleStepChange}
             title={t('app:manager.firmware.update')}
             initialStepId={stepId}
             steps={this.STEPS}
diff --git a/src/components/modals/UpdateFirmware/steps/01-step-install-full-firmware.js b/src/components/modals/UpdateFirmware/steps/01-step-install-full-firmware.js
index df989150..ac20baab 100644
--- a/src/components/modals/UpdateFirmware/steps/01-step-install-full-firmware.js
+++ b/src/components/modals/UpdateFirmware/steps/01-step-install-full-firmware.js
@@ -46,13 +46,7 @@ const Address = styled(Box).attrs({
   cursor: text;
   user-select: text;
   width: 325px;
-`
-
-const Ellipsis = styled.span`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
+  text-align: center;
 `
 
 type Props = StepProps & {
@@ -69,7 +63,7 @@ class StepFullFirmwareInstall extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    this.install()
+    // this.install()
   }
 
   componentWillUnmount() {
@@ -123,6 +117,18 @@ class StepFullFirmwareInstall extends PureComponent<Props, State> {
     }
   }
 
+  formatHashName = (hash: string): string[] => {
+    if (!hash) {
+      return []
+    }
+
+    const length = hash.length
+    const half = Math.ceil(length / 2)
+    const start = hash.slice(0, half)
+    const end = hash.slice(half)
+    return [start, end]
+  }
+
   renderBody = () => {
     const { installing } = this.state
     const { t, firmware } = this.props
@@ -141,7 +147,7 @@ class StepFullFirmwareInstall extends PureComponent<Props, State> {
             {t('app:manager.modal.identifier')}
           </Text>
           <Address>
-            <Ellipsis>{firmware && firmware.hash}</Ellipsis>
+            {firmware && firmware.hash && this.formatHashName(firmware.hash).join('\n')}
           </Address>
         </Box>
         <Box mt={5}>
diff --git a/src/components/modals/UpdateFirmware/steps/02-step-flash-mcu.js b/src/components/modals/UpdateFirmware/steps/02-step-flash-mcu.js
index 28e05685..5ab16a86 100644
--- a/src/components/modals/UpdateFirmware/steps/02-step-flash-mcu.js
+++ b/src/components/modals/UpdateFirmware/steps/02-step-flash-mcu.js
@@ -60,7 +60,7 @@ class StepFlashMcu extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    this.install()
+    // this.install()
   }
 
   componentWillUnmount() {
diff --git a/src/components/modals/UpdateFirmware/steps/03-step-confirmation.js b/src/components/modals/UpdateFirmware/steps/03-step-confirmation.js
index 553c0c5a..64318f96 100644
--- a/src/components/modals/UpdateFirmware/steps/03-step-confirmation.js
+++ b/src/components/modals/UpdateFirmware/steps/03-step-confirmation.js
@@ -31,7 +31,7 @@ function StepConfirmation({ t }: StepProps) {
         <CheckCircle size={44} />
       </Box>
       <Title>{t('app:manager.modal.successTitle')}</Title>
-      <Box mt={2} mb={8}>
+      <Box mt={2} mb={5}>
         <Text ff="Open Sans|Regular" fontSize={4} color="graphite">
           {t('app:manager.modal.successText')}
         </Text>