diff --git a/.changelog/1941.trivial.md b/.changelog/1941.trivial.md new file mode 100644 index 0000000000..fb709af793 --- /dev/null +++ b/.changelog/1941.trivial.md @@ -0,0 +1 @@ +Improve footer layout diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap index b42535f33e..aecbf6602b 100644 --- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should render mobile version of footer 1`] = ` -.c8 { +.c9 { display: inline-block; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -12,25 +12,25 @@ exports[` should render mobile version of footer 1`] = ` stroke: currentColor; } -.c8 g { +.c9 g { fill: inherit; stroke: inherit; } -.c8 *:not([stroke])[fill='none'] { +.c9 *:not([stroke])[fill='none'] { stroke-width: 0; } -.c8 *[stroke*='#'], -.c8 *[STROKE*='#'] { +.c9 *[stroke*='#'], +.c9 *[STROKE*='#'] { stroke: inherit; fill: none; } -.c8 *[fill-rule], -.c8 *[FILL-RULE], -.c8 *[fill*='#'], -.c8 *[FILL*='#'] { +.c9 *[fill-rule], +.c9 *[FILL-RULE], +.c9 *[fill*='#'], +.c9 *[FILL*='#'] { fill: inherit; stroke: none; } @@ -63,17 +63,15 @@ exports[` should render mobile version of footer 1`] = ` border-radius: 5px; } -.c4 { +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-sizing: border-box; max-width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + margin-left: 6px; + margin-right: 6px; min-width: 0; min-height: 0; -webkit-flex-direction: column; @@ -81,7 +79,7 @@ exports[` should render mobile version of footer 1`] = ` flex-direction: column; } -.c7 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -104,7 +102,7 @@ exports[` should render mobile version of footer 1`] = ` justify-content: center; } -.c9 { +.c10 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -141,13 +139,20 @@ exports[` should render mobile version of footer 1`] = ` text-align: center; } -.c3 { +.c4 { + margin-top: 12px; font-size: 14px; line-height: 20px; text-align: center; } -.c5 { +.c11 { + font-size: 14px; + line-height: 20px; + text-align: center; +} + +.c6 { background-color: #FFFFFF; position: fixed; bottom: 0; @@ -173,7 +178,7 @@ exports[` should render mobile version of footer 1`] = ` flex-direction: row; } -.c6 { +.c7 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -183,10 +188,68 @@ exports[` should render mobile version of footer 1`] = ` flex-basis: 0; } -.c6:hover { +.c7:hover { background-color: #11111108; } +.c5 { + display: inline-block; + box-sizing: border-box; + cursor: pointer; + font: inherit; + -webkit-text-decoration: none; + text-decoration: none; + margin: 0; + background: transparent; + overflow: visible; + text-transform: none; + color: #0500e2; + outline: none; + border: none; + padding: 0; + text-align: inherit; +} + +.c5:focus { + outline: none; + box-shadow: 0 0 2px 2px #00A9FF; +} + +.c5:focus > circle, +.c5:focus > ellipse, +.c5:focus > line, +.c5:focus > path, +.c5:focus > polygon, +.c5:focus > polyline, +.c5:focus > rect { + outline: none; + box-shadow: 0 0 2px 2px #00A9FF; +} + +.c5:focus::-moz-focus-inner { + border: 0; +} + +.c5:focus:not(:focus-visible) { + outline: none; + box-shadow: none; +} + +.c5:focus:not(:focus-visible) > circle, +.c5:focus:not(:focus-visible) > ellipse, +.c5:focus:not(:focus-visible) > line, +.c5:focus:not(:focus-visible) > path, +.c5:focus:not(:focus-visible) > polygon, +.c5:focus:not(:focus-visible) > polyline, +.c5:focus:not(:focus-visible) > rect { + outline: none; + box-shadow: none; +} + +.c5:focus:not(:focus-visible)::-moz-focus-inner { + border: 0; +} + @media only screen and (max-width:768px) { .c0 { margin-bottom: 24px; @@ -213,7 +276,19 @@ exports[` should render mobile version of footer 1`] = ` } @media only screen and (max-width:768px) { - .c9 { + .c3 { + margin-left: 3px; + } +} + +@media only screen and (max-width:768px) { + .c3 { + margin-right: 3px; + } +} + +@media only screen and (max-width:768px) { + .c10 { height: 6px; } } @@ -237,27 +312,34 @@ exports[` should render mobile version of footer 1`] = ` open source - - - Feedback and issues are appreciated! - - - - - - Terms and Conditions - - + Powered by Oasis Scan API & Oasis gRPC + + + + + Terms and Conditions + + + + | + + Version: @@ -270,39 +352,47 @@ exports[` should render mobile version of footer 1`] = ` 1.0.0-dev.1 - (commit: + + + + + [show details] + + + + + + + We’d love your feedback at - sha0000 + + wallet@oasisprotocol.org + - - ) built at 1/1/1970, 12:00:00 AM - - - Powered by Oasis Scan API & Oasis gRPC - should render mobile version of footer 1`] = ` /> ROSE Wallet @@ -324,15 +414,15 @@ exports[` should render mobile version of footer 1`] = ` should render mobile version of footer 1`] = ` /> Stake @@ -354,15 +444,15 @@ exports[` should render mobile version of footer 1`] = ` should render mobile version of footer 1`] = ` /> ParaTimes @@ -384,15 +474,15 @@ exports[` should render mobile version of footer 1`] = ` should render mobile version of footer 1`] = ` /> Buy diff --git a/src/app/components/Footer/__tests__/index.test.tsx b/src/app/components/Footer/__tests__/index.test.tsx index 1b0be49739..20dfc8f68e 100644 --- a/src/app/components/Footer/__tests__/index.test.tsx +++ b/src/app/components/Footer/__tests__/index.test.tsx @@ -5,6 +5,7 @@ import { Provider } from 'react-redux' import { ThemeProvider } from 'styles/theme/ThemeProvider' import { configureAppStore } from 'store/configureStore' import { Wallet } from 'app/state/wallet/types' +import userEvent from '@testing-library/user-event' import { Footer } from '..' @@ -41,10 +42,14 @@ describe('', () => { }) }) - it('should render a link with commit sha', () => { + it('should render a link with commit sha after toggling', async () => { renderComponent(store, 'large') - expect(screen.getByRole('link', { name: 'sha0000' })).toHaveAttribute( + const toggleLink = await screen.findByText(/\[show details\]/i) + await userEvent.click(toggleLink) + + const commitLink = await screen.findByRole('link', { name: /sha0000/i }) + expect(commitLink).toHaveAttribute( 'href', 'https://github.com/oasisprotocol/oasis-wallet-web/commit/sha0000000000000000000000000000000000000', ) diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx index 2e0ad479b0..ece2f11bde 100644 --- a/src/app/components/Footer/index.tsx +++ b/src/app/components/Footer/index.tsx @@ -2,7 +2,7 @@ import { Anchor } from 'grommet/es6/components/Anchor' import { Box } from 'grommet/es6/components/Box' import { Text } from 'grommet/es6/components/Text' import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext' -import React, { memo } from 'react' +import React, { memo, useState } from 'react' import { useSelector } from 'react-redux' import { Trans, useTranslation } from 'react-i18next' import { selectHasAccounts } from 'app/state/wallet/selectors' @@ -11,9 +11,13 @@ import { backend } from 'vendors/backend' import { BackendAPIs } from 'config' import { MobileFooterNavigation } from '../MobileFooterNavigation' import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes' +import { Button } from 'grommet/es6/components/Button' const githubLink = 'https://github.com/oasisprotocol/oasis-wallet-web/' const githubReleaseLink = (tag: string) => `${githubLink}releases/tag/${tag}` +const buildTime = + process.env.REACT_APP_BUILD_DATETIME && + `${intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME))}` function NoReleaseLink() { return <>-> @@ -23,6 +27,11 @@ export const Footer = memo(() => { const walletHasAccounts = useSelector(selectHasAccounts) const isMobile = React.useContext(ResponsiveContext) === 'small' const { t } = useTranslation() + const [showCommitLink, setShowCommitLink] = useState(false) + + const toggleCommitLink = () => { + setShowCommitLink(!showCommitLink) + } const backendToLabel = { [BackendAPIs.OasisMonitor]: t( @@ -52,24 +61,34 @@ export const Footer = memo(() => { }} - defaults="ROSE Wallet is fully open source - Feedback and issues are appreciated!" - /> - - - - ), + GithubLink: , }} - defaults="Terms and Conditions" + defaults="ROSE Wallet is fully open source" /> + {poweredByLabel && ( + + {poweredByLabel} + + )} {process.env.REACT_APP_BUILD_DATETIME && process.env.REACT_APP_BUILD_SHA && ( - + + + + ), + }} + defaults="Terms and Conditions" + /> + + | + + { ), CommitLink: ( - + + + + {showCommitLink && process.env.REACT_APP_BUILD_SHA && ( + + + (commit: + + ) built at {buildTime} + + )} + + ), }} - defaults="Version: (commit: ) built at {{buildTime}}" - values={{ - buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)), - }} + defaults="Version: " /> - {poweredByLabel && {poweredByLabel}} )} - + + , + }} + defaults="We’d love your feedback at wallet@oasisprotocol.org" + /> + ) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 6ff367856b..79fbef7d2d 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -188,13 +188,16 @@ "thirdPartyDisclaimer": "This service is provided by an external party. Oasis* does not carry any responsibility. All fees charged by Transak." }, "footer": { - "github": "ROSE Wallet is fully open source - Feedback and issues are appreciated!", + "feedback": "We’d love your feedback at wallet@oasisprotocol.org", + "github": "ROSE Wallet is fully open source", + "hideDetails": "[hide details]", "poweredBy": { "oasismonitor": "Powered by Oasis Monitor API & Oasis gRPC", "oasisscan": "Powered by Oasis Scan API & Oasis gRPC" }, + "showDetails": "[show details]", "terms": "Terms and Conditions", - "version": "Version: (commit: ) built at {{buildTime}}" + "version": "Version: " }, "home": { "create": { @@ -421,6 +424,7 @@ "enterPasswordHere": "Enter your password", "hidePassword": "Hide password", "showPassword": "Show password", + "skipUnlocking": "Continue without the profile", "title": "Welcome Back!", "unlock": "Unlock", "wrongPassword": "Wrong password"