Updated settings components and date filter.

assets/profile.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"/></svg>

components/common/Calendar.module.css

@@ -1,7 +1,6 @@
 .calendar {
   display: flex;
   flex-direction: column;
-  font-size: var(--font-size-sm);
   flex: 1;
   min-height: 306px;
 }

components/common/Dropdown.module.css

@@ -12,7 +12,6 @@
   flex: 1;
   display: flex;
   justify-content: space-between;
-  font-size: var(--font-size-sm);
   flex-wrap: nowrap;
   white-space: nowrap;
   padding: 4px 16px;

components/common/Menu.module.css

@@ -7,8 +7,6 @@
 }
 
 .option {
-  font-size: var(--font-size-sm);
-  font-weight: normal;
   background: var(--base50);
   padding: 4px 16px;
   cursor: pointer;

components/common/UpdateNotice.module.css

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

components/layout/FormLayout.module.css

@@ -54,7 +54,6 @@
 .msg {
   color: var(--msgColor);
   background: var(--red400);
-  font-size: var(--font-size-sm);
   padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;

components/metrics/ActiveUsers.module.css

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

components/metrics/DataTable.module.css

@@ -1,7 +1,6 @@
 .table {
   position: relative;
   height: 100%;
-  font-size: var(--font-size-sm);
   display: grid;
   grid-template-rows: fit-content(100%) auto;
   overflow: hidden;
@@ -23,11 +22,9 @@
 .title {
   display: flex;
   font-weight: 600;
-  font-size: var(--font-size-md);
 }
 
 .metric {
-  font-size: var(--font-size-sm);
   font-weight: 600;
   text-align: center;
   width: 100px;

components/metrics/MetricCard.module.css

@@ -6,7 +6,7 @@
 }
 
 .value {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-xxl);
   line-height: 40px;
   min-height: 40px;
   font-weight: 600;
@@ -14,7 +14,6 @@
 }
 
 .label {
-  font-size: var(--font-size-md);
   white-space: nowrap;
   display: flex;
   align-items: center;

components/metrics/MetricsTable.module.css

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

components/pages/settings/users/UserPasswordForm.js

@@ -1,7 +1,6 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
-import styles from './UserPasswordForm.module.css';
 import useUser from 'hooks/useUser';
 
 export default function UserPasswordForm({ onSave, onClose, userId }) {
@@ -36,7 +35,7 @@ export default function UserPasswordForm({ onSave, onClose, userId }) {
   };
 
   return (
-    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       {isCurrentUser && (
         <FormRow label="Current password">
           <FormInput name="currentPassword" rules={{ required: 'Required' }}>

components/pages/settings/users/UserPasswordForm.module.css

@@ -1,6 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  width: 300px;
-}

components/settings/DateRangeSetting.js

@@ -1,35 +1,21 @@
 import { FormattedMessage } from 'react-intl';
-import DateFilter, { filterOptions } from 'components/common/DateFilter';
-import { Button } from 'react-basics';
+import DateFilter from 'components/common/DateFilter';
+import { Button, Flexbox } from 'react-basics';
 import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import styles from './DateRangeSetting.module.css';
 
 export default function DateRangeSetting() {
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
-  const options = filterOptions.filter(e => e.value !== 'all');
 
-  function handleChange(value) {
-    setDateRange(value);
-  }
-
-  function handleReset() {
-    setDateRange(DEFAULT_DATE_RANGE);
-  }
+  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
 
   return (
-    <>
-      <DateFilter
-        options={options}
-        value={value}
-        startDate={startDate}
-        endDate={endDate}
-        onChange={handleChange}
-      />
-      <Button className={styles.button} size="sm" onClick={handleReset}>
+    <Flexbox width={400} gap={10}>
+      <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
+      <Button onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />
       </Button>
-    </>
+    </Flexbox>
   );
 }

components/settings/DateRangeSetting.module.css

@@ -1,3 +0,0 @@
-.button {
-  margin-left: 10px;
-}

components/settings/LanguageSetting.js

@@ -13,13 +13,13 @@ export default function LanguageSetting() {
   const { locale, saveLocale } = useLocale();
   const options = Object.keys(languages);
 
-  function handleReset() {
-    saveLocale(DEFAULT_LOCALE);
-  }
+  const handleReset = () => saveLocale(DEFAULT_LOCALE);
+
+  const renderValue = value => languages[value].label;
 
   return (
-    <Flexbox gap={10} style={{ width: 400 }}>
-      <Dropdown items={options} value={locale} onChange={saveLocale}>
+    <Flexbox width={400} gap={10}>
+      <Dropdown items={options} value={locale} renderValue={renderValue} onChange={saveLocale}>
         {item => <Item key={item}>{languages[item].label}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>

components/settings/ProfileDetails.js

@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 export default function ProfileDetails() {
-  const user = useUser();
+  const { user } = useUser();
   const { formatMessage } = useIntl();
 
   if (!user) {

components/settings/ThemeSetting.module.css

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

components/settings/TimezoneSetting.js

@@ -1,4 +1,4 @@
-import { Dropdown, Item, Button } from 'react-basics';
+import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { useIntl, defineMessages } from 'react-intl';
 import { listTimeZones } from 'timezone-support';
 import useTimezone from 'hooks/useTimezone';
@@ -13,16 +13,14 @@ export default function TimezoneSetting() {
   const [timezone, saveTimezone] = useTimezone();
   const options = listTimeZones();
 
-  function handleReset() {
-    saveTimezone(getTimezone());
-  }
+  const handleReset = () => saveTimezone(getTimezone());
 
   return (
-    <>
+    <Flexbox width={400} gap={10}>
       <Dropdown items={options} value={timezone} onChange={saveTimezone}>
         {item => <Item key={item}>{item}</Item>}
       </Dropdown>
       <Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
-    </>
+    </Flexbox>
   );
 }

components/settings/UserButton.module.css

@@ -11,7 +11,6 @@
 }
 
 .icon svg {
-  font-size: 16px;
   height: 16px;
   width: 16px;
 }

hooks/useConfig.js

@@ -9,7 +9,7 @@ export default function useConfig() {
   const { get } = useApi();
 
   async function loadConfig() {
-    const { data } = await get('/config');
+    const data = await get('/config');
     loading = false;
     setConfig(data);
   }

hooks/useLocale.js

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { get, setItem } from 'next-basics';
+import { setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
 import useForceUpdate from 'hooks/useForceUpdate';
+import useApi from 'hooks/useApi';
 import enUS from 'public/intl/messages/en-US.json';
 
 const messages = {
@@ -19,6 +20,7 @@ export default function useLocale() {
   const forceUpdate = useForceUpdate();
   const dir = getTextDirection(locale);
   const dateLocale = getDateLocale(locale);
+  const { get } = useApi();
 
   async function loadMessages(locale) {
     const data = await get(`${basePath}/intl/messages/${locale}.json`);

hooks/useShareToken.js

@@ -9,7 +9,7 @@ export default function useShareToken(shareId) {
   const { get } = useApi();
 
   async function loadToken(id) {
-    const { data } = await get(`/share/${id}`);
+    const data = await get(`/share/${id}`);
 
     if (data) {
       setShareToken(data);

pages/_app.js

@@ -32,7 +32,12 @@ export default function App({ Component, pageProps }) {
 
   return (
     <QueryClientProvider client={client}>
-      <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
+      <IntlProvider
+        locale={locale}
+        messages={messages[locale]}
+        textComponent={Wrapper}
+        onError={() => null}
+      >
         <Head>
           <link rel="icon" href={`${basePath}/favicon.ico`} />
           <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />