m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-07-01 06:02:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement react-basics styles. Fix queries.

Browse Source
This commit is contained in:
Mike Cao 2022-12-08 23:43:43 -08:00
parent b57ecf33e6
commit 0a6ecfe3d2
59 changed files with 227 additions and 4336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/common/Button.module.css
View File

@ -2,9 +2,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: var(--font-size-normal); font-size: var(--font-size-md);
color: var(--gray900); color: var(--base900);
background: var(--gray100); background: var(--base100);
padding: 8px 16px; padding: 8px 16px;
border-radius: 4px; border-radius: 4px;
border: 0; border: 0;
@ -14,11 +14,11 @@
} }
.button:hover { .button:hover {
background: var(--gray200); background: var(--base200);
} }
.button:active { .button:active {
color: var(--gray900); color: var(--base900);
} }
.label { .label {
@ -33,26 +33,26 @@
} }
.small { .small {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
} }
.xsmall { .xsmall {
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
} }
.action, .action,
.action:active { .action:active {
color: var(--gray50); color: var(--base50);
background: var(--gray900); background: var(--base900);
} }
.action:hover { .action:hover {
background: var(--gray800); background: var(--base800);
} }
.danger, .danger,
.danger:active { .danger:active {
color: var(--gray50); color: var(--base50);
background: var(--red500); background: var(--red500);
} }
@ -62,7 +62,7 @@
.light, .light,
.light:active { .light:active {
color: var(--gray900); color: var(--base900);
background: transparent; background: transparent;
} }
@ -85,18 +85,18 @@
.button:disabled { .button:disabled {
cursor: default; cursor: default;
color: var(--gray500); color: var(--base500);
background: var(--gray75); background: var(--base75);
} }
.button:disabled:active { .button:disabled:active {
color: var(--gray500); color: var(--base500);
} }
.button:disabled:hover { .button:disabled:hover {
background: var(--gray75); background: var(--base75);
} }
.button.light:disabled { .button.light:disabled {
background: var(--gray50); background: var(--base50);
} }

12
components/common/ButtonGroup.module.css
View File

@ -2,14 +2,14 @@
display: inline-flex; display: inline-flex;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--gray500); border: 1px solid var(--base500);
} }
.group .button { .group .button {
border-radius: 0; border-radius: 0;
color: var(--gray800); color: var(--base800);
background: var(--gray50); background: var(--base50);
border-left: 1px solid var(--gray500); border-left: 1px solid var(--base500);
padding: 4px 8px; padding: 4px 8px;
} }
@ -18,7 +18,7 @@
} }
.group .button:hover { .group .button:hover {
background: var(--gray100); background: var(--base100);
} }
.group .button + .button { .group .button + .button {
@ -26,6 +26,6 @@
} }
.group .button.selected { .group .button.selected {
color: var(--gray900); color: var(--base900);
font-weight: 600; font-weight: 600;
} }

22
components/common/Calendar.module.css
View File

@ -1,7 +1,7 @@
.calendar { .calendar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
flex: 1; flex: 1;
min-height: 306px; min-height: 306px;
} }
@ -12,7 +12,7 @@
} }
.calendar td { .calendar td {
color: var(--gray800); color: var(--base800);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
vertical-align: center; vertical-align: center;
@ -23,17 +23,17 @@
} }
.calendar td:hover { .calendar td:hover {
border: 1px solid var(--gray300); border: 1px solid var(--base300);
background: var(--gray75); background: var(--base75);
} }
.calendar td.faded { .calendar td.faded {
color: var(--gray500); color: var(--base500);
} }
.calendar td.selected { .calendar td.selected {
font-weight: 600; font-weight: 600;
border: 1px solid var(--gray600); border: 1px solid var(--base600);
} }
.calendar td.selected:hover { .calendar td.selected:hover {
@ -41,18 +41,18 @@
} }
.calendar td.disabled { .calendar td.disabled {
color: var(--gray400); color: var(--base400);
background: var(--gray75); background: var(--base75);
} }
.calendar td.disabled:hover { .calendar td.disabled:hover {
cursor: default; cursor: default;
background: var(--gray75); background: var(--base75);
border-color: transparent; border-color: transparent;
} }
.calendar td.faded.disabled { .calendar td.faded.disabled {
background: var(--gray100); background: var(--base100);
} }
.header { .header {
@ -61,7 +61,7 @@
align-items: center; align-items: center;
font-weight: 700; font-weight: 700;
line-height: 40px; line-height: 40px;
font-size: var(--font-size-normal); font-size: var(--font-size-md);
} }
.body { .body {

2
components/common/Checkbox.module.css
View File

@ -11,7 +11,7 @@
align-items: center; align-items: center;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 1px solid var(--gray500); border: 1px solid var(--base500);
border-radius: 4px; border-radius: 4px;
} }

2
components/common/Dot.module.css
View File

@ -1,5 +1,5 @@
.wrapper { .wrapper {
background: var(--gray50); background: var(--base50);
margin-right: 10px; margin-right: 10px;
border-radius: 100%; border-radius: 100%;
} }

4
components/common/Dropdown.module.css
View File

@ -3,7 +3,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid var(--gray500); border: 1px solid var(--base500);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
@ -12,7 +12,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
flex-wrap: nowrap; flex-wrap: nowrap;
white-space: nowrap; white-space: nowrap;
padding: 4px 16px; padding: 4px 16px;

2
components/common/ErrorMessage.module.css
View File

@ -6,7 +6,7 @@
margin: auto; margin: auto;
display: flex; display: flex;
z-index: 1; z-index: 1;
background-color: var(--gray50); background-color: var(--base50);
padding: 10px; padding: 10px;
} }

4
components/common/FilterLink.module.css
View File

@ -4,11 +4,11 @@
} }
.row .inactive { .row .inactive {
color: var(--gray500); color: var(--base500);
} }
.row .active { .row .active {
color: var(--gray900); color: var(--base900);
font-weight: 600; font-weight: 600;
} }

6
components/common/Link.module.css
View File

@ -2,7 +2,7 @@ a.link,
a.link:active, a.link:active,
a.link:visited { a.link:visited {
position: relative; position: relative;
color: var(--gray900); color: var(--base900);
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -21,11 +21,11 @@ a.link.large {
} }
a.link.small { a.link.small {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
} }
a.link.xsmall { a.link.xsmall {
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
} }
a.link .icon + * { a.link .icon + * {

6
components/common/Loading.module.css
View File

@ -25,7 +25,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
background: var(--gray400); background: var(--base400);
opacity: 0.4; opacity: 0.4;
} }
@ -33,13 +33,13 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 100%; border-radius: 100%;
background: var(--gray400); background: var(--base400);
animation: blink 1.4s infinite; animation: blink 1.4s infinite;
animation-fill-mode: both; animation-fill-mode: both;
} }
.loading.overlay div { .loading.overlay div {
background: var(--gray900); background: var(--base900);
} }
.loading div + div { .loading div + div {

12
components/common/Menu.module.css
View File

@ -1,22 +1,22 @@
.menu { .menu {
background: var(--gray50); background: var(--base50);
border: 1px solid var(--gray500); border: 1px solid var(--base500);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 100;
} }
.option { .option {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
font-weight: normal; font-weight: normal;
background: var(--gray50); background: var(--base50);
padding: 4px 16px; padding: 4px 16px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.option:hover { .option:hover {
background: var(--gray100); background: var(--base100);
} }
.float { .float {
@ -43,7 +43,7 @@
} }
.divider { .divider {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
} }
.selected { .selected {

6
components/common/MenuButton.module.css
View File

@ -10,11 +10,11 @@
} }
.text { .text {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
} }
.open, .open,
.open:hover { .open:hover {
background: var(--gray50); background: var(--base50);
border: 1px solid var(--gray500); border: 1px solid var(--base500);
} }

2
components/common/MobileMenu.module.css
View File

@ -8,7 +8,7 @@
z-index: 100; z-index: 100;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--gray50); background-color: var(--base50);
overflow: auto; overflow: auto;
} }

4
components/common/Modal.module.css
View File

@ -25,12 +25,12 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: var(--gray50); background: var(--base50);
min-width: 400px; min-width: 400px;
min-height: 100px; min-height: 100px;
max-width: 100vw; max-width: 100vw;
z-index: 1; z-index: 1;
border: 1px solid var(--gray300); border: 1px solid var(--base300);
padding: 30px; padding: 30px;
border-radius: 4px; border-radius: 4px;
} }

8
components/common/NavMenu.module.css
View File

@ -1,6 +1,6 @@
.menu { .menu {
color: var(--gray800); color: var(--base800);
border: 1px solid var(--gray500); border: 1px solid var(--base500);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
@ -13,10 +13,10 @@
} }
.option:hover { .option:hover {
background: var(--gray75); background: var(--base75);
} }
.selected { .selected {
color: var(--gray900); color: var(--base900);
font-weight: 600; font-weight: 600;
} }

4
components/common/NoData.module.css
View File

@ -1,6 +1,6 @@
.container { .container {
color: var(--gray500); color: var(--base500);
font-size: var(--font-size-normal); font-size: var(--font-size-md);
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;

8
components/common/Table.module.css
View File

@ -5,16 +5,16 @@
.table label { .table label {
display: none; display: none;
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
font-weight: bold; font-weight: bold;
} }
.header { .header {
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--base300);
} }
.head { .head {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
font-weight: 600; font-weight: 600;
line-height: 40px; line-height: 40px;
} }
@ -26,7 +26,7 @@
} }
.row { .row {
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--base300);
padding: 10px 0; padding: 10px 0;
} }

2
components/common/Tag.module.css
View File

@ -1,6 +1,6 @@
.tag { .tag {
padding: 2px 4px; padding: 2px 4px;
border: 1px solid var(--gray300); border: 1px solid var(--base300);
border-radius: 4px; border-radius: 4px;
margin-right: 10px; margin-right: 10px;
} }

2
components/common/Toast.module.css
View File

@ -17,7 +17,7 @@
} }
.message { .message {
font-size: var(--font-size-normal); font-size: var(--font-size-md);
} }
.close { .close {

2
components/common/UpdateNotice.module.css
View File

@ -6,7 +6,7 @@
} }
.message { .message {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
font-weight: 600; font-weight: 600;
flex: 1; flex: 1;
text-align: center; text-align: center;

2
components/forms/DatePickerForm.module.css
View File

@ -16,7 +16,7 @@
.calendars > div + div { .calendars > div + div {
margin-left: 20px; margin-left: 20px;
padding-left: 20px; padding-left: 20px;
border-left: 1px solid var(--gray300); border-left: 1px solid var(--base300);
} }
.filter { .filter {

4
components/forms/EventDataForm.module.css
View File

@ -3,7 +3,7 @@
} }
.form { .form {
border-right: 1px solid var(--gray300); border-right: 1px solid var(--base300);
width: 420px; width: 420px;
} }
@ -12,7 +12,7 @@
} }
.filters + .filters { .filters + .filters {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
min-height: 250px; min-height: 250px;
} }

4
components/forms/Form.module.css
View File

@ -43,7 +43,7 @@
.error { .error {
width: 600px; width: 600px;
margin: 0 auto 30px; margin: 0 auto 30px;
background: var(--gray50); background: var(--base50);
padding: 16px; padding: 16px;
color: var(--red400); color: var(--red400);
border: 1px solid var(--red400); border: 1px solid var(--red400);
@ -54,7 +54,7 @@
.success { .success {
width: 600px; width: 600px;
margin: 60px auto; margin: 60px auto;
background: var(--gray50); background: var(--base50);
padding: 16px; padding: 16px;
color: var(--green400); color: var(--green400);
border: 1px solid var(--green400); border: 1px solid var(--green400);

2
components/layout/Footer.module.css
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
text-align: center; text-align: center;
margin: 30px 0; margin: 30px 0;
} }

6
components/layout/FormLayout.module.css
View File

@ -54,7 +54,7 @@
.msg { .msg {
color: var(--msgColor); color: var(--msgColor);
background: var(--red400); background: var(--red400);
font-size: var(--font-size-small); font-size: var(--font-size-sm);
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
@ -78,8 +78,8 @@
margin: 20px 0; margin: 20px 0;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
color: var(--gray50); color: var(--base50);
background: var(--gray800); background: var(--base800);
} }
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {

6
components/layout/GridLayout.module.css
View File

@ -9,12 +9,12 @@
} }
.row { .row {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
min-height: 430px; min-height: 430px;
} }
.row > .col { .row > .col {
border-left: 1px solid var(--gray300); border-left: 1px solid var(--base300);
padding: 20px; padding: 20px;
} }
@ -33,7 +33,7 @@
} }
.row > .col { .row > .col {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
border-left: 0; border-left: 0;
padding: 20px 0; padding: 20px 0;
} }

4
components/layout/Header.module.css
View File

@ -7,7 +7,7 @@
.title { .title {
flex: 1; flex: 1;
font-size: var(--font-size-large); font-size: var(--font-size-lg);
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.4; line-height: 1.4;
@ -22,7 +22,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: var(--font-size-normal); font-size: var(--font-size-md);
font-weight: 600; font-weight: 600;
} }

18
components/layout/Layout.js
View File

@ -1,20 +1,32 @@
import { Container } from 'react-basics';
import Head from 'next/head'; import Head from 'next/head';
import Header from 'components/layout/Header'; import Header from 'components/layout/Header';
import Footer from 'components/layout/Footer'; import Footer from 'components/layout/Footer';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import { useRouter } from 'next/router';
export default function Layout({ title, children, header = true, footer = true }) { export default function Layout({ title, children, header = true, footer = true }) {
const { dir } = useLocale(); const { dir } = useLocale();
const { basePath } = useRouter();
return ( return (
<> <Container dir={dir} style={{ maxWidth: 1140 }}>
<Head> <Head>
<title>{title ? `${title} | umami` : 'umami'}</title> <title>{title ? `${title} | umami` : 'umami'}</title>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head> </Head>
{header && <Header />} {header && <Header />}
<main>{children}</main> <main>{children}</main>
{footer && <Footer />} {footer && <Footer />}
<div id="__modals" dir={dir} /> </Container>
</>
); );
} }

4
components/layout/MenuLayout.module.css
View File

@ -12,7 +12,7 @@
.container .content { .container .content {
flex: 1; flex: 1;
position: relative; position: relative;
border-left: 1px solid var(--gray300); border-left: 1px solid var(--base300);
padding-left: 30px; padding-left: 30px;
margin-left: 30px; margin-left: 30px;
} }
@ -30,7 +30,7 @@
} }
.container .content { .container .content {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
border-left: 0; border-left: 0;
padding-left: 0; padding-left: 0;
margin-left: 0; margin-left: 0;

3
components/layout/Page.module.css
View File

@ -3,5 +3,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 30px; padding: 0 30px;
background: var(--gray50); background: var(--base50);
border-radius: 8px;
} }

2
components/metrics/ActiveUsers.module.css
View File

@ -5,7 +5,7 @@
.text { .text {
display: flex; display: flex;
font-size: var(--font-size-normal); font-size: var(--font-size-md);
} }
.value { .value {

6
components/metrics/ChartTooltip.module.css
View File

@ -17,7 +17,7 @@
} }
.title { .title {
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
font-weight: 600; font-weight: 600;
} }
@ -25,7 +25,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
font-weight: 600; font-weight: 600;
} }
@ -34,7 +34,7 @@
overflow: hidden; overflow: hidden;
border-radius: 100%; border-radius: 100%;
margin-right: 8px; margin-right: 8px;
background: var(--gray50); background: var(--base50);
} }
.color { .color {

10
components/metrics/DataTable.module.css
View File

@ -1,7 +1,7 @@
.table { .table {
position: relative; position: relative;
height: 100%; height: 100%;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
display: grid; display: grid;
grid-template-rows: fit-content(100%) auto; grid-template-rows: fit-content(100%) auto;
overflow: hidden; overflow: hidden;
@ -23,11 +23,11 @@
.title { .title {
display: flex; display: flex;
font-weight: 600; font-weight: 600;
font-size: var(--font-size-normal); font-size: var(--font-size-md);
} }
.metric { .metric {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
width: 100px; width: 100px;
@ -80,8 +80,8 @@
.percent { .percent {
position: relative; position: relative;
width: 50px; width: 50px;
color: var(--gray600); color: var(--base600);
border-left: 1px solid var(--gray600); border-left: 1px solid var(--base600);
padding-left: 10px; padding-left: 10px;
z-index: 1; z-index: 1;
} }

4
components/metrics/Legend.module.css
View File

@ -8,7 +8,7 @@
.label { .label {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
cursor: pointer; cursor: pointer;
} }
@ -17,5 +17,5 @@
} }
.hidden { .hidden {
color: var(--gray400); color: var(--base400);
} }

8
components/metrics/MetricCard.module.css
View File

@ -6,7 +6,7 @@
} }
.value { .value {
font-size: var(--font-size-xlarge); font-size: var(--font-size-xl);
line-height: 40px; line-height: 40px;
min-height: 40px; min-height: 40px;
font-weight: 600; font-weight: 600;
@ -14,7 +14,7 @@
} }
.label { .label {
font-size: var(--font-size-normal); font-size: var(--font-size-md);
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
@ -26,8 +26,8 @@
padding: 0 5px; padding: 0 5px;
border-radius: 5px; border-radius: 5px;
margin-left: 4px; margin-left: 4px;
border: 1px solid var(--gray200); border: 1px solid var(--base200);
color: var(--gray500); color: var(--base500);
} }
.change.positive { .change.positive {

2
components/metrics/MetricsTable.module.css
View File

@ -2,7 +2,7 @@
position: relative; position: relative;
min-height: 430px; min-height: 430px;
height: 100%; height: 100%;
font-size: var(--font-size-small); font-size: var(--font-size-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

6
components/metrics/RealtimeLog.module.css
View File

@ -1,5 +1,5 @@
.table { .table {
font-size: var(--font-size-xsmall); font-size: var(--font-size-xs);
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
display: grid; display: grid;
@ -19,7 +19,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 40px; height: 40px;
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--base300);
} }
.body { .body {
@ -50,7 +50,7 @@
} }
.row .link { .row .link {
color: var(--gray900); color: var(--base900);
text-decoration: none; text-decoration: none;
} }

4
components/metrics/WebsiteChart.module.css
View File

@ -31,8 +31,8 @@
position: fixed; position: fixed;
top: 0; top: 0;
margin: auto; margin: auto;
background: var(--gray50); background: var(--base50);
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--base300);
z-index: 3; z-index: 3;
} }

62
components/metrics/WebsiteHeader.js
View File

@ -1,57 +1,29 @@
import Arrow from 'assets/arrow-right.svg'; import { Row, Column } from 'react-basics';
import classNames from 'classnames';
import Favicon from 'components/common/Favicon'; import Favicon from 'components/common/Favicon';
import Link from 'components/common/Link';
import OverflowText from 'components/common/OverflowText'; import OverflowText from 'components/common/OverflowText';
import RefreshButton from 'components/common/RefreshButton'; import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout'; import ButtonLayout from 'components/layout/ButtonLayout';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import { FormattedMessage } from 'react-intl';
import ActiveUsers from './ActiveUsers'; import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css'; import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) { export default function WebsiteHeader({ websiteId, title, domain }) {
const header = showLink ? (
<>
<Favicon domain={domain} />
<Link
className={styles.titleLink}
href="/websites/[...id]"
as={`/websites/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Link>
</>
) : (
<>
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
);
return ( return (
<PageHeader className="row"> <PageHeader>
<div className={classNames(styles.title, 'col-10 col-lg-4 order-1 order-lg-1')}>{header}</div> <Row>
<div className={classNames(styles.active, 'col-12 col-lg-4 order-3 order-lg-2')}> <Column className={styles.title} xs={12} sm={12} md={4} lg={4}>
<ActiveUsers websiteId={websiteId} /> <Favicon domain={domain} />
</div> <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
<div className="col-2 col-lg-4 order-2 order-lg-3"> </Column>
<ButtonLayout align="right"> <Column className={styles.active} xs={12} sm={12} md={4} lg={4}>
<RefreshButton websiteId={websiteId} /> <ActiveUsers websiteId={websiteId} />
{showLink && ( </Column>
<Link <Column xs={12} sm={12} md={4} lg={4}>
href="/websites/[...id]" <ButtonLayout align="right">
as={`/websites/${websiteId}/${title}`} <RefreshButton websiteId={websiteId} />
className={styles.link} </ButtonLayout>
icon={<Arrow />} </Column>
size="small" </Row>
iconRight
>
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Link>
)}
</ButtonLayout>
</div>
</PageHeader> </PageHeader>
); );
} }

29
components/metrics/WebsiteHeader.module.css
View File

@ -1,32 +1,15 @@
.title { .title {
color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-xlarge);
align-items: center;
display: flex; display: flex;
max-width: 100%; flex-direction: row;
align-items: center;
gap: 10px;
font-size: var(--font-size-lg);
overflow: hidden; overflow: hidden;
} }
.titleLink {
max-width: 100%;
}
.link {
font-weight: 600;
}
.active { .active {
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: center; justify-content: center;
} }
@media only screen and (max-width: 992px) {
.active {
justify-content: flex-start;
}
a.link {
display: none;
}
}

10
components/pages/DashboardEdit.module.css
View File

@ -16,19 +16,19 @@
.item h2 { .item h2 {
font-size: 14px; font-size: 14px;
color: var(--gray700); color: var(--base700);
} }
.text { .text {
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--gray400); border: 1px solid var(--base400);
background: var(--gray50); background: var(--base50);
} }
.active .text { .active .text {
border-color: var(--gray600); border-color: var(--base600);
box-shadow: 4px 4px 4px var(--gray100); box-shadow: 4px 4px 4px var(--base100);
} }
.dragActive { .dragActive {

26
components/pages/TestConsole.js
View File

@ -1,4 +1,4 @@
import classNames from 'classnames'; import { Row, Column } from 'react-basics';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -62,8 +62,8 @@ export default function TestConsole() {
</PageHeader> </PageHeader>
{website && ( {website && (
<> <>
<div className={classNames(styles.test, 'row')}> <Row className={styles.test}>
<div className="col-4"> <Column xs="4">
<PageHeader>Page links</PageHeader> <PageHeader>Page links</PageHeader>
<div> <div>
<Link href={`/console/${websiteId}?page=1`}> <Link href={`/console/${websiteId}?page=1`}>
@ -87,22 +87,22 @@ export default function TestConsole() {
</a> </a>
</Link> </Link>
</div> </div>
</div> </Column>
<div className="col-4"> <Column xs="4">
<PageHeader>CSS events</PageHeader> <PageHeader>CSS events</PageHeader>
<Button id="primary-button" className="umami--click--button-click" variant="action"> <Button id="primary-button" className="umami--click--button-click" variant="action">
Send event Send event
</Button> </Button>
</div> </Column>
<div className="col-4"> <Column xs="4">
<PageHeader>Javascript events</PageHeader> <PageHeader>Javascript events</PageHeader>
<Button id="manual-button" variant="action" onClick={handleClick}> <Button id="manual-button" variant="action" onClick={handleClick}>
Run script Run script
</Button> </Button>
</div> </Column>
</div> </Row>
<div className="row"> <Row>
<div className="col-12"> <Column>
<WebsiteChart <WebsiteChart
websiteId={website.id} websiteId={website.id}
title={website.name} title={website.name}
@ -111,8 +111,8 @@ export default function TestConsole() {
/> />
<PageHeader>Events</PageHeader> <PageHeader>Events</PageHeader>
<EventsChart websiteId={website.id} /> <EventsChart websiteId={website.id} />
</div> </Column>
</div> </Row>
</> </>
)} )}
</Page> </Page>

2
components/pages/TestConsole.module.css
View File

@ -1,5 +1,5 @@
.test { .test {
border: 1px solid var(--gray200); border: 1px solid var(--base200);
border-radius: 5px; border-radius: 5px;
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
} }

68
components/pages/WebsiteDetails.js
View File

@ -1,10 +1,10 @@
import React, { useState } from 'react'; import { useState } from 'react';
import { Row, Column } from 'react-basics';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart'; import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap'; import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
import MenuLayout from 'components/layout/MenuLayout'; import MenuLayout from 'components/layout/MenuLayout';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
@ -137,8 +137,8 @@ export default function WebsiteDetails({ websiteId }) {
return ( return (
<Page> <Page>
<div className="row"> <Row>
<div className={classNames(styles.chart, 'col')}> <Column className={styles.chart}>
<WebsiteChart <WebsiteChart
websiteId={websiteId} websiteId={websiteId}
title={data.name} title={data.name}
@ -148,47 +148,47 @@ export default function WebsiteDetails({ websiteId }) {
stickyHeader stickyHeader
/> />
{!chartLoaded && <Loading />} {!chartLoaded && <Loading />}
</div> </Column>
</div> </Row>
{chartLoaded && !view && ( {chartLoaded && !view && (
<GridLayout> <>
<GridRow> <Row>
<GridColumn md={12} lg={6}> <Column md={12} lg={6}>
<PagesTable {...tableProps} /> <PagesTable {...tableProps} />
</GridColumn> </Column>
<GridColumn md={12} lg={6}> <Column md={12} lg={6}>
<ReferrersTable {...tableProps} /> <ReferrersTable {...tableProps} />
</GridColumn> </Column>
</GridRow> </Row>
<GridRow> <Row>
<GridColumn md={12} lg={4}> <Column md={12} lg={4}>
<BrowsersTable {...tableProps} /> <BrowsersTable {...tableProps} />
</GridColumn> </Column>
<GridColumn md={12} lg={4}> <Column md={12} lg={4}>
<OSTable {...tableProps} /> <OSTable {...tableProps} />
</GridColumn> </Column>
<GridColumn md={12} lg={4}> <Column md={12} lg={4}>
<DevicesTable {...tableProps} /> <DevicesTable {...tableProps} />
</GridColumn> </Column>
</GridRow> </Row>
<GridRow> <Row>
<GridColumn xs={12} md={12} lg={8}> <Column xs={12} md={12} lg={8}>
<WorldMap data={countryData} /> <WorldMap data={countryData} />
</GridColumn> </Column>
<GridColumn xs={12} md={12} lg={4}> <Column xs={12} md={12} lg={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} /> <CountriesTable {...tableProps} onDataLoad={setCountryData} />
</GridColumn> </Column>
</GridRow> </Row>
<GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}> <Row className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
<GridColumn xs={12} md={12} lg={4}> <Column xs={12} md={12} lg={4}>
<EventsTable {...tableProps} onDataLoad={setEventsData} /> <EventsTable {...tableProps} onDataLoad={setEventsData} />
</GridColumn> </Column>
<GridColumn xs={12} md={12} lg={8}> <Column xs={12} md={12} lg={8}>
<EventDataButton websiteId={websiteId} /> <EventDataButton websiteId={websiteId} />
<EventsChart className={styles.eventschart} websiteId={websiteId} /> <EventsChart className={styles.eventschart} websiteId={websiteId} />
</GridColumn> </Column>
</GridRow> </Row>
</GridLayout> </>
)} )}
{view && chartLoaded && ( {view && chartLoaded && (
<MenuLayout <MenuLayout

4
components/pages/WebsiteDetails.module.css
View File

@ -3,11 +3,11 @@
} }
.view { .view {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--base300);
} }
.menu { .menu {
font-size: var(--font-size-small); font-size: var(--font-size-sm);
} }
.content { .content {

2
components/pages/WebsiteList.module.css
View File

@ -1,6 +1,6 @@
.website { .website {
padding-bottom: 30px; padding-bottom: 30px;
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--base300);
margin-bottom: 30px; margin-bottom: 30px;
align-self: stretch; align-self: stretch;
} }

4
components/settings/SettingsButton.module.css
View File

@ -3,8 +3,8 @@
} }
.panel { .panel {
background: var(--gray50); background: var(--base50);
border: 1px solid var(--gray500); border: 1px solid var(--base500);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
components/settings/UserButton.module.css
View File

@ -1,7 +1,7 @@
.username { .username {
border-bottom: 1px solid var(--gray500); border-bottom: 1px solid var(--base500);
} }
.username:hover { .username:hover {
background: var(--gray50); background: var(--base50);
} }

23
pages/_app.js
View File

@ -1,11 +1,9 @@
import Head from 'next/head';
import { useRouter } from 'next/router';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Container } from 'react-basics';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useConfig from 'hooks/useConfig'; import useConfig from 'hooks/useConfig';
import 'react-basics/dist/styles.css'; import 'react-basics/dist/styles.css';
import 'styles/variables.css';
import 'styles/index.css'; import 'styles/index.css';
import '@fontsource/inter/400.css'; import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css'; import '@fontsource/inter/600.css';
@ -13,8 +11,7 @@ import '@fontsource/inter/600.css';
const client = new QueryClient(); const client = new QueryClient();
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
const { locale, messages, dir } = useLocale(); const { locale, messages } = useLocale();
const { basePath } = useRouter();
useConfig(); useConfig();
const Wrapper = ({ children }) => <span className={locale}>{children}</span>; const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@ -26,21 +23,7 @@ export default function App({ Component, pageProps }) {
return ( return (
<QueryClientProvider client={client}> <QueryClientProvider client={client}>
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}> <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<Head> <Component {...pageProps} />
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Container dir={dir}>
<Component {...pageProps} />
</Container>
</IntlProvider> </IntlProvider>
</QueryClientProvider> </QueryClientProvider>
); );

2
pages/api/auth/login.ts
View File

@ -34,7 +34,7 @@ export default async (
return badRequest(res); return badRequest(res);
} }
const user = await getUser({ username }, true); const user = await getUser({ username }, { includePassword: true });
if (user && checkPassword(password, user.password)) { if (user && checkPassword(password, user.password)) {
if (redis.enabled) { if (redis.enabled) {

2
pages/api/realtime/init.ts
View File

@ -13,7 +13,7 @@ export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit
if (req.method === 'GET') { if (req.method === 'GET') {
const { id: userId } = req.auth.user; const { id: userId } = req.auth.user;
const websites = await getUserWebsites({ userId }); const websites = await getUserWebsites(userId);
const ids = websites.map(({ id }) => id); const ids = websites.map(({ id }) => id);
const token = createToken({ websites: ids }, secret()); const token = createToken({ websites: ids }, secret());
const data = await getRealtimeData(ids, subMinutes(new Date(), 30)); const data = await getRealtimeData(ids, subMinutes(new Date(), 30));

3
pages/api/websites/[id]/eventdata.ts
View File

@ -1,5 +1,4 @@
import { WebsiteMetric } from 'lib/types'; import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody } from 'lib/types';
import { canViewWebsite } from 'lib/auth'; import { canViewWebsite } from 'lib/auth';
import { useAuth, useCors } from 'lib/middleware'; import { useAuth, useCors } from 'lib/middleware';
import { NextApiResponse } from 'next'; import { NextApiResponse } from 'next';

3
pages/api/websites/[id]/events.ts
View File

@ -1,5 +1,4 @@
import { WebsiteMetric } from 'lib/types'; import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody } from 'lib/types';
import { canViewWebsite } from 'lib/auth'; import { canViewWebsite } from 'lib/auth';
import { useAuth, useCors } from 'lib/middleware'; import { useAuth, useCors } from 'lib/middleware';
import moment from 'moment-timezone'; import moment from 'moment-timezone';

3
pages/api/websites/[id]/index.ts
View File

@ -1,5 +1,4 @@
import { Website } from 'lib/types'; import { Website, NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody } from 'lib/types';
import { canViewWebsite, canUpdateWebsite, canDeleteWebsite } from 'lib/auth'; import { canViewWebsite, canUpdateWebsite, canDeleteWebsite } from 'lib/auth';
import { useAuth, useCors } from 'lib/middleware'; import { useAuth, useCors } from 'lib/middleware';
import { NextApiResponse } from 'next'; import { NextApiResponse } from 'next';

3
pages/api/websites/[id]/metrics.ts
View File

@ -1,5 +1,4 @@
import { WebsiteMetric } from 'lib/types'; import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
import { NextApiRequestQueryBody } from 'lib/types';
import { canViewWebsite } from 'lib/auth'; import { canViewWebsite } from 'lib/auth';
import { FILTER_IGNORED } from 'lib/constants'; import { FILTER_IGNORED } from 'lib/constants';
import { useAuth, useCors } from 'lib/middleware'; import { useAuth, useCors } from 'lib/middleware';

7
queries/analytics/pageview/getPageviewMetrics.ts
View File

@ -63,7 +63,7 @@ async function clickhouseQuery(
const { startDate, endDate, column, filters = {} } = data; const { startDate, endDate, column, filters = {} } = data;
const { rawQuery, parseFilters, getBetweenDates } = clickhouse; const { rawQuery, parseFilters, getBetweenDates } = clickhouse;
const website = await cache.fetchWebsite(websiteId); const website = await cache.fetchWebsite(websiteId);
const params = [websiteId, website?.revId || 0]; const params = [websiteId, website?.revId || 0, EVENT_TYPE.pageView];
const { filterQuery } = parseFilters(filters, params); const { filterQuery } = parseFilters(filters, params);
return rawQuery( return rawQuery(
@ -71,9 +71,8 @@ async function clickhouseQuery(
from event from event
where website_id = $1 where website_id = $1
and rev_id = $2 and rev_id = $2
and event_type = ${EVENT_TYPE.pageView} and event_type = $3
${column !== 'event_name' ? `and event_name = ''` : `and event_name != ''`} and ${getBetweenDates('created_at', startDate, endDate)}
and ${getBetweenDates('created_at', startDate, endDate)}n
${filterQuery} ${filterQuery}
group by x group by x
order by y desc`, order by y desc`,

3981
styles/bootstrap-grid.css vendored
View File

File diff suppressed because it is too large Load Diff

29
styles/index.css
View File

@ -13,11 +13,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} color: var(--base800);
background: var(--base100);
body {
color: var(--gray900);
background: var(--gray75);
} }
.zh-CN { .zh-CN {
@ -74,24 +71,6 @@ a:visited {
color: var(--primary400); color: var(--primary400);
} }
label {
flex: 1;
margin-right: 20px;
}
label:empty {
flex: 0;
}
dt {
font-weight: 600;
margin: 0 0 5px 0;
}
dd {
margin: 0 0 30px 0;
}
main { main {
flex: 1; flex: 1;
display: flex; display: flex;
@ -109,7 +88,3 @@ svg {
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
#__modals {
z-index: 10;
}

57
styles/variables.css
View File

@ -1,55 +1,6 @@
:root { :root {
--gray50: #ffffff; --primary400: var(--blue800);
--gray75: #fafafa; --primary500: var(--blue900);
--gray100: #f5f5f5; --primary600: var(--blue1000);
--gray200: #eaeaea; --primary700: var(--blue1100);
--gray300: #e1e1e1;
--gray400: #cacaca;
--gray500: #b3b3b3;
--gray600: #8e8e8e;
--gray700: #6e6e6e;
--gray800: #4b4b4b;
--gray900: #2c2c2c;
--primary400: #2680eb;
--primary500: #1473e6;
--primary600: #0d66d0;
--primary700: #095aba;
--font-size-xlarge: 36px;
--font-size-large: 24px;
--font-size-normal: 16px;
--font-size-small: 14px;
--font-size-xsmall: 12px;
--grid-size-small: 576px;
--grid-size-medium: 768px;
--grid-size-large: 992px;
--grid-size-xlarge: 1140px;
--red400: #e34850;
--red500: #d7373f;
--red600: #c9252d;
--red700: #bb121a;
--green400: #2d9d78;
--green500: #268e6c;
--green600: #12805c;
--green700: #107154;
--msgColor: #ffffff;
}
[data-theme='dark'] {
--gray50: #252525;
--gray75: #2f2f2f;
--gray100: #323232;
--gray200: #3e3e3e;
--gray300: #4a4a4a;
--gray400: #5a5a5a;
--gray500: #6e6e6e;
--gray600: #909090;
--gray700: #b9b9b9;
--gray800: #e3e3e3;
--gray900: #ffffff;
} }