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

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

12
components/common/Calendar.js
View file

@ -16,13 +16,11 @@ import {
isBefore,
isAfter,
} from 'date-fns';
import { Button, Icon } from 'react-basics';
import { Button, Icon, Icons } from 'react-basics';
import { chunkArray } from 'next-basics';
import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import Chevron from 'assets/chevron-down.svg';
import Cross from 'assets/times.svg';
import styles from './Calendar.module.css';
export default function Calendar({ date, minDate, maxDate, onChange }) {
@ -61,7 +59,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
>
{month}
<Icon className={styles.icon} size="small">
{selectMonth ? <Cross /> : <Chevron />}
{selectMonth ? <Icons.Close /> : <Icons.ChevronDown />}
</Icon>
</div>
<div
@ -70,7 +68,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
>
{year}
<Icon className={styles.icon} size="small">
{selectMonth ? <Cross /> : <Chevron />}
{selectMonth ? <Icons.Close /> : <Icons.ChevronDown />}
</Icon>
</div>
</div>
@ -239,7 +237,7 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
variant="light"
>
<Icon>
<Chevron />
<Icons.ChevronDown />
</Icon>
</Button>
</div>
@ -273,7 +271,7 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
variant="light"
>
<Icon>
<Chevron />
<Icons.ChevronDown />
</Icon>
</Button>
</div>

4
components/common/EmptyPlaceholder.js
View file

@ -1,13 +1,13 @@
import { Icon, Text, Flexbox } from 'react-basics';
import Logo from 'assets/logo.svg';
function EmptyPlaceholder({ msg, children }) {
function EmptyPlaceholder({ message, children }) {
return (
<Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
<Icon size="xl">
<Logo />
</Icon>
<Text size="lg">{msg}</Text>
<Text size="lg">{message}</Text>
<div>{children}</div>
</Flexbox>
);

5
components/common/ErrorMessage.js
View file

@ -1,13 +1,12 @@
import Exclamation from 'assets/exclamation-triangle.svg';
import { FormattedMessage } from 'react-intl';
import { Icon, Icons } from 'react-basics';
import styles from './ErrorMessage.module.css';
import { Icon } from 'react-basics';
export default function ErrorMessage() {
return (
<div className={styles.error}>
<Icon className={styles.icon} size="large">
<Exclamation />
<Icons.Alert />
</Icon>
<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
</div>

5
components/common/EventDataButton.js
View file

@ -1,8 +1,7 @@
import List from 'assets/list-ul.svg';
import EventDataForm from 'components/metrics/EventDataForm';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { Button, Icon, Modal } from 'react-basics';
import { Button, Icon, Modal, Icons } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import styles from './EventDataButton.module.css';
@ -29,7 +28,7 @@ function EventDataButton({ websiteId }) {
className={styles.button}
>
<Icon>
<List />
<Icons.More />
</Icon>
Event Data
</Button>