From cba10f8d6413259146c4a086e6606f3e6b0d9938 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Wed, 16 Mar 2022 11:05:05 -0700
Subject: [PATCH] breaking out style for create

---
 net/web/src/Create/Create.jsx       | 29 ++++++++------
 net/web/src/Create/Create.styled.js | 61 +++++++++++++++++++++++++++++
 net/web/src/Login/Login.jsx         |  1 -
 3 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 net/web/src/Create/Create.styled.js

diff --git a/net/web/src/Create/Create.jsx b/net/web/src/Create/Create.jsx
index 3e985b31..70e638bd 100644
--- a/net/web/src/Create/Create.jsx
+++ b/net/web/src/Create/Create.jsx
@@ -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>
   )
 }
diff --git a/net/web/src/Create/Create.styled.js b/net/web/src/Create/Create.styled.js
new file mode 100644
index 00000000..d8da4af3
--- /dev/null
+++ b/net/web/src/Create/Create.styled.js
@@ -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;
+`;
diff --git a/net/web/src/Login/Login.jsx b/net/web/src/Login/Login.jsx
index 2be413eb..637c9bd8 100644
--- a/net/web/src/Login/Login.jsx
+++ b/net/web/src/Login/Login.jsx
@@ -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()