make sync images exportable

src/features/sync/images/index.ts

@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from '../../../theme'
+
+import StartImageUrl from './start_icon.svg'
+import DefaultImageUrl from './default_icon.svg'
+import AddImageUrl from './add_icon.svg'
+import RemoveImageUrl from './remove_icon.svg'
+import DesktopImageUrl from './desktop_icon.svg'
+import MobileImageUrl from './mobile_icon.svg'
+import MobileHandImageUrl from './mobile_picture.png'
+
+const iconStyles = `
+  margin-top: 3px;
+  height: 60px;
+`
+
+const deviceStyles = `
+  margin-bottom: 20px;
+  height: 100px;
+`
+
+export const SyncStartIcon = styled<{}, 'img'>('img').attrs({ src: StartImageUrl })`
+  max-width: 100%;
+`
+export const SyncDefaultIcon = styled<{}, 'img'>('img').attrs({ src: DefaultImageUrl })`${iconStyles}`
+export const SyncAddIcon = styled<{}, 'img'>('img').attrs({ src: AddImageUrl })`${iconStyles}`
+export const SyncRemoveIcon = styled<{}, 'img'>('img').attrs({ src: RemoveImageUrl })`${iconStyles}`
+export const SyncDesktopIcon = styled<{}, 'img'>('img').attrs({ src: DesktopImageUrl })`${deviceStyles}`
+export const SyncMobileIcon = styled<{}, 'img'>('img').attrs({ src: MobileImageUrl })`${deviceStyles}`
+export const SyncMobilePicture = styled<{}, 'img'>('img').attrs({ src: MobileHandImageUrl })`
+  max-width: 100%;
+  display: block;
+`
+
+interface QRCodeProps {
+  size: 'normal' | 'small'
+}
+
+export const QRCode = styled<QRCodeProps, 'img'>('img')`
+  max-width: 100%;
+  display: block;
+  width: ${p => p.size === 'normal' ? '180px' : '140px'};
+`

src/features/sync/index.ts

@@ -14,19 +14,15 @@ export {
 } from './grid'
 export {
   ModalHeader,
-  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
   TwoColumnButtonGrid,
   OneColumnButtonGrid,
   DeviceGrid,
   DeviceContainer,
-  DeviceImage,
   ViewSyncCodeGrid,
-  QRCode,
   ScanGrid,
-  MobileHandImage,
   QRCodeContainer,
   ThreeColumnButtonGrid,
   ThreeColumnButtonGridCol1,

src/features/sync/modal/index.ts

@@ -12,11 +12,6 @@ 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;
@@ -88,11 +83,6 @@ 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%;
@@ -102,11 +92,6 @@ 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;
@@ -125,9 +110,3 @@ 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;
-`

stories/features/sync/disabledContent.tsx

@@ -21,7 +21,8 @@ import {
 import DeviceType from './modals/deviceType'
 import EnterSyncCode from './modals/enterSyncCode'
 
-const syncStart = require('../../assets/img/sync/sync_start.svg')
+// Images
+import { SyncStartIcon } from '../../../src/features/sync/images'
 
 // Utils
 import { getLocale } from './page/fakeLocale'
@@ -68,7 +69,7 @@ export default class SyncDisabledContent extends React.PureComponent<{}, State>
             : null
         }
         <TableGrid>
-          <img src={syncStart} />
+          <SyncStartIcon />
           <div>
             <Title level={2}>{getLocale('syncTitle')}</Title>
             <Paragraph>{getLocale('syncDescription')}</Paragraph>

stories/features/sync/modals/addNewChainCameraOption.tsx

@@ -10,7 +10,10 @@ import Modal from '../../../../src/components/popupModals/modal'
 import TextAreaClipboard from '../../../../src/components/formControls/textareaClipboard'
 
 // Feature-specific components
-import { ModalHeader, ModalTitle, ModalIcon, ModalSubTitle, ModalContent, ThreeColumnButtonGrid, ThreeColumnButtonGridCol2, ThreeColumnButtonGridCol1 } from '../../../../src/features/sync'
+import { ModalHeader, ModalTitle, ModalSubTitle, ModalContent, ThreeColumnButtonGrid, ThreeColumnButtonGridCol2, ThreeColumnButtonGridCol1 } from '../../../../src/features/sync'
+
+// Images
+import { SyncAddIcon } from '../../../../src/features/sync/images'
 
 // Modals
 import ScanCode from './scanCode'
@@ -19,9 +22,6 @@ 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>
-          <ModalIcon src={syncAddIcon} />
+          <SyncAddIcon />
           <div>
             <ModalTitle level={1}>
               {

stories/features/sync/modals/addNewChainNoCamera.tsx

@@ -12,21 +12,20 @@ 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
 }
@@ -37,7 +36,7 @@ export default class AddNewChainNoCameraModal extends React.PureComponent<Props,
     return (
       <Modal id='addNewChainNoCameraModal' onClose={onClose} size='small'>
         <ModalHeader>
-          <ModalIcon src={syncAddIcon} />
+          <SyncAddIcon />
           <div>
             <ModalTitle level={1}>{getLocale('enterThisCode')}</ModalTitle>
             <ModalSubTitle>{getLocale('syncChainCodeHowTo')}</ModalSubTitle>

stories/features/sync/modals/deviceType.tsx

@@ -11,26 +11,22 @@ 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
@@ -74,15 +70,15 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
             : null
         }
         <ModalHeader>
-          <ModalIcon src={syncAddIcon} />
+          <SyncAddIcon />
           <div>
             <ModalTitle level={1}>{getLocale('letsSync')}<br />“{mainDeviceName}”.</ModalTitle>
             <ModalSubTitle>{getLocale('chooseDeviceType')}</ModalSubTitle>
           </div>
         </ModalHeader>
         <DeviceGrid>
           <DeviceContainer>
-            <DeviceImage src={syncMobileImg} />
+            <SyncMobileIcon />
             <Button
               level='primary'
               type='accent'
@@ -92,7 +88,7 @@ export default class DeviceTypeModal extends React.PureComponent<Props, State> {
             />
           </DeviceContainer>
           <DeviceContainer>
-          <DeviceImage src={syncDesktopImg} />
+            <SyncDesktopIcon />
             <Button
               level='primary'
               type='accent'

stories/features/sync/modals/enterSyncCode.tsx

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

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 '../../../assets/img/sync/sync_remove_icon.svg'
+import { SyncRemoveIcon } from '../../../../src/features/sync/images'
 
 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>
-          <ModalIcon src={syncRemoveIcon} />
+          <SyncRemoveIcon />
           <ModalTitle level={1}>{getLocale('remove')} “{mainDeviceName}” {getLocale('thisSyncChain')}?</ModalTitle>
         </ModalHeader>
         <ModalContent>

stories/features/sync/modals/removeOtherDevice.tsx

@@ -12,19 +12,18 @@ 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
@@ -36,7 +35,7 @@ export default class RemoveMainDeviceModal extends React.PureComponent<Props, {}
     return (
       <Modal id='removeMainDeviceModal' onClose={onClose} size='small'>
         <ModalHeader>
-          <ModalIcon src={syncRemoveIcon} />
+          <SyncRemoveIcon />
           <ModalTitle level={1}>{getLocale('remove')} “{otherDeviceName}” {getLocale('thisSyncChain')}</ModalTitle>
         </ModalHeader>
         <ModalContent>

stories/features/sync/modals/resetSync.tsx

@@ -12,7 +12,6 @@ import AlertBox from '../../../../src/components/popupModals/alertBox'
 // Feature-specific components
 import {
   ModalHeader,
-  ModalIcon,
   ModalTitle,
   ModalSubTitle,
   ModalContent,
@@ -22,12 +21,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
@@ -71,7 +70,7 @@ export default class ResetSyncModal extends React.PureComponent<Props, State> {
           : null
         }
         <ModalHeader>
-          <ModalIcon src={syncRemoveIcon} />
+          <SyncRemoveIcon />
           <div>
             <ModalSubTitle highlight={true}>{getLocale('warning')}</ModalSubTitle>
             <ModalTitle level={1}>{getLocale('removing')} “{mainDeviceName}” {getLocale('deleteSyncChain')}</ModalTitle>