martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

breaking out style for create

Browse Source
This commit is contained in:
Roland Osborne 2022-03-16 11:05:05 -07:00
parent 261eb657a5
commit cba10f8d64
3 changed files with 79 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
net/web/src/Create/Create.jsx
View File

@ -3,23 +3,30 @@ import { AppContext } from '../AppContext/AppContext';
import { Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useCreate } from './useCreate.hook';
import { CreateWrapper, CreateInput, CreatePassword, CreateLogin, CreateEnter } from './Create.styled';
export function Create() {
const { state, actions } = useCreate()
return (
<div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', top: 0, left: 0, width: '100%', height: '100%' }}>
<div style={{ backgroundColor: '#ffffff', display: 'flex', flexDirection: 'column', padding: '16px', borderRadius: '8px', width: '500px' }}>
<div style={{ textAlign: 'center', fontSize: '24px', fontWeight: 'bold', color: '#555555' }}>indicom</div>
<div style={{ fontSize: '12px', display: 'flex', borderBottom: '1px solid black', color: '#444444', paddingLeft: '16px', paddingRight: '16px' }}>
<span style={{ textAlign: 'center', width: '100%' }}>Communication for the Decentralized Web</span>
<CreateWrapper>
<div class="container">
<div class="header">indicom</div>
<div class="subheader">
<span class="subheader-text">Communication for the Decentralized Web</span>
</div>
<Input size="large" spellCheck="false" addonAfter={state.conflict} onChange={(e) => actions.setUsername(e.target.value)} value={state.username} placeholder="username" prefix={<UserOutlined />} style={{ marginTop: '16px' }} />
<Input.Password size="large" spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)} value={state.password} placeholder="password" prefix={<LockOutlined />} style={{ marginTop: '16px' }} />
<Input.Password size="large" spellCheck="false" onChange={(e) => actions.setConfirmed(e.target.value)} value={state.confirmed} placeholder="password" prefix={<LockOutlined />} style={{ marginTop: '16px' }} />
<Button type="primary" onClick={() => actions.onCreate()} disabled={actions.isDisabled()} style={{ alignSelf: 'center', marginTop: '16px', width: '33%' }}>Create Account</Button>
<CreateInput size="large" spellCheck="false" placeholder="username" prefix={<UserOutlined />}
onChange={(e) => actions.setUsername(e.target.value)} value={state.username}
addonAfter={state.conflict} />
<CreatePassword size="large" spellCheck="false" placeholder="password" prefix={<LockOutlined />}
onChange={(e) => actions.setPassword(e.target.value)} value={state.password} />
<CreatePassword size="large" spellCheck="false" placeholder="password" prefix={<LockOutlined />}
onChange={(e) => actions.setConfirmed(e.target.value)} value={state.confirmed} />
<CreateEnter type="primary" onClick={() => actions.onCreate()} disabled={actions.isDisabled()}>
<span>Create Account</span>
</CreateEnter>
</div>
<Button type="link" onClick={() => actions.onLogin()} style={{ marginTop: '4px' }}>Account Sign In</Button>
</div>
<CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
</CreateWrapper>
)
}

61
net/web/src/Create/Create.styled.js Normal file
View File

@ -0,0 +1,61 @@
import { Input, Button } from 'antd';
import styled from 'styled-components';
export const CreateWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
.container {
background-color: #ffffff;
display: flex;
flex-direction: column;
padding: 16px;
border-radius: 4px;
max-width: 500px;
width: 50%;
}
.header {
text-align: center;
font-size: 2em;
font-weight: bold;
color: #555555
}
.subheader {
font-size: 0.8em;
display: flex;
border-bottom: 1px solid black;
color: #444444
padding-left: 16px
padding-right: 16px;
}
.subheader-text {
text-align: center;
width: 100%;
}
`;
export const CreateInput = styled(Input)`
margin-top: 16px;
`;
export const CreatePassword = styled(Input.Password)`
margin-top: 16px;
`;
export const CreateEnter = styled(Button)`
align-self: center;
margin-top: 16px;
min-width: 128px;
width: 33%;
`;
export const CreateLogin = styled(Button)`
margin-top: 4px;
`;

1
net/web/src/Login/Login.jsx
View File

@ -6,7 +6,6 @@ import { useLogin } from './useLogin.hook';
import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter } from './Login.styled';
export function Login(props) {
console.log(props)
const { state, actions } = useLogin()