watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 08:37:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

More refactoring, cleaned up icons, nav buttons, add messages.

Browse source
This commit is contained in:
Mike Cao 2023-01-27 21:53:13 -08:00
parent 4b1013c8c6
commit 5f15ad0807
68 changed files with 391 additions and 790 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/pages/settings/profile/PasswordChangeButton.js
View file

@ -1,5 +1,5 @@
import { useIntl } from 'react-intl';
import { Button, Icon, Text, useToast, ModalTrigger } from 'react-basics';
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import { Lock } from 'components/icons';
import { labels, messages } from 'components/messages';
@ -22,7 +22,7 @@ export default function PasswordChangeButton() {
</Icon>
<Text>{formatMessage(labels.changePassword)}</Text>
</Button>
{close => <PasswordEditForm onSave={handleSave} onClose={close} />}
<Modal>{close => <PasswordEditForm onSave={handleSave} onClose={close} />}</Modal>
</ModalTrigger>
</>
);

1
components/pages/settings/profile/PasswordEditForm.js
View file

@ -14,6 +14,7 @@ export default function PasswordEditForm({ onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};

8
components/pages/settings/profile/ProfileDetails.js
View file

@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
import ThemeSetting from 'components/buttons/ThemeSetting';
import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
import useUser from 'hooks/useUser';
import { labels } from 'components/messages';
@ -21,13 +21,13 @@ export default function ProfileDetails() {
<Form>
<FormRow label={formatMessage(labels.username)}>{username}</FormRow>
<FormRow label={formatMessage(labels.role)}>{role}</FormRow>
<FormRow label={formatMessage(labels.language)} inline>
<FormRow label={formatMessage(labels.language)}>
<LanguageSetting />
</FormRow>
<FormRow label={formatMessage(labels.timezone)} inline>
<FormRow label={formatMessage(labels.timezone)}>
<TimezoneSetting />
</FormRow>
<FormRow label={formatMessage(labels.dateRange)} inline>
<FormRow label={formatMessage(labels.dateRange)}>
<DateRangeSetting />
</FormRow>
<FormRow label={formatMessage(labels.theme)}>

31
components/pages/settings/profile/ThemeSetting.js Normal file
View file

@ -0,0 +1,31 @@
import classNames from 'classnames';
import { Button, Icon } from 'react-basics';
import useTheme from 'hooks/useTheme';
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
import styles from './ThemeSetting.module.css';
export default function ThemeSetting() {
const [theme, setTheme] = useTheme();
return (
<div className={styles.buttons}>
<Button
className={classNames({ [styles.active]: theme === 'light' })}
onClick={() => setTheme('light')}
>
<Icon>
<Sun />
</Icon>
</Button>
<Button
className={classNames({ [styles.active]: theme === 'dark' })}
onClick={() => setTheme('dark')}
>
<Icon>
<Moon />
</Icon>
</Button>
</div>
);
}

8
components/pages/settings/profile/ThemeSetting.module.css Normal file
View file

@ -0,0 +1,8 @@
.buttons {
display: flex;
gap: 10px;
}
.active {
border: 2px solid var(--primary400);
}