From b6a1045716763a2df409b65f902aa9169e1e0c0d Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Fri, 15 Jun 2018 12:06:50 +0200
Subject: [PATCH] adding design style to reset modal in settings as well

---
 src/components/IsUnlocked.js                  | 14 +++++--------
 .../SettingsPage/sections/Profile.js          | 20 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index e8ca9c8a..c0cb10e3 100644
--- a/src/components/IsUnlocked.js
+++ b/src/components/IsUnlocked.js
@@ -139,10 +139,10 @@ class IsUnlocked extends Component<Props, State> {
     }
   }
   hardResetIconRender = () => (
-      <IconWrapperCircle color="alertRed">
-        <IconTriangleWarning width={23} height={21} />
-      </IconWrapperCircle>
-    )
+    <IconWrapperCircle color="alertRed">
+      <IconTriangleWarning width={23} height={21} />
+    </IconWrapperCircle>
+  )
   render() {
     const { inputValue, incorrectPassword, isHardResetting, isHardResetModalOpened } = this.state
     const { isLocked, t } = this.props
@@ -166,11 +166,7 @@ class IsUnlocked extends Component<Props, State> {
                   type="password"
                   onChange={this.handleChangeInput('password')}
                   value={inputValue.password}
-                  error={
-                    incorrectPassword &&
-                    inputValue.password.length &&
-                    t('app:password.errorMessageIncorrectPassword')
-                  }
+                  error={incorrectPassword && t('app:password.errorMessageIncorrectPassword')}
                 />
               </Box>
               <Button type="button" mt={3} small onClick={this.handleOpenHardResetModal}>
diff --git a/src/components/SettingsPage/sections/Profile.js b/src/components/SettingsPage/sections/Profile.js
index d3557f09..703b1e99 100644
--- a/src/components/SettingsPage/sections/Profile.js
+++ b/src/components/SettingsPage/sections/Profile.js
@@ -2,6 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { remote } from 'electron'
 import bcrypt from 'bcryptjs'
 
@@ -19,6 +20,7 @@ import CheckBox from 'components/base/CheckBox'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import { ConfirmModal } from 'components/base/Modal'
+import IconTriangleWarning from 'icons/TriangleWarning'
 import IconUser from 'icons/User'
 import PasswordModal from '../PasswordModal'
 import DisablePasswordModal from '../DisablePasswordModal'
@@ -125,6 +127,12 @@ class TabProfile extends PureComponent<Props, State> {
     })
   }
 
+  hardResetIconRender = () => (
+    <IconWrapperCircle color="alertRed">
+      <IconTriangleWarning width={23} height={21} />
+    </IconWrapperCircle>
+  )
+
   render() {
     const { t, settings, saveSettings } = this.props
     const {
@@ -223,8 +231,8 @@ class TabProfile extends PureComponent<Props, State> {
           onReject={this.handleCloseHardResetModal}
           onConfirm={this.handleHardReset}
           title={t('app:settings.hardResetModal.title')}
-          subTitle={t('app:settings.hardResetModal.subTitle')}
           desc={t('app:settings.hardResetModal.desc')}
+          renderIcon={this.hardResetIconRender}
         />
 
         <PasswordModal
@@ -253,3 +261,13 @@ export default connect(
   null,
   mapDispatchToProps,
 )(TabProfile)
+
+// TODO: need a helper file for common styles across the app
+const IconWrapperCircle = styled(Box).attrs({})`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #ea2e4919;
+  text-align: -webkit-center;
+  justify-content: center;
+`