@basiq/connect-auth 0.1.78 → 0.1.79

package/src/styledComponents/pages/auth.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+interface IInputStyled {
+	filled: boolean;
+	error: boolean;
+}
+
+export const PageConnectFooterControl = styled.div`
+	position: absolute;
+	bottom: 80px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	left: 0;
+	flex-direction: column;
+	box-sizing: border-box;
+	padding: 16px;
+`;
+export const PageConnectFooterText = styled.span`
+	color: ${({ theme }) => theme.color.abbey};
+	font-size: 12px;
+`;
+
+export const InputStyled = styled.input<IInputStyled>`
+	width: 100%;
+	height: 64px;
+	background: ${({ theme, filled, error }) => (error ? theme.color.wePeep : filled ? theme.color.linkWater : theme.color.porcelainSecond)};
+	color: ${({ theme, error }) => (error ? theme.color.cerise : theme.color.endeavour)};
+	border-radius: 2px;
+	text-align: center;
+	font-size: 32px;
+	border: none;
+	box-shadow: none;
+	letter-spacing: 20px;
+	text-indent: 20px;
+`;
+
+export const InputContainer = styled.div`
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+export const DivAsLink = styled.div`
+	color: ${({ theme }) => theme.color.endeavour};
+	display: inherit;
+	cursor: pointer;
+`;

package/src/styledComponents/pages/basic.ts

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components';
+import { ButtonStyled } from '../ui';
+import { hexToRGBa } from '../../helpers';
+import { devices } from '../breakpoints';
+
+interface IPageStyledProps {
+	buttonCount?: number;
+	horizontal?: boolean;
+}
+
+interface IStatusMessage {
+	error?: boolean;
+}
+
+interface IPageControlsSectionProps {
+	notEmpty: boolean;
+}
+interface IHorizontalProps {
+	horizontal?: boolean;
+}
+export const PageStyled = styled.div<IPageStyledProps>`
+	width: 100%;
+	height: 100%;
+	${({ buttonCount, horizontal }) =>
+		buttonCount && buttonCount > 0
+			? horizontal
+				? 'padding-bottom: 96px;'
+				: `padding-bottom: ${46 + 50 * buttonCount}px;`
+			: 'padding-bottom: 16px;'}
+`;
+export const PageSubtitle = styled.div`
+	${({ theme }) => theme.mixin.subtitle()};
+`;
+
+export const PageMainContainer = styled.div`
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+`;
+export const PageControlsSection = styled.div<IPageControlsSectionProps>`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	${({ notEmpty }) => `padding: ${notEmpty ? '16px' : '0'}`};
+	background-color: ${({ theme }) => theme.color.white};
+	border-top: 1px solid ${({ theme }) => theme.color.porcelainLight};
+`;
+export const PageShadowWrapper = styled.div<IHorizontalProps>`
+	width: 100%;
+	${({ horizontal }) =>
+		horizontal &&
+		css`
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			${ButtonStyled} {
+				margin-bottom: 0;
+				margin-right: 16px;
+
+				&:last-child {
+					margin-right: unset;
+				}
+			}
+		`}
+`;
+export const PageShadow = styled.div`
+	position: absolute;
+	height: 71px;
+	left: 0;
+	right: 0;
+	top: -71px;
+	background: linear-gradient(180deg, #cecece 0%, ${hexToRGBa('#cecece', 0)} 100%);
+	opacity: 0.8;
+	transform: rotate(-180deg);
+	pointer-events: none;
+`;
+export const PageHeader = styled.header`
+	margin-bottom: 32px;
+	width: 100%;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: ${({ theme }) => theme.color.porcelainSecond};
+	padding: 16px;
+	box-sizing: border-box;
+	height: 150px;
+	${devices.phone} {
+		background-color: unset;
+		overflow: initial;
+		height: 150px;
+		padding: 16px;
+	}
+	img {
+		border-radius: 4px;
+		width: auto !important;
+		height: auto;
+		max-width: 100%;
+		max-height: 100%;
+		${devices.phone} {
+			width: 100%;
+			padding: 16px;
+		}
+	}
+`;
+
+export const PageContent = styled.div`
+	width: 100%;
+`;
+export const StatusMessage = styled.div<IStatusMessage>`
+	width: 100%;
+	background: ${({ theme, error }) => (error ? theme.color.wePeep : theme.color.iceberg)};
+	border-radius: 4px;
+	padding: 11px;
+	box-sizing: border-box;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-weight: 400;
+	font-size: 14px;
+	color: ${({ theme, error }) => (error ? theme.color.cerise : theme.color.gossamer)};
+	margin-bottom: 16px;
+`;

package/src/styledComponents/pages/index.ts

@@ -0,0 +1,4 @@
+export * from './basic';
+export * from './auth';
+export * from './start';
+export * from './notFound';

package/src/styledComponents/pages/notFound.ts

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import { IconWrapper } from '../ui';
+import { PageContent, PageMainContainer } from './basic';
+
+interface IStatusScreenCircleContainer {
+	type: 'success' | 'warning' | 'error';
+}
+
+export const PageStatusScreenMain = styled(PageMainContainer)`
+	height: 100%;
+`;
+export const PageStatusScreenContent = styled(PageContent)`
+	height: inherit;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+`;
+export const StatusScreenCircleContainer = styled.div<IStatusScreenCircleContainer>`
+	width: 64px;
+	height: 64px;
+	background-color: ${({ theme, type }) => {
+		switch (type) {
+			case 'success':
+				return theme.color.emerald;
+			case 'error':
+				return theme.color.sunsetOrange;
+			case 'warning':
+				return theme.color.hokeyPokey;
+			default:
+				return theme.color.porcelain;
+		}
+	}};
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 24px;
+
+	${IconWrapper} {
+		width: 40px;
+		color: ${({ theme }) => theme.color.white};
+	}
+`;
+export const StatusScreenErrorCode = styled.span`
+	font-size: 12px;
+	margin-top: 16px;
+	color: ${({ theme }) => theme.color.osloGrey};
+`;
+export const PageSuccessImgContainer = styled.div`
+	margin-bottom: 24px;
+	width: 64px;
+	height: 64px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	overflow: hidden;
+	img {
+		width: 100%;
+		height: auto;
+	}
+`;

package/src/styledComponents/pages/start.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const InnerContainer = styled.div`
+	margin-top: 16px;
+	width: 100%;
+`;

package/src/styledComponents/styles.ts

@@ -0,0 +1,25 @@
+import { createGlobalStyle } from 'styled-components';
+import MarkW1GBook from '../fonts/Mark-W1G-Book.otf';
+import MarkW1GBold from '../fonts/Mark-W1G-Bold.otf';
+
+export default createGlobalStyle`
+  
+@font-face {
+            font-family: MarkW1G;
+            src: url(${MarkW1GBook}) format('opentype');
+        }
+        @font-face {
+            font-family: MarkW1G;
+            font-weight: bold;
+            src: url(${MarkW1GBold}) format('opentype');
+        }
+
+body{
+  font-family: 'MarkW1G', sans-serif;
+}
+body * {
+  font-family: 'MarkW1G', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+}
+`;

package/src/styledComponents/theme.ts

@@ -0,0 +1,58 @@
+export const theme = {
+	color: {
+		white: '#fff',
+		porcelain: '#e2E8Ea',
+		porcelainSecond: '#f5F7F8',
+		porcelainLight: '#e5Eaec',
+		porcelainSecondLight: '#f7F9F9',
+		iron: '#cbd1D3',
+		ironSecond: '#dcdedf',
+		casper: '#90a4Ae',
+		mercury: '#e5E5E5',
+		dodgerBlue: '#4c6Cff',
+		dodgerBlueLight: '#5e7Bff',
+		royalBlue: '#4461e6',
+		bostonBlue: '#367ab9',
+		endeavour: '#0459a8',
+		congressBlue: '#045097',
+		brilliantBlue: '#0075dc',
+		curiousBlue: '#2784da',
+		iceberg: '#cdf2ed',
+		linkWater: '#cddeee',
+		spindle: '#b4Cde5',
+		cyprus: '#002d3C',
+		gossamer: '#06bea6',
+		emerald: '#4fc35A',
+		hokeyPokey: '#fabe34',
+		hokeyPokeyLight: '#f9C858',
+		anzac: '#e1B141',
+		cerise: '#d63F5a',
+		sunsetOrange: '#fe493f',
+		wePeep: '#f7d9de',
+		ebony: '#130f26',
+		abbey: '#4e5457',
+		osloGrey: '#7f888c',
+		loblolly: '#c1c8cc',
+		jumbo: '#7d7d84',
+		blackPearl: '#061D24',
+		blueBayoux: '#4b6a75'
+	},
+	mixin: {
+		subtitle: () => ` margin-top: 8px;
+                        margin-bottom: 4px;
+                        width: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;`,
+
+		title: () => `  font-size: 26px;
+                    line-height: 30px;
+                    letter-spacing: -0.2px;
+                    margin-top: 0;
+                    margin-bottom: 24px;
+                    color: #130f26;
+                    white-space: pre-line;
+  `
+	}
+};
+export type ThemeType = typeof theme;

package/src/styledComponents/ui/basic.ts

@@ -0,0 +1,96 @@
+import styled, { css, keyframes } from 'styled-components';
+
+interface IIconWrapper {
+	rotating: boolean;
+}
+
+export const rotate = keyframes`
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+`;
+export const SimpleButton = styled.button`
+	border-radius: 2px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	border: none;
+	cursor: pointer;
+	margin-bottom: 8px;
+	padding: 10px;
+`;
+
+export const Input = styled.input`
+	height: 48px;
+	background: ${({ theme }) => theme.color.porcelainSecond};
+	border-radius: 2px;
+	border: none;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 16px;
+	color: ${({ theme }) => theme.color.ebony};
+	margin-bottom: 16px;
+	font-size: 16px;
+
+	&::placeholder {
+		color: ${({ theme }) => theme.color.osloGrey};
+		opacity: 1;
+	}
+
+	&:-ms-input-placeholder {
+		color: ${({ theme }) => theme.color.osloGrey};
+	}
+
+	&::-ms-input-placeholder {
+		color: ${({ theme }) => theme.color.osloGrey};
+	}
+
+	&:focus-visible {
+		outline: none;
+		background-color: ${({ theme }) => theme.color.spindle};
+	}
+
+	&:disabled {
+		background-color: ${({ theme }) => theme.color.porcelain};
+		color: ${({ theme }) => theme.color.casper};
+		cursor: not-allowed;
+	}
+`;
+export const H4Styled = styled.h4`
+	cursor: pointer;
+	user-select: none;
+	${({ theme }) => theme.mixin.subtitle()};
+`;
+
+export const Spacer = styled.div`
+	display: flex;
+	width: 100%;
+	margin-top: 12px;
+	margin-bottom: 12px;
+	height: 1px;
+	background-color: ${({ theme }) => theme.color.porcelain};
+`;
+export const IconWrapper = styled.span<IIconWrapper>`
+    display: flex;
+    width: 22px;
+    ${({ rotating }) =>
+		rotating &&
+		css`
+			animation: ${rotate} 2s linear infinite;
+		`}
+    };
+    svg, img {
+        width: 100%;
+    }
+`;

package/src/styledComponents/ui/button.ts

@@ -0,0 +1,112 @@
+import styled, { css } from 'styled-components';
+import { SimpleButton } from './basic';
+import { ButtonType } from '../../components/ui/Button';
+
+export const ButtonLabel = styled.span`
+	font-size: 18px;
+`;
+
+interface IButtonStyled {
+	buttonType?: ButtonType;
+	disabled: boolean;
+	onClick: () => void;
+}
+export const ButtonStyled = styled(SimpleButton)<IButtonStyled>`
+	min-height: 40px;
+	justify-content: center;
+	background-color: ${(props) => props.theme.color.endeavour};
+	text-align: center;
+	box-shadow: none;
+	border: none;
+	cursor: pointer;
+	color: ${({ theme }) => theme.color.white};
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+	&:hover {
+		background-color: ${({ theme }) => theme.color.bostonBlue};
+	}
+	&:active {
+		background-color: ${({ theme }) => theme.color.congressBlue};
+	}
+	${({ buttonType, theme }) => {
+		switch (buttonType) {
+			case 'secondary':
+				return css`
+					color: ${theme.color.ebony};
+					background-color: ${theme.color.porcelainSecond};
+					&:hover {
+						color: ${theme.color.abbey};
+						background-color: ${theme.color.porcelainSecondLight};
+					}
+					&:active {
+						background-color: ${theme.color.ironSecond};
+					}
+				`;
+			case 'tiny':
+				return css`
+					width: auto;
+					min-height: 32px;
+					padding: 6px 16px;
+					box-sizing: border-box;
+					font-size: 14px;
+					color: ${theme.color.cyprus};
+					background-color: ${theme.color.hokeyPokey};
+					&:hover {
+						background-color: ${theme.color.hokeyPokeyLight};
+					}
+					&:active {
+						background-color: ${theme.color.anzac};
+					}
+				`;
+
+			case 'back':
+				return css`
+					background: none;
+					justify-content: initial;
+					padding: 0;
+					min-height: unset;
+					color: ${theme.color.casper};
+					width: auto;
+					img {
+						width: 25px;
+						filter: invert(68%) sepia(13%) saturate(348%) hue-rotate(155deg) brightness(91%) contrast(94%);
+					}
+					&:hover {
+						color: ${theme.color.abbey};
+						background-color: unset;
+						img {
+							filter: invert(31%) sepia(10%) saturate(313%) hue-rotate(155deg) brightness(96%) contrast(87%);
+						}
+					}
+					&:active {
+						color: ${theme.color.jumbo};
+						background-color: unset;
+						img {
+							filter: invert(49%) sepia(0%) saturate(5%) hue-rotate(29deg) brightness(99%) contrast(83%);
+						}
+					}
+					&:disabled {
+						color: ${theme.color.porcelain};
+						background-color: unset !important;
+						img {
+							color: ${theme.color.porcelain};
+						}
+					}
+				`;
+			default:
+				return '';
+		}
+	}}
+	img {
+		color: ${({ theme }) => theme.color.casper};
+		margin-right: 3px;
+	}
+
+	&:disabled {
+		background-color: ${({ theme }) => theme.color.porcelain};
+		color: ${({ theme }) => theme.color.casper};
+		cursor: not-allowed;
+	}
+`;

package/src/styledComponents/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './basic';
+export * from './button';
+export * from './modals';

package/src/styledComponents/ui/modals.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { hexToRGBa } from '../../helpers';
+import { IconWrapper } from './basic';
+
+interface IModalStyled {
+	disableTransparency: boolean;
+}
+
+export const ModalStyled = styled.div<IModalStyled>`
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: ${({ theme, disableTransparency }) => (disableTransparency ? theme.color.jumbo : hexToRGBa(theme.color.blackPearl, 0.7))};
+	z-index: 1000000000;
+	padding: 16px;
+
+	a {
+		margin-bottom: 8px;
+	}
+`;
+export const LoadingModalStyled = styled.div<IModalStyled>`
+	box-shadow: ${({ theme, disableTransparency }) => (disableTransparency ? 'none' : `0 1px 2px ${hexToRGBa(theme.color.blueBayoux, 0.3)}`)};
+	border-radius: 2px;
+	padding: 16px 12px;
+	font-size: 16px;
+	line-height: 16px;
+	color: ${({ theme }) => theme.color.white};
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	${IconWrapper} {
+		filter: invert(1);
+		margin-bottom: 15px;
+		width: 48px;
+	}
+`;
+export const LoadingModalText = styled.span`
+	font-size: 18px;
+	white-space: pre-line;
+	text-align: center;
+	line-height: 30px;
+`;

package/.idea/connect-code-validaiton.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jsLinters/eslint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/connect-code-validaiton.iml" filepath="$PROJECT_DIR$/.idea/connect-code-validaiton.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/build/asset-manifest.json

@@ -1,15 +0,0 @@
-{
-  "files": {
-    "main.js": "/basiqio/connect-code-validaiton/static/js/main.308297e7.js",
-    "static/media/Mark-W1G-Bold.otf": "/basiqio/connect-code-validaiton/static/media/Mark-W1G-Bold.25001c0659b6d43e86d2.otf",
-    "static/media/Mark-W1G-Book.otf": "/basiqio/connect-code-validaiton/static/media/Mark-W1G-Book.9763eea8f13903a47362.otf",
-    "static/media/loading_indicator.svg": "/basiqio/connect-code-validaiton/static/media/loading_indicator.0de376bea3ef05218f67099d42c6e7f7.svg",
-    "static/media/error.svg": "/basiqio/connect-code-validaiton/static/media/error.ba856527ba47d8c7cf94aa10a4ff4e33.svg",
-    "static/media/back.svg": "/basiqio/connect-code-validaiton/static/media/back.3e5461de3426c624c329c95f21e691e9.svg",
-    "index.html": "/basiqio/connect-code-validaiton/index.html",
-    "main.308297e7.js.map": "/basiqio/connect-code-validaiton/static/js/main.308297e7.js.map"
-  },
-  "entrypoints": [
-    "static/js/main.308297e7.js"
-  ]
-}

package/build/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/basiqio/connect-code-validaito/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/basiqio/connect-code-validaito/logo192.png"/><link rel="manifest" href="/basiqio/connect-code-validaito/manifest.json"/><title>Basiq Connect</title><script defer="defer" src="/basiqio/connect-code-validaiton/static/js/main.308297e7.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>