Revert "Merge pull request #308 from brave/sync_img"

This reverts commit 2c16ae2.
brave · Dec 11, 2018 · c5e16c7 · c5e16c7
1 parent c4694e2
commit c5e16c7
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 99 deletions.
diff --git a/src/features/sync/images/index.ts b/src/features/sync/images/index.ts
diff --git a/src/features/sync/index.ts b/src/features/sync/index.ts
@@ -14,15 +14,19 @@ export {
 } from './grid'
 export {
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid,
   DeviceGrid,
   DeviceContainer,
+  DeviceImage,
   ViewSyncCodeGrid,
+  QRCode,
   ScanGrid,
+  MobileHandImage,
   QRCodeContainer,
   ThreeColumnButtonGrid,
   ThreeColumnButtonGridCol1,

diff --git a/src/features/sync/modal/index.ts b/src/features/sync/modal/index.ts
@@ -12,6 +12,11 @@ export const ModalHeader = styled<{}, 'header'>('header')`
   margin-bottom: 20px;
 `
 
+export const ModalIcon = styled<{}, 'img'>('img')`
+  margin-top: 3px;
+  height: 60px;
+`
+
 export const ModalTitle = styled(Heading)`
   font-weight: 500;
   font-size: 26px;
@@ -83,6 +88,11 @@ export const DeviceContainer = styled<{}, 'div'>('div')`
   align-items: center;
 `
 
+export const DeviceImage = styled<{}, 'img'>('img')`
+  margin-bottom: 20px;
+  height: 100px;
+`
+
 export const ScanGrid = styled<{}, 'div'>('div')`
   display: grid;
   height: 100%;
@@ -92,6 +102,11 @@ export const ScanGrid = styled<{}, 'div'>('div')`
   max-width: 550px;
 `
 
+export const MobileHandImage = styled<{}, 'img'>('img')`
+  max-width: 100%;
+  display: block;
+`
+
 export const QRCodeContainer = styled<{}, 'div'>('div')`
   display: flex;
   flex-direction: column;
@@ -110,3 +125,9 @@ export const ViewSyncCodeGrid = styled<{}, 'div'>('div')`
   grid-gap: 20px;
   margin: 0 0 25px;
 `
+
+export const QRCode = styled<{}, 'img'>('img')`
+  max-width: 100%;
+  display: block;
+  width: 140px;
+`
diff --git a/stories/assets/img/sync/qrCode.png b/stories/assets/img/sync/qrCode.png
diff --git a/src/features/sync/images/add_icon.svg → stories/assets/img/sync/sync_add_icon.svg b/src/features/sync/images/add_icon.svg → stories/assets/img/sync/sync_add_icon.svg
diff --git a/src/features/sync/images/desktop_icon.svg → stories/assets/img/sync/sync_desktop.svg b/src/features/sync/images/desktop_icon.svg → stories/assets/img/sync/sync_desktop.svg
diff --git a/src/features/sync/images/default_icon.svg → stories/assets/img/sync/sync_icon.svg b/src/features/sync/images/default_icon.svg → stories/assets/img/sync/sync_icon.svg
diff --git a/src/features/sync/images/mobile_icon.svg → stories/assets/img/sync/sync_mobile.svg b/src/features/sync/images/mobile_icon.svg → stories/assets/img/sync/sync_mobile.svg
diff --git a/src/features/sync/images/mobile_picture.png → ...es/assets/img/sync/sync_mobile_device.png b/src/features/sync/images/mobile_picture.png → ...es/assets/img/sync/sync_mobile_device.png
diff --git a/src/features/sync/images/remove_icon.svg → stories/assets/img/sync/sync_remove_icon.svg b/src/features/sync/images/remove_icon.svg → stories/assets/img/sync/sync_remove_icon.svg
diff --git a/src/features/sync/images/start_icon.svg → stories/assets/img/sync/sync_start.svg b/src/features/sync/images/start_icon.svg → stories/assets/img/sync/sync_start.svg
diff --git a/stories/features/sync/disabledContent.tsx b/stories/features/sync/disabledContent.tsx
@@ -21,8 +21,7 @@ import {
 import DeviceType from './modals/deviceType'
 import EnterSyncCode from './modals/enterSyncCode'
 
-// Images
-import { SyncStartIcon } from '../../../src/features/sync/images'
+const syncStart = require('../../assets/img/sync/sync_start.svg')
 
 // Utils
 import { getLocale } from './page/fakeLocale'
@@ -69,7 +68,7 @@ export default class SyncDisabledContent extends React.PureComponent<{}, State>
             : null
         }
         <TableGrid>
-          <SyncStartIcon />
+          <img src={syncStart} />
           <div>
             <Title level={2}>{getLocale('syncTitle')}</Title>
             <Paragraph>{getLocale('syncDescription')}</Paragraph>

diff --git a/stories/features/sync/modals/addNewChainCameraOption.tsx b/stories/features/sync/modals/addNewChainCameraOption.tsx
@@ -10,10 +10,7 @@ import Modal from '../../../../src/components/popupModals/modal'
 import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
 
 // Feature-specific components
-import { ModalHeader, ModalTitle, ModalSubTitle, ModalContent, ThreeColumnButtonGrid, ThreeColumnButtonGridCol2, ThreeColumnButtonGridCol1 } from '../../../../src/features/sync'
-
-// Images
-import { SyncAddIcon } from '../../../../src/features/sync/images'
+import { ModalHeader, ModalTitle, ModalIcon, ModalSubTitle, ModalContent, ThreeColumnButtonGrid, ThreeColumnButtonGridCol2, ThreeColumnButtonGridCol1 } from '../../../../src/features/sync'
 
 // Modals
 import ScanCode from './scanCode'
@@ -22,6 +19,9 @@ import ScanCode from './scanCode'
 import { getLocale } from '../page/fakeLocale'
 import data from '../page/fakeData'
 
+// Images
+import syncAddIcon from '../../../assets/img/sync/sync_add_icon.svg'
+
 interface Props {
   fromMobileScreen?: boolean
   onClose: () => void
@@ -54,7 +54,7 @@ export default class AddNewChainCameraOptionModal extends React.PureComponent<Pr
             : null
         }
         <ModalHeader>
-          <SyncAddIcon />
+          <ModalIcon src={syncAddIcon} />
           <div>
             <ModalTitle level={1}>
               {

diff --git a/stories/features/sync/modals/addNewChainNoCamera.tsx b/stories/features/sync/modals/addNewChainNoCamera.tsx
@@ -12,20 +12,21 @@ import TextAreaClipboard from '../../../../src/components/formControls/textareaC
 // Feature-specific components
 import {
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid
 } from '../../../../src/features/sync'
 
-// Images
-import { SyncAddIcon } from '../../../../src/features/sync/images'
-
 // Utils
 import { getLocale } from '../page/fakeLocale'
 import data from '../page/fakeData'
 
+// Images
+import syncAddIcon from '../../../assets/img/sync/sync_add_icon.svg'
+
 interface Props {
   onClose: () => void
 }
@@ -36,7 +37,7 @@ export default class AddNewChainNoCameraModal extends React.PureComponent<Props,
     return (
       <Modal id='addNewChainNoCameraModal' onClose={onClose} size='small'>
         <ModalHeader>
-          <SyncAddIcon />
+          <ModalIcon src={syncAddIcon} />
           <div>
             <ModalTitle level={1}>{getLocale('enterThisCode')}</ModalTitle>
             <ModalSubTitle>{getLocale('syncChainCodeHowTo')}</ModalSubTitle>

diff --git a/stories/features/sync/modals/deviceType.tsx b/stories/features/sync/modals/deviceType.tsx
@@ -11,22 +11,26 @@ import Modal from '../../../../src/components/popupModals/modal'
 // Feature-specific components
 import {
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   DeviceGrid,
   DeviceContainer,
+  DeviceImage,
   ModalSubTitle
 } from '../../../../src/features/sync'
 
-// Images
-import { SyncAddIcon, SyncMobileIcon, SyncDesktopIcon } from '../../../../src/features/sync/images'
-
 // Modals
 import AddNewChainNoCamera from './addNewChainNoCamera'
 import ScanCode from './scanCode'
 
 // Utils
 import { getLocale } from '../page/fakeLocale'
 
+// Images
+import syncMobileImg from '../../../assets/img/sync/sync_mobile.svg'
+import syncDesktopImg from '../../../assets/img/sync/sync_desktop.svg'
+import syncAddIcon from '../../../assets/img/sync/sync_add_icon.svg'
+
 interface Props {
   mainDeviceName: string
   onClose: () => void
@@ -70,15 +74,15 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
             : null
         }
         <ModalHeader>
-          <SyncAddIcon />
+          <ModalIcon src={syncAddIcon} />
           <div>
             <ModalTitle level={1}>{getLocale('letsSync')}<br />“{mainDeviceName}”.</ModalTitle>
             <ModalSubTitle>{getLocale('chooseDeviceType')}</ModalSubTitle>
           </div>
         </ModalHeader>
         <DeviceGrid>
           <DeviceContainer>
-            <SyncMobileIcon />
+            <DeviceImage src={syncMobileImg} />
             <Button
               level='primary'
               type='accent'
@@ -88,7 +92,7 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
             />
           </DeviceContainer>
           <DeviceContainer>
-            <SyncDesktopIcon />
+          <DeviceImage src={syncDesktopImg} />
             <Button
               level='primary'
               type='accent'

diff --git a/stories/features/sync/modals/enterSyncCode.tsx b/stories/features/sync/modals/enterSyncCode.tsx
@@ -13,6 +13,7 @@ import TextAreaClipboard from '../../../../src/components/formControls/textareaC
 // Feature-specific components
 import {
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
@@ -26,7 +27,7 @@ import {
 import { getLocale } from '../page/fakeLocale'
 
 // Images
-import { SyncDefaultIcon } from '../../../../src/features/sync/images'
+import syncIcon from '../../../assets/img/sync/sync_icon.svg'
 
 interface Props {
   onClose: () => void
@@ -74,7 +75,7 @@ export default class EnterSyncCodeModal extends React.PureComponent<Props, State
         : null
       }
         <ModalHeader>
-          <SyncDefaultIcon />
+          <ModalIcon src={syncIcon} />
           <div>
             <ModalTitle level={1}>{getLocale('enterSyncCode')}</ModalTitle>
             <ModalSubTitle>{getLocale('enterSyncCodeDescription')}</ModalSubTitle>

diff --git a/stories/features/sync/modals/removeMainDevice.tsx b/stories/features/sync/modals/removeMainDevice.tsx
@@ -12,7 +12,7 @@ import Modal from '../../../../src/components/popupModals/modal'
 import {
   Paragraph,
   ModalHeader,
-  // ModalIcon,
+  ModalIcon,
   ModalTitle,
   ModalContent,
   TwoColumnButtonGrid,
@@ -23,7 +23,7 @@ import {
 import { getLocale } from '../page/fakeLocale'
 
 // Images
-import { SyncRemoveIcon } from '../../../../src/features/sync/images'
+import syncRemoveIcon from '../../../assets/img/sync/sync_remove_icon.svg'
 
 interface Props {
   mainDeviceName: string
@@ -36,7 +36,7 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
     return (
       <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
         <ModalHeader>
-          <SyncRemoveIcon />
+          <ModalIcon src={syncRemoveIcon} />
           <ModalTitle level={1}>{getLocale('remove')} “{mainDeviceName}” {getLocale('thisSyncChain')}?</ModalTitle>
         </ModalHeader>
         <ModalContent>

diff --git a/stories/features/sync/modals/removeOtherDevice.tsx b/stories/features/sync/modals/removeOtherDevice.tsx
@@ -12,18 +12,19 @@ import Modal from '../../../../src/components/popupModals/modal'
 import {
   Paragraph,
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid
 } from '../../../../src/features/sync'
 
-// Images
-import { SyncRemoveIcon } from '../../../../src/features/sync/images'
-
 // Utils
 import { getLocale } from '../page/fakeLocale'
 
+// Images
+import syncRemoveIcon from '../../../assets/img/sync/sync_remove_icon.svg'
+
 interface Props {
   otherDeviceName: string
   onClose: () => void
@@ -35,7 +36,7 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
     return (
       <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
         <ModalHeader>
-          <SyncRemoveIcon />
+          <ModalIcon src={syncRemoveIcon} />
           <ModalTitle level={1}>{getLocale('remove')} “{otherDeviceName}” {getLocale('thisSyncChain')}</ModalTitle>
         </ModalHeader>
         <ModalContent>

diff --git a/stories/features/sync/modals/resetSync.tsx b/stories/features/sync/modals/resetSync.tsx
@@ -12,6 +12,7 @@ import AlertBox from '../../../../src/components/popupModals/alertBox'
 // Feature-specific components
 import {
   ModalHeader,
+  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
@@ -21,12 +22,12 @@ import {
   Paragraph
 } from '../../../../src/features/sync'
 
-// Images
-import { SyncRemoveIcon } from '../../../../src/features/sync/images'
-
 // Utils
 import { getLocale } from '../page/fakeLocale'
 
+// Images
+import syncRemoveIcon from '../../../assets/img/sync/sync_remove_icon.svg'
+
 interface Props {
   mainDeviceName: string
   onClose: () => void
@@ -70,7 +71,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
           : null
         }
         <ModalHeader>
-          <SyncRemoveIcon />
+          <ModalIcon src={syncRemoveIcon} />
           <div>
             <ModalSubTitle highlight={true}>{getLocale('warning')}</ModalSubTitle>
             <ModalTitle level={1}>{getLocale('removing')} “{mainDeviceName}” {getLocale('deleteSyncChain')}</ModalTitle>