martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29: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, colorPrimary: Colors.primary,
colorLink: Colors.primary, colorLink: Colors.primary,
colorLinkHover: Colors.background, colorLinkHover: Colors.background,
colorBgBase: Colors.cancel,
} }}> } }}>
<Router> <Router>
<Routes> <Routes>

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

@ -1,6 +1,7 @@
export const Colors = { export const Colors = {
background: '#8fbea7', background: '#8fbea7',
primary: '#448866', primary: '#448866',
cancel: '#dddddd',
formBackground: '#f2f2f2', formBackground: '#f2f2f2',
darkBackground: '#222222', darkBackground: '#222222',
formFocus: '#f8f8f8', formFocus: '#f8f8f8',
@ -85,7 +86,7 @@ export const DarkTheme = {
hintText: '#aaaaaa', hintText: '#aaaaaa',
activeText: '#ffffff', activeText: '#ffffff',
idleText: '#aaaaaa', idleText: '#aaaaaa',
placeholderText: '#cccccc', placeholderText: '#686868',
linkText: '#66aa88', linkText: '#66aa88',
labelText: '#dddddd', labelText: '#dddddd',
alertText: '#ff8888', 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'); const timeFormat = localStorage.getItem('time_format');
if (timeFormat == '24h') { if (timeFormat === '24h') {
updateState({ timeFormat }); updateState({ timeFormat });
} }
else { else {
@ -76,7 +76,7 @@ export function useSettingsContext() {
} }
const dateFormat = localStorage.getItem('date_format'); const dateFormat = localStorage.getItem('date_format');
if (dateFormat == 'dd/mm') { if (dateFormat === 'dd/mm') {
updateState({ dateFormat }); updateState({ dateFormat });
} }
else { else {

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

@ -1,5 +1,4 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const AccountWrapper = styled.div` export const AccountWrapper = styled.div`
min-height: 100%; 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 styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const ProfileWrapper = styled.div` export const ProfileWrapper = styled.div`
min-height: 100%; min-height: 100%;

22
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 { 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'; import { SettingOutlined, UserOutlined, LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
export function AccountAccess() { export function AccountAccess() {
@ -53,7 +53,7 @@ export function AccountAccess() {
} }
const editSealFooter = ( const editSealFooter = (
<EditFooter> <div>
<div className="select"></div> <div className="select"></div>
<Button key="back" onClick={actions.clearEditSeal}>Cancel</Button> <Button key="back" onClick={actions.clearEditSeal}>Cancel</Button>
{ state.sealMode === 'enabled' && ( { state.sealMode === 'enabled' && (
@ -65,7 +65,7 @@ export function AccountAccess() {
{ state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && ( { state.sealMode !== 'unlocking' && state.sealMode !== 'enabled' && (
<Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button> <Button key="save" type="primary" onClick={saveSeal} disabled={!actions.canSaveSeal()} loading={state.busy}>Save</Button>
)} )}
</EditFooter> </div>
); );
return ( return (
@ -167,28 +167,20 @@ export function AccountAccess() {
</Modal> </Modal>
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}> <Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
<LoginModal> <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)} <Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} /> defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
</Form.Item>
<Form.Item name="password">
<Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)} <Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
<Form.Item name="confirm">
<Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)} <Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} /> autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item> <div className="controls">
</Form>
</LoginModal>
<EditFooter>
<Button key="back" onClick={actions.clearEditLogin}>Cancel</Button> <Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
<Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin} <Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button> disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
</EditFooter> </div>
</LoginModal>
</Modal> </Modal>
</AccountAccessWrapper> </AccountAccessWrapper>
); );

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

@ -1,5 +1,4 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Colors } from 'constants/Colors';
export const AccountAccessWrapper = styled.div` export const AccountAccessWrapper = styled.div`
display: flex; display: flex;
@ -127,10 +126,22 @@ export const SealModal = styled.div`
` `
export const LoginModal = styled.div` export const LoginModal = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
.loginValue { .loginValue {
background-color: ${props => props.theme.inputArea}; background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText}; 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 { input {
@ -143,9 +154,8 @@ export const LoginModal = styled.div`
input::placeholder { input::placeholder {
color: ${props => props.theme.placeholderText}; color: ${props => props.theme.placeholderText};
} }
`
export const EditFooter = styled.div` .controls {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -171,5 +181,6 @@ export const EditFooter = styled.div`
display: flex; display: flex;
flex-grow: 1; 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 { Input, Modal, List, Button } from 'antd';
import { CardsWrapper } from './Cards.styled'; 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 { useCards } from './useCards.hook';
import { CardItem } from './cardItem/CardItem'; import { CardItem } from './cardItem/CardItem';