Updated settings components and date filter.

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;
 }