diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx index 741c7f6660e..c7802abc49e 100644 --- a/packages/extension-ui/src/Popup/Welcome.tsx +++ b/packages/extension-ui/src/Popup/Welcome.tsx @@ -4,7 +4,21 @@ import React, { useContext } from 'react'; -import { ActionContext, Box, Button, Header } from '../components'; +import { ActionContext, Box, Button, ButtonArea, Header, List, VerticalSpace } from '../components'; +import styled from 'styled-components'; + +const WelcomeLabel = styled.div.attrs(() => ({ + children: 'Welcome' +}))` + margin: 30px auto 40px auto; + font-size: 24px; + line-height: 33px; +`; + +const Note = styled.p` + margin-bottom: 6px; + margin-top: 0; +`; type Props = {}; @@ -17,21 +31,25 @@ export default function Welcome (): React.ReactElement { }; return ( -
+ <>
+ + Before we start, just a couple of notes regarding use: - Before we start, just a couple of notes regarding use - -
    +
  • We do not send any clicks, pageviews or events to a central server
  • We do not use any trackers or analytics
  • We don't collect keys, addresses or any information - your information never leaves this machine
  • -
- ... we are not in the information collection business (even anonymized). + +
+ ... we are not in the information collection business (even anonymized). + +
+ + ); } diff --git a/packages/extension-ui/src/components/Box.tsx b/packages/extension-ui/src/components/Box.tsx index 552f49f9f48..21c7489e24c 100644 --- a/packages/extension-ui/src/components/Box.tsx +++ b/packages/extension-ui/src/components/Box.tsx @@ -21,7 +21,7 @@ function Box ({ banner, children, className }: Props): React.ReactElement } export default styled(Box)` - background: ${({ theme }): string => theme.background}; + background: ${({ theme }): string => theme.readonlyInputBackground}; border: ${({ theme }): string => theme.boxBorder}; border-radius: ${({ theme }): string => theme.borderRadius}; box-shadow: ${({ theme }): string => theme.boxShadow}; @@ -29,7 +29,7 @@ export default styled(Box)` font-family: ${({ theme }): string => theme.fontFamily}; font-size: ${({ theme }): string => theme.fontSize}; margin: ${({ theme }): string => theme.boxMargin}; - padding: 0.75rem 1rem; + padding: ${({ theme }): string => theme.boxPadding}; position: relative; .banner { diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx index 6848f268593..60f5589a84e 100644 --- a/packages/extension-ui/src/components/Button.tsx +++ b/packages/extension-ui/src/components/Button.tsx @@ -50,9 +50,10 @@ export default styled(Button)` color: ${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor}; cursor: pointer; display: block; - font-size: ${({ theme }): string => theme.fontSize}; + font-size: 15px; font-weight: 600; height: 48px; + line-height: 20px; padding: ${({ theme }): string => theme.btnPadding}; text-align: center; width: 100%; diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx new file mode 100644 index 00000000000..5dee3da9a69 --- /dev/null +++ b/packages/extension-ui/src/components/List.tsx @@ -0,0 +1,21 @@ +import styled from 'styled-components'; + +export default styled.ul` + list-style: none; + padding-inline-start: 10px; + text-indent: -22px; + margin-left: 21px; + + li { + margin-bottom: 8px; + } + + li::before { + content: '\\2022'; + color: ${({ theme }): string => theme.primaryColor}; + font-size: 30px; + font-weight: bold; + margin-right: 10px; + vertical-align: -20%; + } +`; diff --git a/packages/extension-ui/src/components/TextInputs.ts b/packages/extension-ui/src/components/TextInputs.ts index c977826feac..dbf55491ad0 100644 --- a/packages/extension-ui/src/components/TextInputs.ts +++ b/packages/extension-ui/src/components/TextInputs.ts @@ -26,10 +26,10 @@ const TextInput = css` font-size: ${({ theme }): string => theme.fontSize}; resize: none; width: 100%; - ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)} + ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)}; &:read-only { - background: ${({ theme }): string => theme.readonlyInputBackground} + background: ${({ theme }): string => theme.readonlyInputBackground}; box-shadow: none; outline: none; } diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx index 6b30a2667c8..1a294075ead 100644 --- a/packages/extension-ui/src/components/View.tsx +++ b/packages/extension-ui/src/components/View.tsx @@ -29,7 +29,7 @@ export default styled(View)` height: 100%; //padding: 0 1rem; - > div { + > * { margin-left: 1rem; margin-right: 1rem; } diff --git a/packages/extension-ui/src/components/index.ts b/packages/extension-ui/src/components/index.ts index 801e41f103a..796407c489d 100644 --- a/packages/extension-ui/src/components/index.ts +++ b/packages/extension-ui/src/components/index.ts @@ -18,6 +18,7 @@ export { default as IconBox } from './IconBox'; export { default as Identicon } from './Identicon'; export { default as InputWithLabel } from './InputWithLabel'; export { default as Link } from './Link'; +export { default as List } from './List'; export { default as Loading } from './Loading'; export { default as MnemonicSeed } from './MnemonicSeed'; export { default as TextAreaWithLabel } from './TextAreaWithLabel'; diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts index 51a7f5b3084..bd6be6daf00 100644 --- a/packages/extension-ui/src/components/themes.ts +++ b/packages/extension-ui/src/components/themes.ts @@ -41,7 +41,7 @@ export const defaultTheme = { lineHeight: '26px', linkColor: LINK_COLOR, linkColorDanger: DANGER_COLOR, - primaryColor: '#FF8301', + primaryColor: '#FF7D01', box: { error: { background: '#ffe6e6',