More refactoring.

components/pages/settings/profile/PasswordChangeButton.js

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

components/pages/settings/profile/ProfileDetails.js

@@ -21,15 +21,15 @@ export default function ProfileDetails() {
     <Form>
       <FormRow label={formatMessage(labels.username)}>{username}</FormRow>
       <FormRow label={formatMessage(labels.role)}>{role}</FormRow>
+      <FormRow label={formatMessage(labels.defaultDateRange)}>
+        <DateRangeSetting />
+      </FormRow>
       <FormRow label={formatMessage(labels.language)}>
         <LanguageSetting />
       </FormRow>
       <FormRow label={formatMessage(labels.timezone)}>
         <TimezoneSetting />
       </FormRow>
-      <FormRow label={formatMessage(labels.dateRange)}>
-        <DateRangeSetting />
-      </FormRow>
       <FormRow label={formatMessage(labels.theme)}>
         <ThemeSetting />
       </FormRow>

components/pages/settings/teams/TeamEditForm.js

@@ -42,7 +42,7 @@ export default function TeamEditForm({ teamId, data, onSave }) {
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
       <FormRow label={formatMessage(labels.teamId)}>
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>

components/pages/settings/teams/TeamMembersTable.js

@@ -14,14 +14,16 @@ import {
 import { useIntl } from 'react-intl';
 import { ROLES } from 'lib/constants';
 import { labels } from 'components/messages';
+import useUser from 'hooks/useUser';
 
 export default function TeamMembersTable({ data = [] }) {
   const { formatMessage } = useIntl();
+  const { user } = useUser();
 
   const columns = [
-    { name: 'username', label: formatMessage(labels.username), style: { flex: 4 } },
-    { name: 'role', label: formatMessage(labels.role) },
-    { name: 'action', label: '' },
+    { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
+    { name: 'role', label: formatMessage(labels.role), style: { flex: 1 } },
+    { name: 'action', label: '', style: { flex: 1 } },
   ];
 
   return (
@@ -43,14 +45,14 @@ export default function TeamMembersTable({ data = [] }) {
               labels[Object.keys(ROLES).find(key => ROLES[key] === row.role) || labels.unknown],
             ),
             action: (
-              <div>
-                <Button>
+              <Flexbox flex={1} justifyContent="end">
+                <Button disabled={user.id === row?.user?.id}>
                   <Icon>
                     <Icons.Close />
                   </Icon>
                   <Text>{formatMessage(labels.remove)}</Text>
                 </Button>
-              </div>
+              </Flexbox>
             ),
           };
 
@@ -59,11 +61,7 @@ export default function TeamMembersTable({ data = [] }) {
               {(data, key, colIndex) => {
                 return (
                   <TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
-                    <Flexbox
-                      flex={1}
-                      alignItems="center"
-                      justifyContent={key === 'action' ? 'end' : undefined}
-                    >
+                    <Flexbox flex={1} alignItems="center">
                       {data[key]}
                     </Flexbox>
                   </TableCell>

components/pages/settings/websites/WebsitesTable.js

@@ -7,23 +7,20 @@ import {
   TableCell,
   TableColumn,
   Button,
+  Text,
   Icon,
   Icons,
   Flexbox,
 } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  name: { id: 'label.name', defaultMessage: 'Name' },
-  domain: { id: 'label.domain', defaultMessage: 'Domain' },
-});
+import { useIntl } from 'react-intl';
+import { labels } from 'components/messages';
 
 export default function WebsitesTable({ data = [] }) {
   const { formatMessage } = useIntl();
 
   const columns = [
-    { name: 'name', label: formatMessage(messages.name), style: { flex: 2 } },
-    { name: 'domain', label: formatMessage(messages.domain) },
+    { name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
+    { name: 'domain', label: formatMessage(labels.domain) },
     { name: 'action', label: ' ' },
   ];
 
@@ -50,7 +47,7 @@ export default function WebsitesTable({ data = [] }) {
                     <Icon>
                       <Icons.ArrowRight />
                     </Icon>
-                    Settings
+                    <Text>Settings</Text>
                   </Button>
                 </a>
               </Link>
@@ -60,7 +57,7 @@ export default function WebsitesTable({ data = [] }) {
                     <Icon>
                       <Icons.External />
                     </Icon>
-                    View
+                    <Text>View</Text>
                   </Button>
                 </a>
               </Link>