@basiq/connect-auth 0.1.79 → 0.1.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/package.json +7 -6
  2. package/src/App.tsx +0 -96
  3. package/src/BasiqConnect.tsx +0 -17
  4. package/src/actions/actions.ts +0 -72
  5. package/src/components/modals/LoadingModal.tsx +0 -28
  6. package/src/components/modals/index.ts +0 -1
  7. package/src/components/pages/AuthScreen.tsx +0 -96
  8. package/src/components/pages/NotFound.tsx +0 -44
  9. package/src/components/pages/Page.tsx +0 -46
  10. package/src/components/pages/StartScreen.tsx +0 -83
  11. package/src/components/pages/index.ts +0 -4
  12. package/src/components/ui/Button.tsx +0 -24
  13. package/src/components/ui/Modal.tsx +0 -29
  14. package/src/components/ui/icon.tsx +0 -18
  15. package/src/components/ui/index.ts +0 -1
  16. package/src/custom.d.ts +0 -9
  17. package/src/fonts/Mark-W1G-Bold.otf +0 -0
  18. package/src/fonts/Mark-W1G-Book.otf +0 -0
  19. package/src/fonts.d.ts +0 -1
  20. package/src/helpers/constants.ts +0 -2
  21. package/src/helpers/hookUtils.ts +0 -8
  22. package/src/helpers/index.ts +0 -3
  23. package/src/helpers/utils.ts +0 -12
  24. package/src/images/back.svg +0 -8
  25. package/src/images/error.svg +0 -10
  26. package/src/images/loading_indicator.svg +0 -14
  27. package/src/index.tsx +0 -1
  28. package/src/locales/en/translation.json +0 -29
  29. package/src/locales/i18n.ts +0 -27
  30. package/src/logo.svg +0 -1
  31. package/src/react-app-env.d.ts +0 -1
  32. package/src/react-i18next.d.ts +0 -9
  33. package/src/setupTests.ts +0 -5
  34. package/src/styled.d.ts +0 -6
  35. package/src/styledComponents/base.ts +0 -73
  36. package/src/styledComponents/breakpoints.ts +0 -32
  37. package/src/styledComponents/index.ts +0 -4
  38. package/src/styledComponents/pages/auth.ts +0 -49
  39. package/src/styledComponents/pages/basic.ts +0 -126
  40. package/src/styledComponents/pages/index.ts +0 -4
  41. package/src/styledComponents/pages/notFound.ts +0 -70
  42. package/src/styledComponents/pages/start.ts +0 -6
  43. package/src/styledComponents/styles.ts +0 -25
  44. package/src/styledComponents/theme.ts +0 -58
  45. package/src/styledComponents/ui/basic.ts +0 -96
  46. package/src/styledComponents/ui/button.ts +0 -112
  47. package/src/styledComponents/ui/index.ts +0 -3
  48. package/src/styledComponents/ui/modals.ts +0 -48
@@ -1,10 +0,0 @@
1
- <!-- Generated by IcoMoon.io -->
2
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
3
- <title></title>
4
- <g id="icomoon-ignore">
5
- </g>
6
- <path fill="#fabe34" d="M512 0c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512s229.23-512 512-512z"></path>
7
- <path fill="#fff" d="M336.968 320.978c-33.427 33.427-49.307 89.357-49.307 183.024 0 93.669 15.88 149.598 49.307 183.026 33.429 33.429 89.357 49.309 183.026 49.309s149.597-15.88 183.026-49.309c33.427-33.427 49.307-89.357 49.307-183.026 0-93.667-15.88-149.597-49.307-183.024-33.429-33.429-89.357-49.309-183.026-49.309s-149.597 15.88-183.026 49.309zM307.978 291.986c45.586-45.586 116.074-61.317 212.016-61.317s166.43 15.731 212.016 61.317c45.586 45.586 61.317 116.074 61.317 212.016 0 95.944-15.731 166.432-61.317 212.018s-116.074 61.317-212.016 61.317c-95.942 0-166.43-15.731-212.016-61.317-45.587-45.586-61.317-116.074-61.317-212.018 0-95.942 15.73-166.43 61.317-212.016z"></path>
8
- <path fill="#fff" d="M519.992 377.037c11.322 0 20.501 9.178 20.501 20.499v106.464c0 11.322-9.179 20.499-20.501 20.499s-20.499-9.178-20.499-20.499v-106.464c0-11.322 9.178-20.499 20.499-20.499z"></path>
9
- <path fill="#fff" d="M499.379 599.667c0-11.323 9.178-20.501 20.499-20.501h0.246c11.322 0 20.501 9.178 20.501 20.501s-9.179 20.499-20.501 20.499h-0.246c-11.322 0-20.499-9.178-20.499-20.499z"></path>
10
- </svg>
@@ -1,14 +0,0 @@
1
- <!-- Generated by IcoMoon.io -->
2
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
3
- <title></title>
4
- <g id="icomoon-ignore">
5
- </g>
6
- <path d="M511.992 163.041c8.157 0 14.769 6.612 14.769 14.769v204.227c0 8.157-6.613 14.769-14.769 14.769s-14.769-6.613-14.769-14.769v-204.227c0-8.157 6.613-14.769 14.769-14.769z"></path>
7
- <path d="M511.998 627.192c8.157 0 14.769 6.613 14.769 14.769v204.227c0 8.157-6.613 14.769-14.769 14.769s-14.769-6.613-14.769-14.769v-204.227c0-8.157 6.613-14.769 14.769-14.769z"></path>
8
- <path d="M860.952 512c0 8.157-6.613 14.769-14.769 14.769h-204.227c-8.159 0-14.769-6.613-14.769-14.769s6.611-14.769 14.769-14.769h204.227c8.157 0 14.769 6.613 14.769 14.769z"></path>
9
- <path d="M396.8 512c0 8.157-6.613 14.769-14.769 14.769h-204.227c-8.157 0-14.769-6.613-14.769-14.769s6.612-14.769 14.769-14.769h204.227c8.157 0 14.769 6.613 14.769 14.769z"></path>
10
- <path d="M758.754 265.251c5.766 5.768 5.766 15.12 0 20.886l-144.412 144.412c-5.768 5.768-15.118 5.768-20.886 0s-5.768-15.12 0-20.888l144.41-144.41c5.768-5.768 15.12-5.768 20.888 0z"></path>
11
- <path d="M430.545 593.455c5.768 5.768 5.768 15.12 0 20.888l-144.412 144.41c-5.766 5.768-15.118 5.768-20.886 0s-5.768-15.12 0-20.888l144.41-144.41c5.768-5.768 15.12-5.768 20.888 0z"></path>
12
- <path d="M758.752 758.752c-5.768 5.768-15.12 5.768-20.888 0l-144.41-144.41c-5.768-5.768-5.768-15.12 0-20.888s15.12-5.768 20.888 0l144.41 144.41c5.768 5.768 5.768 15.12 0 20.888z"></path>
13
- <path d="M430.543 430.549c-5.768 5.768-15.12 5.768-20.888 0l-144.41-144.412c-5.768-5.768-5.768-15.118 0-20.886s15.118-5.768 20.886 0l144.412 144.41c5.768 5.768 5.768 15.12 0 20.888z"></path>
14
- </svg>
package/src/index.tsx DELETED
@@ -1 +0,0 @@
1
- export {BasiqConnect} from './BasiqConnect'
@@ -1,29 +0,0 @@
1
- {
2
- "back": "Back",
3
- "error": "Error",
4
- "loading": "Loading",
5
- "continue": "Continue",
6
- "to_do_this_we_will_ask_you_to": "To do this we will ask you to",
7
- "verify_your_mobile_number_bold": "<strong>Verify</strong> your mobile number",
8
- "verify_your_mobile_number": "Verify your mobile number",
9
- "consent_to_share_your_data_with_us": "<strong>Consent</strong> to share your data with us",
10
- "share_your_financial_data": "<strong>Share</strong> your financial data",
11
- "things_you_should_know": "Things you should know",
12
- "we_dont_share_your_data_without_your_consent": "We don’t share your data without your consent",
13
- "you_can_easily_stop_sharing_your_data_at_any_time": "You can easily stop sharing your data at any time",
14
- "you_can_choose_to_delete_shared_data_when_we_no_longer_need_it": "You can choose to delete shared data when we no longer need it",
15
- "by_proceeding_you_agree_to_the": "By proceeding, you agree to the",
16
- "terms_of_service": "Terms of service",
17
- "privacy_notice": "Privacy notice",
18
- "and": "and",
19
- "use_basiq_to_connect_your_accounts": "${name} use <strong>Basiq</strong> to connect your accounts",
20
- "we_use_basiq_to_connect_your_accounts": "We use <strong>Basiq</strong> to connect your accounts",
21
- "please_enter_the_sms_code_sent_to_your_mobile_number": "Please enter the SMS code sent to your mobile number (ending in xxx${number}).",
22
- "new_sms_code_has_been_sent": "New SMS code has been sent.",
23
- "this_code_doesnt_appear_to_be_valid": "This code doesn't appear to be valid.",
24
- "didnt_receive_the_code": "Didn’t receive the code?",
25
- "resend_sms": "Resend SMS",
26
- "failed_to_send_sms": "Failed to send SMS.",
27
- "page_not_found": "Page not found",
28
- "missing_authentication_token": "Missing Authentication Token"
29
- }
@@ -1,27 +0,0 @@
1
- import i18n from 'i18next';
2
- import { initReactI18next } from 'react-i18next';
3
-
4
- import translationEN from './en/translation.json';
5
-
6
- export const defaultNS = 'ns1';
7
-
8
- // the translations
9
- export const resources = {
10
- en: {
11
- ns1: translationEN
12
- }
13
- } as const;
14
-
15
- i18n.use(initReactI18next) // passes i18n down to react-i18next
16
- .init({
17
- resources,
18
- lng: 'en',
19
- ns: ['ns1'],
20
- interpolation: {
21
- escapeValue: false, // react already safes from xss
22
- prefix: '${',
23
- suffix: '}'
24
- }
25
- });
26
-
27
- export default i18n;
package/src/logo.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
@@ -1 +0,0 @@
1
- /// <reference types="react-scripts" />
@@ -1,9 +0,0 @@
1
- import { resources, defaultNS } from './locales/i18n';
2
-
3
- // react-i18next versions higher than 11.11.0
4
- declare module 'react-i18next' {
5
- interface CustomTypeOptions {
6
- defaultNS: typeof defaultNS;
7
- resources: typeof resources['en'];
8
- }
9
- }
package/src/setupTests.ts DELETED
@@ -1,5 +0,0 @@
1
- // jest-dom adds custom jest matchers for asserting on DOM nodes.
2
- // allows you to do things like:
3
- // expect(element).toHaveTextContent(/react/i)
4
- // learn more: https://github.com/testing-library/jest-dom
5
- import '@testing-library/jest-dom';
package/src/styled.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import 'styled-components';
2
- import { ThemeType } from './styledComponents';
3
-
4
- declare module 'styled-components' {
5
- export interface DefaultTheme extends ThemeType {}
6
- }
@@ -1,73 +0,0 @@
1
- import styled from 'styled-components';
2
- import { devices } from './breakpoints';
3
-
4
- export const Root = styled.div`
5
- white-space: pre-line;
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- position: fixed;
10
- top: 50%;
11
- left: 0;
12
- right: 0;
13
- transform: translate(0, -50%);
14
- height: 100%;
15
- max-height: 812px;
16
-
17
- a {
18
- text-decoration: none;
19
- color: ${({ theme }) => theme.color.endeavour};
20
- }
21
- h3 {
22
- font-weight: normal;
23
- ${({ theme }) => theme.mixin.title()};
24
- strong {
25
- ${({ theme }) => theme.mixin.title()};
26
- }
27
- }
28
- ${devices.phone} {
29
- width: 100%;
30
- height: 100%;
31
- max-height: none;
32
- padding: 0;
33
- }
34
- `;
35
- export const AppContainer = styled.div`
36
- width: 539px;
37
- background-color: ${({ theme }) => theme.color.white};
38
- display: flex;
39
- flex-direction: column;
40
- align-items: center;
41
- padding: 16px;
42
- box-sizing: border-box;
43
- height: 100%;
44
-
45
- ${devices.phone} {
46
- width: 100%;
47
- }
48
-
49
- &::-webkit-scrollbar {
50
- display: none;
51
- }
52
- -ms-overflow-style: none;
53
- scrollbar-width: none;
54
- overflow-y: scroll;
55
- `;
56
- export const AppContainerWrapper = styled.div`
57
- height: 100%;
58
- position: relative;
59
- border: 1px solid ${({ theme }) => theme.color.porcelain};
60
- border-radius: 8px;
61
- overflow: hidden;
62
- ${devices.phone} {
63
- width: 100%;
64
- border-radius: unset;
65
- border: unset;
66
- }
67
- `;
68
- export const AppContainerPage = styled.div`
69
- width: 100%;
70
- display: flex;
71
- flex-direction: column;
72
- align-items: center;
73
- `;
@@ -1,32 +0,0 @@
1
- const breakpoints = {
2
- mobileS: '320px',
3
- mobileL: '480px',
4
- tabletMinus: '767px',
5
- tabletH: '781px',
6
- tablet: '768px',
7
- tabletL: '992px',
8
- laptop: '1024px',
9
- laptopH: '1080px',
10
- laptopXS: '1110px',
11
- laptopS: '1280px',
12
- laptopM: '1366px',
13
- laptopL: '1440px',
14
- laptopXL: '1540px',
15
- desktopS: '1800px',
16
- desktop: '2560px'
17
- };
18
- export const devices = {
19
- fold: `@media only screen and (max-width: ${breakpoints.mobileS})`,
20
- phoneXs: `@media only screen and (max-width: ${breakpoints.mobileL})`,
21
- phone: `@media only screen and (max-width: ${breakpoints.tabletMinus})`,
22
- phoneLandscape: `@media only screen and (max-width: ${breakpoints.mobileL})`,
23
- tabletOnly: `@media only screen and (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.tabletL})`,
24
- iPadProLandscape: `@media only screen and (height: ${breakpoints.laptop}) and (width: ${breakpoints.laptopM})`,
25
- iPadProPortrait: `@media only screen and (max-width: ${breakpoints.laptop}) and (max-height: ${breakpoints.laptopM})`,
26
- iPad: `@media only screen and (max-width: ${breakpoints.laptop}) and (max-height: ${breakpoints.tablet}) `,
27
- tablet: `@media only screen and (max-width: ${breakpoints.tabletL}) `,
28
- desktop: `@media only screen and (min-height: ${breakpoints.tabletH} ) and (min-width: ${breakpoints.laptopS} ) `,
29
- laptop: `@media only screen and (max-width: ${breakpoints.laptopS}) `,
30
- laptopRegularScreenWidth: `@media only screen (max-height: ${breakpoints.laptopXS}) and and (max-width: ${breakpoints.laptopXL}) `,
31
- bigDesktop: `@media only screen and (min-width: ${breakpoints.desktopS}) and (min-height: ${breakpoints.laptopH})) `
32
- };
@@ -1,4 +0,0 @@
1
- export * from './ui';
2
- export * from './theme';
3
- export * from './pages';
4
- export * from './base';
@@ -1,49 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- interface IInputStyled {
4
- filled: boolean;
5
- error: boolean;
6
- }
7
-
8
- export const PageConnectFooterControl = styled.div`
9
- position: absolute;
10
- bottom: 80px;
11
- width: 100%;
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- left: 0;
16
- flex-direction: column;
17
- box-sizing: border-box;
18
- padding: 16px;
19
- `;
20
- export const PageConnectFooterText = styled.span`
21
- color: ${({ theme }) => theme.color.abbey};
22
- font-size: 12px;
23
- `;
24
-
25
- export const InputStyled = styled.input<IInputStyled>`
26
- width: 100%;
27
- height: 64px;
28
- background: ${({ theme, filled, error }) => (error ? theme.color.wePeep : filled ? theme.color.linkWater : theme.color.porcelainSecond)};
29
- color: ${({ theme, error }) => (error ? theme.color.cerise : theme.color.endeavour)};
30
- border-radius: 2px;
31
- text-align: center;
32
- font-size: 32px;
33
- border: none;
34
- box-shadow: none;
35
- letter-spacing: 20px;
36
- text-indent: 20px;
37
- `;
38
-
39
- export const InputContainer = styled.div`
40
- width: 100%;
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- `;
45
- export const DivAsLink = styled.div`
46
- color: ${({ theme }) => theme.color.endeavour};
47
- display: inherit;
48
- cursor: pointer;
49
- `;
@@ -1,126 +0,0 @@
1
- import styled, { css } from 'styled-components';
2
- import { ButtonStyled } from '../ui';
3
- import { hexToRGBa } from '../../helpers';
4
- import { devices } from '../breakpoints';
5
-
6
- interface IPageStyledProps {
7
- buttonCount?: number;
8
- horizontal?: boolean;
9
- }
10
-
11
- interface IStatusMessage {
12
- error?: boolean;
13
- }
14
-
15
- interface IPageControlsSectionProps {
16
- notEmpty: boolean;
17
- }
18
- interface IHorizontalProps {
19
- horizontal?: boolean;
20
- }
21
- export const PageStyled = styled.div<IPageStyledProps>`
22
- width: 100%;
23
- height: 100%;
24
- ${({ buttonCount, horizontal }) =>
25
- buttonCount && buttonCount > 0
26
- ? horizontal
27
- ? 'padding-bottom: 96px;'
28
- : `padding-bottom: ${46 + 50 * buttonCount}px;`
29
- : 'padding-bottom: 16px;'}
30
- `;
31
- export const PageSubtitle = styled.div`
32
- ${({ theme }) => theme.mixin.subtitle()};
33
- `;
34
-
35
- export const PageMainContainer = styled.div`
36
- display: flex;
37
- align-items: center;
38
- flex-direction: column;
39
- `;
40
- export const PageControlsSection = styled.div<IPageControlsSectionProps>`
41
- position: absolute;
42
- bottom: 0;
43
- left: 0;
44
- right: 0;
45
- ${({ notEmpty }) => `padding: ${notEmpty ? '16px' : '0'}`};
46
- background-color: ${({ theme }) => theme.color.white};
47
- border-top: 1px solid ${({ theme }) => theme.color.porcelainLight};
48
- `;
49
- export const PageShadowWrapper = styled.div<IHorizontalProps>`
50
- width: 100%;
51
- ${({ horizontal }) =>
52
- horizontal &&
53
- css`
54
- display: flex;
55
- align-items: center;
56
- justify-content: space-between;
57
-
58
- ${ButtonStyled} {
59
- margin-bottom: 0;
60
- margin-right: 16px;
61
-
62
- &:last-child {
63
- margin-right: unset;
64
- }
65
- }
66
- `}
67
- `;
68
- export const PageShadow = styled.div`
69
- position: absolute;
70
- height: 71px;
71
- left: 0;
72
- right: 0;
73
- top: -71px;
74
- background: linear-gradient(180deg, #cecece 0%, ${hexToRGBa('#cecece', 0)} 100%);
75
- opacity: 0.8;
76
- transform: rotate(-180deg);
77
- pointer-events: none;
78
- `;
79
- export const PageHeader = styled.header`
80
- margin-bottom: 32px;
81
- width: 100%;
82
- border-radius: 8px;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- background-color: ${({ theme }) => theme.color.porcelainSecond};
87
- padding: 16px;
88
- box-sizing: border-box;
89
- height: 150px;
90
- ${devices.phone} {
91
- background-color: unset;
92
- overflow: initial;
93
- height: 150px;
94
- padding: 16px;
95
- }
96
- img {
97
- border-radius: 4px;
98
- width: auto !important;
99
- height: auto;
100
- max-width: 100%;
101
- max-height: 100%;
102
- ${devices.phone} {
103
- width: 100%;
104
- padding: 16px;
105
- }
106
- }
107
- `;
108
-
109
- export const PageContent = styled.div`
110
- width: 100%;
111
- `;
112
- export const StatusMessage = styled.div<IStatusMessage>`
113
- width: 100%;
114
- background: ${({ theme, error }) => (error ? theme.color.wePeep : theme.color.iceberg)};
115
- border-radius: 4px;
116
- padding: 11px;
117
- box-sizing: border-box;
118
- text-align: center;
119
- display: flex;
120
- justify-content: center;
121
- align-items: center;
122
- font-weight: 400;
123
- font-size: 14px;
124
- color: ${({ theme, error }) => (error ? theme.color.cerise : theme.color.gossamer)};
125
- margin-bottom: 16px;
126
- `;
@@ -1,4 +0,0 @@
1
- export * from './basic';
2
- export * from './auth';
3
- export * from './start';
4
- export * from './notFound';
@@ -1,70 +0,0 @@
1
- import styled from 'styled-components';
2
- import { IconWrapper } from '../ui';
3
- import { PageContent, PageMainContainer } from './basic';
4
-
5
- interface IStatusScreenCircleContainer {
6
- type: 'success' | 'warning' | 'error';
7
- }
8
-
9
- export const PageStatusScreenMain = styled(PageMainContainer)`
10
- height: 100%;
11
- `;
12
- export const PageStatusScreenContent = styled(PageContent)`
13
- height: inherit;
14
- width: 100%;
15
- align-items: center;
16
- justify-content: center;
17
- display: flex;
18
- flex-direction: column;
19
- text-align: center;
20
- position: absolute;
21
- top: 0;
22
- bottom: 0;
23
- left: 0;
24
- right: 0;
25
- `;
26
- export const StatusScreenCircleContainer = styled.div<IStatusScreenCircleContainer>`
27
- width: 64px;
28
- height: 64px;
29
- background-color: ${({ theme, type }) => {
30
- switch (type) {
31
- case 'success':
32
- return theme.color.emerald;
33
- case 'error':
34
- return theme.color.sunsetOrange;
35
- case 'warning':
36
- return theme.color.hokeyPokey;
37
- default:
38
- return theme.color.porcelain;
39
- }
40
- }};
41
- border-radius: 50%;
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- margin-bottom: 24px;
46
-
47
- ${IconWrapper} {
48
- width: 40px;
49
- color: ${({ theme }) => theme.color.white};
50
- }
51
- `;
52
- export const StatusScreenErrorCode = styled.span`
53
- font-size: 12px;
54
- margin-top: 16px;
55
- color: ${({ theme }) => theme.color.osloGrey};
56
- `;
57
- export const PageSuccessImgContainer = styled.div`
58
- margin-bottom: 24px;
59
- width: 64px;
60
- height: 64px;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- border-radius: 50%;
65
- overflow: hidden;
66
- img {
67
- width: 100%;
68
- height: auto;
69
- }
70
- `;
@@ -1,6 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- export const InnerContainer = styled.div`
4
- margin-top: 16px;
5
- width: 100%;
6
- `;
@@ -1,25 +0,0 @@
1
- import { createGlobalStyle } from 'styled-components';
2
- import MarkW1GBook from '../fonts/Mark-W1G-Book.otf';
3
- import MarkW1GBold from '../fonts/Mark-W1G-Bold.otf';
4
-
5
- export default createGlobalStyle`
6
-
7
- @font-face {
8
- font-family: MarkW1G;
9
- src: url(${MarkW1GBook}) format('opentype');
10
- }
11
- @font-face {
12
- font-family: MarkW1G;
13
- font-weight: bold;
14
- src: url(${MarkW1GBold}) format('opentype');
15
- }
16
-
17
- body{
18
- font-family: 'MarkW1G', sans-serif;
19
- }
20
- body * {
21
- font-family: 'MarkW1G', sans-serif;
22
- font-size: 14px;
23
- font-style: normal;
24
- }
25
- `;
@@ -1,58 +0,0 @@
1
- export const theme = {
2
- color: {
3
- white: '#fff',
4
- porcelain: '#e2E8Ea',
5
- porcelainSecond: '#f5F7F8',
6
- porcelainLight: '#e5Eaec',
7
- porcelainSecondLight: '#f7F9F9',
8
- iron: '#cbd1D3',
9
- ironSecond: '#dcdedf',
10
- casper: '#90a4Ae',
11
- mercury: '#e5E5E5',
12
- dodgerBlue: '#4c6Cff',
13
- dodgerBlueLight: '#5e7Bff',
14
- royalBlue: '#4461e6',
15
- bostonBlue: '#367ab9',
16
- endeavour: '#0459a8',
17
- congressBlue: '#045097',
18
- brilliantBlue: '#0075dc',
19
- curiousBlue: '#2784da',
20
- iceberg: '#cdf2ed',
21
- linkWater: '#cddeee',
22
- spindle: '#b4Cde5',
23
- cyprus: '#002d3C',
24
- gossamer: '#06bea6',
25
- emerald: '#4fc35A',
26
- hokeyPokey: '#fabe34',
27
- hokeyPokeyLight: '#f9C858',
28
- anzac: '#e1B141',
29
- cerise: '#d63F5a',
30
- sunsetOrange: '#fe493f',
31
- wePeep: '#f7d9de',
32
- ebony: '#130f26',
33
- abbey: '#4e5457',
34
- osloGrey: '#7f888c',
35
- loblolly: '#c1c8cc',
36
- jumbo: '#7d7d84',
37
- blackPearl: '#061D24',
38
- blueBayoux: '#4b6a75'
39
- },
40
- mixin: {
41
- subtitle: () => ` margin-top: 8px;
42
- margin-bottom: 4px;
43
- width: 100%;
44
- display: flex;
45
- align-items: center;
46
- justify-content: space-between;`,
47
-
48
- title: () => ` font-size: 26px;
49
- line-height: 30px;
50
- letter-spacing: -0.2px;
51
- margin-top: 0;
52
- margin-bottom: 24px;
53
- color: #130f26;
54
- white-space: pre-line;
55
- `
56
- }
57
- };
58
- export type ThemeType = typeof theme;
@@ -1,96 +0,0 @@
1
- import styled, { css, keyframes } from 'styled-components';
2
-
3
- interface IIconWrapper {
4
- rotating: boolean;
5
- }
6
-
7
- export const rotate = keyframes`
8
- from {
9
- -ms-transform: rotate(0deg);
10
- -moz-transform: rotate(0deg);
11
- -webkit-transform: rotate(0deg);
12
- -o-transform: rotate(0deg);
13
- transform: rotate(0deg);
14
- }
15
- to {
16
- -ms-transform: rotate(360deg);
17
- -moz-transform: rotate(360deg);
18
- -webkit-transform: rotate(360deg);
19
- -o-transform: rotate(360deg);
20
- transform: rotate(360deg);
21
- }
22
- `;
23
- export const SimpleButton = styled.button`
24
- border-radius: 2px;
25
- width: 100%;
26
- display: flex;
27
- align-items: center;
28
- border: none;
29
- cursor: pointer;
30
- margin-bottom: 8px;
31
- padding: 10px;
32
- `;
33
-
34
- export const Input = styled.input`
35
- height: 48px;
36
- background: ${({ theme }) => theme.color.porcelainSecond};
37
- border-radius: 2px;
38
- border: none;
39
- width: 100%;
40
- box-sizing: border-box;
41
- padding: 0 16px;
42
- color: ${({ theme }) => theme.color.ebony};
43
- margin-bottom: 16px;
44
- font-size: 16px;
45
-
46
- &::placeholder {
47
- color: ${({ theme }) => theme.color.osloGrey};
48
- opacity: 1;
49
- }
50
-
51
- &:-ms-input-placeholder {
52
- color: ${({ theme }) => theme.color.osloGrey};
53
- }
54
-
55
- &::-ms-input-placeholder {
56
- color: ${({ theme }) => theme.color.osloGrey};
57
- }
58
-
59
- &:focus-visible {
60
- outline: none;
61
- background-color: ${({ theme }) => theme.color.spindle};
62
- }
63
-
64
- &:disabled {
65
- background-color: ${({ theme }) => theme.color.porcelain};
66
- color: ${({ theme }) => theme.color.casper};
67
- cursor: not-allowed;
68
- }
69
- `;
70
- export const H4Styled = styled.h4`
71
- cursor: pointer;
72
- user-select: none;
73
- ${({ theme }) => theme.mixin.subtitle()};
74
- `;
75
-
76
- export const Spacer = styled.div`
77
- display: flex;
78
- width: 100%;
79
- margin-top: 12px;
80
- margin-bottom: 12px;
81
- height: 1px;
82
- background-color: ${({ theme }) => theme.color.porcelain};
83
- `;
84
- export const IconWrapper = styled.span<IIconWrapper>`
85
- display: flex;
86
- width: 22px;
87
- ${({ rotating }) =>
88
- rotating &&
89
- css`
90
- animation: ${rotate} 2s linear infinite;
91
- `}
92
- };
93
- svg, img {
94
- width: 100%;
95
- }
96
- `;