Style and formatting

- getting some odd formatting in the modal with the use of the icons. since they are instructions instead of alerts and it greatly helped the ability to read the content, i omitted the icons in the modals
- remove button intent changed to warn on delete buttons
- general padding, margin and line height updates for a more even 4px increment spread
- updated the illustration to not be so large, also style update
- omitted trailing dots (...) on button locale
- updated snapshots

src/components/popupModals/modal/__snapshots__/spec.tsx.snap

@@ -33,7 +33,7 @@ exports[`Modal tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/components/popupModals/modal/style.ts

@@ -37,7 +37,7 @@ export const StyledClose = styled<{}, 'div'>('div')`
 `
 
 export const StyledContent = styled<{}, 'div'>('div')`
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 `

src/features/rewards/modalActivity/__snapshots__/spec.tsx.snap

@@ -252,7 +252,7 @@ exports[`ModalActivity tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap

@@ -87,7 +87,7 @@ exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap

@@ -202,7 +202,7 @@ exports[`ModalBackupRestore tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/rewards/modalContribute/__snapshots__/spec.tsx.snap

@@ -55,7 +55,7 @@ exports[`ModalContribute tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/rewards/modalDonation/__snapshots__/spec.tsx.snap

@@ -45,7 +45,7 @@ exports[`ModalDonation tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/sync/modal/index.ts

@@ -8,15 +8,15 @@ import Heading from '../../../components/text/heading'
 export const ModalHeader = styled<{}, 'header'>('header')`
  display: grid;
  grid-template-columns: auto 1fr;
- grid-gap: 30px;
- margin-bottom: 20px;
+ grid-gap: 32px;
+ margin-bottom: 8px;
 `
 
 export const ModalTitle = styled(Heading)`
  font-weight: 500;
- font-size: 26px;
- margin: 0 0 10px;
- line-height: 1.3;
+ font-size: 24px;
+ margin: 0 0 4px;
+ line-height: 1.6;
 `
 
 interface ModalSubTitleProps {
@@ -26,12 +26,12 @@ interface ModalSubTitleProps {
 export const ModalSubTitle = styled<ModalSubTitleProps, 'span'>('span')`
  display: block;
  font-size: 18px;
- line-height: 1.2;
+ line-height: 1.6;
  color: ${p => p.highlight && '#ff0000'}
 `
 
 export const ModalContent = styled<{}, 'div'>('div')`
- margin-left: 90px;
+ margin-left: 0px;
 `
 
 export const OneColumnButtonGrid = styled<{}, 'div'>('div')`
@@ -95,8 +95,8 @@ export const ScanGrid = styled<{}, 'div'>('div')`
 export const QRCodeContainer = styled<{}, 'div'>('div')`
  display: flex;
  flex-direction: column;
- align-items: flex-end;
- width: 180px;
+ align-items: center;
+ width: 120px;
  img {
  max-width: 100%;
  }
@@ -105,8 +105,11 @@ export const QRCodeContainer = styled<{}, 'div'>('div')`
 export const ViewSyncCodeGrid = styled<{}, 'div'>('div')`
  display: grid;
  height: 100%;
- grid-template-columns: auto 1fr;
+ grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
- grid-gap: 20px;
+ grid-gap: 16px;
  margin: 0 0 25px;
+ img {
+ max-width: 80%;
+ }
 `

src/features/sync/text/index.ts

@@ -7,23 +7,24 @@ import Heading from '../../../components/text/heading'
 
 export const Title = styled(Heading)`
  font-weight: 500;
- font-size: 26px;
- margin: 0 0 20px 0;
+ font-size: 24px;
+ margin: 0 0 4px 0;
+ line-height: 1.6;
 `
 
 export const SubTitle = styled(Heading)`
  font-weight: 500;
  font-size: 20px;
- margin: 20px 0 10px 0;
+ margin: 16px 0 12px 0;
 `
 
 export const Paragraph = styled<{}, 'p'>('p')`
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  margin: 0;
- font-family: 'Muli', sans-serif;
- padding: 0 0 10px 0
+ font-family: ${p => p.theme.fontFamily.body};
+ padding: 0 0 12px 0;
 `
 
 export const SwitchLabel = styled<{}, 'label'>('label')`
@@ -32,5 +33,5 @@ export const SwitchLabel = styled<{}, 'label'>('label')`
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
- margin: 0 10px;
+ margin: 0 12px;
 `