Skip to content

Commit 88f136d

Browse files
itsrachelfishitsrachelfish
committed
WIP
1 parent 7db68ba commit 88f136d

File tree

14 files changed

+662
-0
lines changed

14 files changed

+662
-0
lines changed

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"qrcode.react": "^3.1.0",
4141
"rc-dialog": "^8.9.0",
4242
"rc-select": "11.5.0",
43+
"rc-switch": "^4.0.0",
4344
"rc-tooltip": "4.2.1",
4445
"react": "17.0.2",
4546
"react-dom": "17.0.2",

‎app/src/App.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
1919
@import '../node_modules/rc-dialog/assets/index.css';
2020
@import './assets/styles/rc-select.scss';
21+
@import './assets/styles/rc-switch.scss';
2122

2223
// react-toastify styles
2324
@import '../node_modules/react-toastify/dist/ReactToastify.css';

‎app/src/AppRoutes.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'
99
const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
1010
const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
1111
const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
12+
const LazyCustomSessionPage = React.lazy(
13+
() => import('components/connect/CustomSessionPage'),
14+
);
1215

1316
const AppRoutes: React.FC = () => {
1417
return (
@@ -63,6 +66,14 @@ const AppRoutes: React.FC = () => {
6366
</Layout>
6467
}
6568
/>
69+
<Route
70+
path="connect/custom"
71+
element={
72+
<Layout>
73+
<LazyCustomSessionPage />
74+
</Layout>
75+
}
76+
/>
6677
</Route>
6778
</Routes>
6879
);

‎app/src/assets/styles/rc-switch.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
$switchPrefixCls: rc-switch;
2+
3+
$duration: 0.3s;
4+
5+
.rc-switch {
6+
position: relative;
7+
display: inline-block;
8+
box-sizing: border-box;
9+
width: 44px;
10+
height: 22px;
11+
line-height: 20px;
12+
padding: 0;
13+
vertical-align: middle;
14+
border-radius: 20px 20px;
15+
border: 1px solid #ccc;
16+
background-color: #ccc;
17+
cursor: pointer;
18+
transition: all $duration cubic-bezier(0.35, 0, 0.25, 1);
19+
20+
&-inner {
21+
color: #fff;
22+
font-size: 12px;
23+
position: absolute;
24+
left: 24px;
25+
top: 0;
26+
}
27+
28+
&:after {
29+
position: absolute;
30+
width: 18px;
31+
height: 18px;
32+
left: 2px;
33+
top: 1px;
34+
border-radius: 50% 50%;
35+
background-color: #fff;
36+
content: ' ';
37+
cursor: pointer;
38+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
39+
transform: scale(1);
40+
transition: left $duration cubic-bezier(0.35, 0, 0.25, 1);
41+
animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
42+
animation-duration: $duration;
43+
animation-name: rcSwitchOff;
44+
}
45+
46+
&:hover:after {
47+
transform: scale(1.1);
48+
animation-name: rcSwitchOn;
49+
}
50+
51+
&:focus {
52+
box-shadow: 0 0 0 2px tint(#2db7f5, 80%);
53+
outline: none;
54+
}
55+
56+
&-checked {
57+
border: 1px solid #87d068;
58+
background-color: #87d068;
59+
60+
.rc-switch-inner {
61+
left: 6px;
62+
}
63+
64+
&:after {
65+
left: 22px;
66+
}
67+
}
68+
69+
&-disabled {
70+
cursor: no-drop;
71+
background: #ccc;
72+
border-color: #ccc;
73+
74+
&:after {
75+
background: #9e9e9e;
76+
animation-name: none;
77+
cursor: no-drop;
78+
}
79+
80+
&:hover:after {
81+
transform: scale(1);
82+
animation-name: none;
83+
}
84+
}
85+
86+
&-label {
87+
display: inline-block;
88+
line-height: 20px;
89+
font-size: 14px;
90+
padding-left: 10px;
91+
vertical-align: middle;
92+
white-space: normal;
93+
pointer-events: none;
94+
user-select: text;
95+
}
96+
}
97+
98+
@keyframes rcSwitchOn {
99+
0% {
100+
transform: scale(1);
101+
}
102+
50% {
103+
transform: scale(1.25);
104+
}
105+
100% {
106+
transform: scale(1.1);
107+
}
108+
}
109+
110+
@keyframes rcSwitchOff {
111+
0% {
112+
transform: scale(1.1);
113+
}
114+
100% {
115+
transform: scale(1);
116+
}
117+
}

‎app/src/components/base/grid.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
import React, { CSSProperties } from 'react';
22

3+
/**
4+
* This component represents a container in the bootstrap Grid layout
5+
*/
6+
export const Container: React.FC<{
7+
className?: string;
8+
style?: CSSProperties;
9+
}> = ({ children, className, style }) => {
10+
const cn: string[] = ['container'];
11+
className && cn.push(className);
12+
return (
13+
<div className={cn.join(' ')} style={style}>
14+
{children}
15+
</div>
16+
);
17+
};
18+
319
/**
420
* This component represents a Row in the bootstrap Grid layout
521
*/

‎app/src/components/common/OverlayFormWrap.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { ReactNode, useEffect } from 'react';
2+
import { observer } from 'mobx-react-lite';
3+
import styled from '@emotion/styled';
4+
import { ArrowLeft, Button, Column, Container, Row, Close } from 'components/base';
5+
import { DisplayLarge, Header } from './v2/Text';
6+
7+
const Styled = {
8+
Wrapper: styled.div`
9+
h4 {
10+
color: ${props => props.theme.colors.offWhite};
11+
}
12+
`,
13+
BackLink: styled(Button)`
14+
display: inline-block;
15+
position: absolute;
16+
top: 30px;
17+
right: 0px;
18+
left: auto;
19+
z-index: 10;
20+
21+
@media (${props => props.theme.breakpoints.m}) {
22+
top: 30px;
23+
right: 0px;
24+
}
25+
`,
26+
Title: styled(DisplayLarge)`
27+
font-weight: ${props => props.theme.fonts.open.bold};
28+
margin-bottom: 16px;
29+
`,
30+
Content: styled.div``,
31+
};
32+
33+
interface Props {
34+
title: string;
35+
description: ReactNode;
36+
onBackClick?: () => void;
37+
}
38+
39+
const OverlayFormWrap: React.FC<Props> = ({
40+
title,
41+
description,
42+
onBackClick,
43+
children,
44+
}) => {
45+
// scroll to the top of the screen when this comp is mounted
46+
useEffect(() => window.scrollTo(0, 0), []);
47+
48+
const { Wrapper, BackLink, Title, Content } = Styled;
49+
return (
50+
<Wrapper>
51+
{onBackClick && (
52+
<BackLink onClick={onBackClick} ghost borderless>
53+
<Close />
54+
</BackLink>
55+
)}
56+
<Container>
57+
<Row>
58+
<Column className="col-md-8 offset-md-2">
59+
<Title bold>{title}</Title>
60+
<Header muted space={32}>
61+
{description}
62+
</Header>
63+
<Content>{children}</Content>
64+
</Column>
65+
</Row>
66+
</Container>
67+
</Wrapper>
68+
);
69+
};
70+
71+
export default observer(OverlayFormWrap);

‎app/src/components/common/v2/FormSwitch.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { observer } from 'mobx-react-lite';
3+
import styled from '@emotion/styled';
4+
import Switch from 'rc-switch';
5+
6+
const Styled = {
7+
Wrapper: styled.div``,
8+
Switch: styled(Switch)`
9+
&.rc-switch-checked {
10+
border: 1px solid ${props => props.theme.colors.iris};
11+
background-color: ${props => props.theme.colors.iris};
12+
}
13+
`,
14+
};
15+
16+
interface Props {
17+
checked?: boolean;
18+
onChange?: (checked: boolean) => void;
19+
}
20+
21+
const FormSelect: React.FC<Props> = ({ checked, onChange }) => {
22+
const { Wrapper, Switch } = Styled;
23+
return (
24+
<Wrapper>
25+
<Switch checked={checked} onChange={v => onChange && onChange(v)} />
26+
</Wrapper>
27+
);
28+
};
29+
30+
export default observer(FormSelect);

0 commit comments

Comments
 (0)