diff --git a/components/common/Table.js b/components/common/Table.js index 0331c5bc..c169250d 100644 --- a/components/common/Table.js +++ b/components/common/Table.js @@ -9,7 +9,7 @@ export default function Table({ columns, rows, empty }) { return (
-
+
{columns.map(({ key, label, className, style, header }) => (
{rows.map((row, rowIndex) => ( -
+
{columns.map(({ key, render, className, style, cell }) => (
{children}
; + return
{children}
; } diff --git a/components/layout/Page.module.css b/components/layout/Page.module.css index 8cfe426c..de2ad880 100644 --- a/components/layout/Page.module.css +++ b/components/layout/Page.module.css @@ -1,7 +1,4 @@ -.container { - flex: 1; - display: flex; - flex-direction: column; +.page { padding: 0 30px; background: var(--gray50); height: 100%; diff --git a/components/AccountSettings.js b/components/settings/AccountSettings.js similarity index 91% rename from components/AccountSettings.js rename to components/settings/AccountSettings.js index 4878b407..4383d26d 100644 --- a/components/AccountSettings.js +++ b/components/settings/AccountSettings.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useSelector } from 'react-redux'; +import classNames from 'classnames'; import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; import Icon from 'components/common/Icon'; @@ -12,7 +12,7 @@ import Trash from 'assets/trash.svg'; import Check from 'assets/check.svg'; import { get } from 'lib/web'; import styles from './AccountSettings.module.css'; -import DeleteForm from './forms/DeleteForm'; +import DeleteForm from '../forms/DeleteForm'; export default function AccountSettings() { const [data, setData] = useState(); @@ -36,14 +36,15 @@ export default function AccountSettings() { ) : null; const columns = [ - { key: 'username', label: 'Username' }, + { key: 'username', label: 'Username', className: 'col-6 col-md-4' }, { key: 'is_admin', label: 'Administrator', + className: 'col-6 col-md-4', render: Checkmark, }, { - className: styles.buttons, + className: classNames(styles.buttons, 'col-12 col-md-4'), render: Buttons, }, ]; diff --git a/components/AccountSettings.module.css b/components/settings/AccountSettings.module.css similarity index 100% rename from components/AccountSettings.module.css rename to components/settings/AccountSettings.module.css diff --git a/components/ProfileSettings.js b/components/settings/ProfileSettings.js similarity index 94% rename from components/ProfileSettings.js rename to components/settings/ProfileSettings.js index 44f54686..1aac00af 100644 --- a/components/ProfileSettings.js +++ b/components/settings/ProfileSettings.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import PageHeader from 'components/layout/PageHeader'; import Button from 'components/common/Button'; -import ChangePasswordForm from './forms/ChangePasswordForm'; +import ChangePasswordForm from '../forms/ChangePasswordForm'; import Modal from 'components/common/Modal'; import Dots from 'assets/ellipsis-h.svg'; diff --git a/components/Settings.js b/components/settings/Settings.js similarity index 100% rename from components/Settings.js rename to components/settings/Settings.js diff --git a/components/WebsiteSettings.js b/components/settings/WebsiteSettings.js similarity index 88% rename from components/WebsiteSettings.js rename to components/settings/WebsiteSettings.js index afdf5aa0..640f5764 100644 --- a/components/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -1,12 +1,13 @@ import React, { useState, useEffect } from 'react'; +import classNames from 'classnames'; import Table from 'components/common/Table'; import Button from 'components/common/Button'; import PageHeader from 'components/layout/PageHeader'; import Modal from 'components/common/Modal'; -import WebsiteEditForm from './forms/WebsiteEditForm'; -import DeleteForm from './forms/DeleteForm'; -import TrackingCodeForm from './forms/TrackingCodeForm'; -import ShareUrlForm from './forms/ShareUrlForm'; +import WebsiteEditForm from '../forms/WebsiteEditForm'; +import DeleteForm from '../forms/DeleteForm'; +import TrackingCodeForm from '../forms/TrackingCodeForm'; +import ShareUrlForm from '../forms/ShareUrlForm'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import Pen from 'assets/pen.svg'; import Trash from 'assets/trash.svg'; @@ -53,11 +54,11 @@ export default function WebsiteSettings() { ); const columns = [ - { key: 'name', label: 'Name', className: styles.col }, - { key: 'domain', label: 'Domain', className: styles.col }, + { key: 'name', label: 'Name', className: 'col-6 col-md-4' }, + { key: 'domain', label: 'Domain', className: 'col-6 col-md-4' }, { key: 'action', - className: styles.buttons, + className: classNames(styles.buttons, 'col-12 col-md-4 pt-1'), render: Buttons, }, ]; diff --git a/components/WebsiteSettings.module.css b/components/settings/WebsiteSettings.module.css similarity index 69% rename from components/WebsiteSettings.module.css rename to components/settings/WebsiteSettings.module.css index 9283578f..444235b3 100644 --- a/components/WebsiteSettings.module.css +++ b/components/settings/WebsiteSettings.module.css @@ -3,7 +3,5 @@ } .buttons { - flex: 3; - display: flex; justify-content: flex-end; } diff --git a/pages/account.js b/pages/account.js index 0fddfeb1..a7ed6862 100644 --- a/pages/account.js +++ b/pages/account.js @@ -1,6 +1,6 @@ import React from 'react'; import Layout from 'components/layout/Layout'; -import AccountSettings from 'components/AccountSettings'; +import AccountSettings from 'components/settings/AccountSettings'; import useRequireLogin from 'hooks/useRequireLogin'; export default function AccountPage() { diff --git a/pages/settings.js b/pages/settings.js index f244529b..65eff46e 100644 --- a/pages/settings.js +++ b/pages/settings.js @@ -1,6 +1,6 @@ import React from 'react'; import Layout from 'components/layout/Layout'; -import Settings from 'components/Settings'; +import Settings from 'components/settings/Settings'; import useRequireLogin from 'hooks/useRequireLogin'; export default function SettingsPage() {