Skip to content

Commit

Permalink
feature: Adds release notes component / rendering logic (#2006)
Browse files Browse the repository at this point in the history
* Set updateDownloaded flag

* feature: release notes modal (#2009)

* feature: fix reskin button design (#2007)

* Fixes dark theme primary disabled button styles

* Fix font loading bugs and input color on dark theme

* remove dead fonts

* create and implement secondary elevated button

* Updates button styles

* Remove commented code

* feature: beta release feedback (#2008)

* Implements numeruous design enhancements, fixes activity export

* Updates snapshots

* Fix icon color in wallet manager

* Massive amounts of design polish on both themes and many components

* Lint and fix snapshots

* Clean up dead code

* Clean up dead code

* Clean up dead code

* lint

* Fix snapshots

* Sets up logic and finishes implementation of release notes modal

* update snapshots

* conditionally render notes once when running 2.6.0

* Simplify release notes render

* Hide release render for now
  • Loading branch information
comountainclimber committed Nov 7, 2020
1 parent eb24b71 commit d6e7433
Show file tree
Hide file tree
Showing 17 changed files with 284 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -291,6 +294,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -514,6 +520,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -645,6 +654,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -776,6 +788,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -912,6 +927,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down Expand Up @@ -1057,6 +1075,9 @@ exports[`ConfirmModal should render without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1073,6 +1073,9 @@ exports[`Sidebar renders without crashing 1`] = `
"--qr-scan-animation-end": "rgba(57, 65, 82, 0)",
"--qr-scan-animation-start": "rgba(57, 65, 82, 1)",
"--qr-scan-paused": "rgba(102, 237, 135, 0.6)",
"--release-notes-button-color": "#394152",
"--release-notes-date": "#8297a0",
"--release-notes-text": "#8c97a2",
"--secondary-button-icon-color": "#394152",
"--secondary-raised-base-text": "#7f8f98",
"--send-success-row-info": "#394152",
Expand Down
Binary file added app/assets/fonts/sofiapro-medium-webfont.woff
Binary file not shown.
Binary file added app/assets/fonts/sofiapro-semibold-webfont.woff
Binary file not shown.
9 changes: 9 additions & 0 deletions app/assets/icons/gift.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/mobile-marketing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions app/components/CloseButton/CloseButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@ import styles from '../Button/Button.scss'
type Props = {
className: ?string,
routeTo: string,
renderWithoutLink?: boolean,
}

export default class CloseButton extends React.Component<Props> {
render = () => {
const { routeTo } = this.props
return (
const { routeTo, renderWithoutLink } = this.props
return renderWithoutLink ? (
<span className={this.props.className}>
<Close className={styles.icon} />
</span>
) : (
<Link to={routeTo}>
<span className={this.props.className}>
<Close className={styles.icon} />
Expand Down
88 changes: 88 additions & 0 deletions app/components/Modals/ReleaseNotesModal/ReleaseNotesModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
// @flow
import React from 'react'

import FullHeightPanel from '../../Panel/FullHeightPanel'
import BaseModal from '../BaseModal'
import Button from '../../Button'
import styles from './ReleaseNotesModal.scss'
import CloseButton from '../../CloseButton'
import Gift from '../../../assets/icons/gift.svg'
import MobileMarketing from '../../../assets/images/mobile-marketing.png'

type Props = {
hideModal: Function,
}

const ReleaseNotesModal = ({ hideModal }: Props) => (
<BaseModal
hideModal={hideModal}
shouldRenderHeader={false}
style={{
content: {
width: '730px',
height: '100%',
},
}}
>
<FullHeightPanel
containerClassName={styles.releaseNotesContainer}
renderInstructions={false}
renderHeaderIcon={() => <Gift />}
headerText="New Features"
renderCloseButton={() => (
<div className={styles.closeButton} onClick={() => hideModal()}>
<CloseButton renderWithoutLink />
</div>
)}
>
<div className={styles.releaseNotesContents}>
<div className={styles.release}>
<div className={styles.releaseContent}>
<small> v2.7.0</small>
<small className={styles.date}>25th Sep 2020 </small>
<h3>We have now released our mobile wallet for IOS and Android!</h3>

<p>
Filium morte multavit si sine causa, mox videro; interea hoc
epicurus in gravissimo bello animadversionis metu degendae
praesidia firmissima filium morte multavit si sine metu
contineret, saluti prospexit civium, qua intellegebat contineri
suam atque corrupti, quos tu tam crudelis. Sunt autem quibusdam et
dolorem? sunt autem nusquam hoc tenebo, si mihi probabis ea, quae
sine dubio praeclara sunt.
</p>

<Button>Learn more</Button>
</div>
<div className={styles.marketingImage}>
<img src={MobileMarketing} alt="marketing-content" />
</div>
</div>
<div className={styles.release}>
<div className={styles.releaseContent}>
<small> v2.7.0</small>
<small className={styles.date}>25th Sep 2020 </small>
<h3>We have now released our mobile wallet for IOS and Android!</h3>

<p>
Filium morte multavit si sine causa, mox videro; interea hoc
epicurus in gravissimo bello animadversionis metu degendae
praesidia firmissima filium morte multavit si sine metu
contineret, saluti prospexit civium, qua intellegebat contineri
suam atque corrupti, quos tu tam crudelis. Sunt autem quibusdam et
dolorem? sunt autem nusquam hoc tenebo, si mihi probabis ea, quae
sine dubio praeclara sunt.
</p>

<Button>Learn more</Button>
</div>
<div className={styles.marketingImage}>
<img src={MobileMarketing} alt="marketing-content" />
</div>
</div>
</div>
</FullHeightPanel>
</BaseModal>
)

export default ReleaseNotesModal
68 changes: 68 additions & 0 deletions app/components/Modals/ReleaseNotesModal/ReleaseNotesModal.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.releaseNotesContainer {
margin: 0 !important;
width: 100%;
display: flex;
flex-direction: column;
}
.closeButton {
cursor: pointer;
}

.releaseNotesContents {
display: flex;
padding: 24px;
flex-direction: column;
}

.release {
display: flex;
margin-bottom: 48px;
}

.releaseContent {
display: flex;
flex: 1;
flex-direction: column;

.date {
font-size: 14px;
font-family: var(--font-sofiapro-semibold);

color: #8297a0;
color: var(--release-notes-date);
}

button {
background: #4cffb3 !important;
border-radius: 4px;
width: 147px;
height: 36px;
padding: 0;
font-size: 14px;
text-align: center;
font-family: var(--font-gotham-medium);
color: var(--release-notes-button-color) !important;
}

h3 {
margin-bottom: 6px;
margin-top: 12px;
}

p {
font-size: 14px;
color: var(--release-notes-text);
line-height: 17px;
}
}

.marketingImage {
display: flex;
flex: 1;
align-items: center;

img {
display: block;
height: fit-content;
}
}
35 changes: 33 additions & 2 deletions app/containers/Home/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Button from '../../components/Button'
import styles from './Home.scss'
import AddIcon from '../../assets/icons/add.svg'
import ImportIcon from '../../assets/icons/import.svg'
import { ROUTES } from '../../core/constants'
import { ROUTES, MODAL_TYPES } from '../../core/constants'
import HomeLayout from './HomeLayout'
import pack from '../../../package.json'

Expand All @@ -23,6 +23,7 @@ type State = {
type Props = {
loading: boolean,
theme: ThemeType,
showModal: (modalType: string, modalProps: Object) => any,
}

const LOGIN_OPTIONS = {
Expand Down Expand Up @@ -53,6 +54,20 @@ const LOGIN_OPTIONS = {
},
}

// NOTE: all other solutions seemed to be overly
// complex... Revisit this if it becomes painful
const shouldRenderReleaseNotes = version => {
const displayWhitelist = ['']

if (
displayWhitelist.includes(version) &&
!localStorage.getItem(`hasSeenReleaseNotes-${version}`)
) {
return true
}
return false
}

export default class Home extends React.Component<Props, State> {
state = {
tabIndex: 0,
Expand All @@ -62,7 +77,23 @@ export default class Home extends React.Component<Props, State> {
options = Object.keys(LOGIN_OPTIONS).map((key: string) => LOGIN_OPTIONS[key])

render = () => {
const { loading, theme } = this.props
const { loading, theme, showModal } = this.props

if (shouldRenderReleaseNotes(pack.version)) {
// Allow users to view the normal for 1 second
// befre rendering the release notes modal
setTimeout(() => {
showModal(MODAL_TYPES.RELEASE_NOTES, {
renderBody: () => (
<div className={styles.confirmDeleteModalPrompt}>
Please confirm removing saved wallet
</div>
),
})
}, 1000)
localStorage.setItem(`hasSeenReleaseNotes-${pack.version}`, 'true')
}

return (
<HomeLayout theme={theme}>
<div className={styles.inputContainer}>
Expand Down
14 changes: 14 additions & 0 deletions app/containers/Home/index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
// @flow
import { compose } from 'recompose'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import Home from './Home'
import authActions from '../../actions/authActions'
import withLoadingProp from '../../hocs/withLoadingProp'
import withThemeData from '../../hocs/withThemeData'
import pureStrategy from '../../hocs/helpers/pureStrategy'
import { showModal } from '../../modules/modal'

const actionCreators = {
showModal,
}

const mapDispatchToProps = dispatch =>
bindActionCreators(actionCreators, dispatch)

export default compose(
connect(
null,
mapDispatchToProps,
),
withLoadingProp(authActions, { strategy: pureStrategy }),
withThemeData(),
)(Home)
3 changes: 3 additions & 0 deletions app/containers/ModalRenderer/ModalRenderer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import GeneratedTransactionModal from '../../components/Modals/GeneratedTransact
import ImportTransactionModal from '../../components/Modals/ImportTransactionModal'

import { MODAL_TYPES } from '../../core/constants'
import ReleaseNotesModal from '../../components/Modals/ReleaseNotesModal/ReleaseNotesModal'

const {
CONFIRM,
Expand All @@ -22,6 +23,7 @@ const {
RECEIVE,
GENERATED_TRANSACTION,
IMPORT_TRANSACTION,
RELEASE_NOTES,
} = MODAL_TYPES

const MODAL_COMPONENTS = {
Expand All @@ -33,6 +35,7 @@ const MODAL_COMPONENTS = {
[SEND]: SendModal,
[GENERATED_TRANSACTION]: GeneratedTransactionModal,
[IMPORT_TRANSACTION]: ImportTransactionModal,
[RELEASE_NOTES]: ReleaseNotesModal,
}

type Props = {
Expand Down
1 change: 1 addition & 0 deletions app/core/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export const MODAL_TYPES = {
RECEIVE: 'RECEIVE',
GENERATED_TRANSACTION: 'GENERATED_TRANSACTION',
IMPORT_TRANSACTION: 'IMPORT_TRANSACTION',
RELEASE_NOTES: 'RELEASE_NOTES',
}

export const TX_TYPES = {
Expand Down
Loading

0 comments on commit d6e7433

Please sign in to comment.