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

styling profile details modal

Browse Source
This commit is contained in:
Roland Osborne 2024-02-23 13:33:19 -08:00
parent d81c723801
commit 1f7ad6c4bd
8 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
net/web/src/App.js
View File

@ -39,6 +39,7 @@ function App() {
colorPrimary: Colors.primary,
colorLink: Colors.primary,
colorLinkHover: Colors.background,
colorBgBase: Colors.cancel,
} }}>
<Router>
<Routes>

3
net/web/src/constants/Colors.js
View File

@ -1,6 +1,7 @@
export const Colors = {
background: '#8fbea7',
primary: '#448866',
cancel: '#dddddd',
formBackground: '#f2f2f2',
darkBackground: '#222222',
formFocus: '#f8f8f8',
@ -85,7 +86,7 @@ export const DarkTheme = {
hintText: '#aaaaaa',
activeText: '#ffffff',
idleText: '#aaaaaa',
placeholderText: '#cccccc',
placeholderText: '#686868',
linkText: '#66aa88',
labelText: '#dddddd',
alertText: '#ff8888',

4
net/web/src/context/useSettingsContext.hook.js
View File

@ -68,7 +68,7 @@ export function useSettingsContext() {
}
const timeFormat = localStorage.getItem('time_format');
if (timeFormat == '24h') {
if (timeFormat === '24h') {
updateState({ timeFormat });
}
else {
@ -76,7 +76,7 @@ export function useSettingsContext() {
}
const dateFormat = localStorage.getItem('date_format');
if (dateFormat == 'dd/mm') {
if (dateFormat === 'dd/mm') {
updateState({ dateFormat });
}
else {

1
net/web/src/session/account/Account.styled.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const AccountWrapper = styled.div`
min-height: 100%;

1
net/web/src/session/account/profile/Profile.styled.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const ProfileWrapper = styled.div`
min-height: 100%;

38
net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
View File

@ -1,6 +1,6 @@
import { AccountAccessWrapper, LoginModal, SealModal, EditFooter } from './AccountAccess.styled';
import { AccountAccessWrapper, LoginModal, SealModal } from './AccountAccess.styled';
import { useAccountAccess } from './useAccountAccess.hook';
import { Button, Modal, Switch, Form, Input, Radio, Select } from 'antd';
import { Button, Modal, Switch, Input, Radio, Select } from 'antd';
import { SettingOutlined, UserOutlined, LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
export function AccountAccess() {
@ -53,7 +53,7 @@ export function AccountAccess() {
}
const editSealFooter = (
<EditFooter>
<div>
<div className="select"></div>
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
{ state.sealMode === 'enabled' && (
@ -65,7 +65,7 @@ export function AccountAccess() {
{ state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button>
)}
</EditFooter>
</div>
);
return (
@ -167,28 +167,20 @@ export function AccountAccess() {
</Modal>
<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>
<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 name="password">
<Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
<Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
<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>
<Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
<div className="controls">
<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>
</div>
</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>
);

63
net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const AccountAccessWrapper = styled.div`
display: flex;
@ -127,10 +126,22 @@ export const SealModal = styled.div`
`
export const LoginModal = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
.loginValue {
background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText};
border: 1px solid ${props => props.theme.sectionBorder};
.anticon {
color: ${props => props.theme.placeholderText};
&:hover {
color: ${props => props.theme.linkText};
}
}
}
input {
@ -143,33 +154,33 @@ export const LoginModal = styled.div`
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 {
.controls {
width: 100%;
display: flex;
flex-grow: 1;
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;
flex-grow: 1;
}
}
`

2
net/web/src/session/cards/Cards.jsx
View File

@ -1,6 +1,6 @@
import { Input, Modal, List, Button } from 'antd';
import { CardsWrapper } from './Cards.styled';
import { SortAscendingOutlined, UpOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
import { SortAscendingOutlined, RightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
import { useCards } from './useCards.hook';
import { CardItem } from './cardItem/CardItem';