From 60761d3d5d3a2525163a6de1509182ce95426f08 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 23 Feb 2024 12:50:51 -0800
Subject: [PATCH] styling change login modal

---
 .../profile/accountAccess/AccountAccess.jsx   | 40 +++++++++++--------
 .../accountAccess/AccountAccess.styled.js     | 37 +++++++++++++++++
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
index 36b42f4f..4fe74dc7 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
@@ -1,4 +1,4 @@
-import { AccountAccessWrapper, SealModal, EditFooter } from './AccountAccess.styled';
+import { AccountAccessWrapper, LoginModal, SealModal, EditFooter } from './AccountAccess.styled';
 import { useAccountAccess } from './useAccountAccess.hook';
 import { Button, Modal, Switch, Form, Input, Radio, Select } from 'antd';
 import { SettingOutlined, UserOutlined, LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
@@ -173,24 +173,30 @@ export function AccountAccess() {
           )}
         </SealModal>
       </Modal>
-      <Modal title="Account Login" centered visible={state.editLogin} footer={editLoginFooter}
-          bodyStyle={{ paddingLeft: 16, paddingRight: 16 }} onCancel={actions.clearEditLogin}>
-        <Form name="basic" wrapperCol={{ span: 24, }}>
-            <Form.Item name="username" validateStatus={state.editStatus} help={state.editMessage}>
-              <Input placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
-                  defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
-            </Form.Item>
+      <Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
+        <LoginModal>
+          <Form name="basic" wrapperCol={{ span: 24, }}>
+              <Form.Item name="username" validateStatus={state.editStatus} help={state.editMessage}>
+                <Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
+                    defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
+              </Form.Item>
 
-            <Form.Item name="password">
-              <Input.Password placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
-                  autocomplete="new-password" prefix={<LockOutlined />} />
-            </Form.Item>
+              <Form.Item name="password">
+                <Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
+                    autocomplete="new-password" prefix={<LockOutlined />} />
+              </Form.Item>
 
-            <Form.Item name="confirm">
-              <Input.Password placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
-                  autocomplete="new-password" prefix={<LockOutlined />} />
-            </Form.Item>
-        </Form>
+              <Form.Item name="confirm">
+                <Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
+                    autocomplete="new-password" prefix={<LockOutlined />} />
+              </Form.Item>
+          </Form>
+        </LoginModal>
+        <EditFooter>
+          <Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
+          <Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
+              disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
+        </EditFooter>
       </Modal>
     </AccountAccessWrapper>
   );
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
index bfa787f1..073b2729 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
@@ -126,9 +126,46 @@ export const SealModal = styled.div`
   }
 `
 
+export const LoginModal = styled.div`
+
+  .loginValue {
+    background-color: ${props => props.theme.inputArea};
+    color: ${props => props.theme.mainText};
+  }
+
+  input {
+    padding-left: 8px;
+    background-color: ${props => props.theme.inputArea};
+    border: 1px solid ${props => props.theme.sectionBorder};
+    color: ${props => props.theme.mainText};
+  }
+
+  input::placeholder {
+    color: ${props => props.theme.placeholderText};
+  }
+`
+
 export const EditFooter = styled.div`
   width: 100%;
   display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+
+  .saveDisabled {
+    background-color: ${props => props.theme.disabledArea};
+
+    button {
+      color: ${props => props.theme.idleText};
+    }
+  }
+
+  .saveEnabled {
+    background-color: ${props => props.theme.enabledArea};
+
+    button {
+      color: ${props => props.theme.activeText};
+    }
+  }
 
   .select {
     display: flex;