Update users screens

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import BackupRow from '@/components/server/backups/BackupRow';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
 
 export default () => {
     const { uuid, featureLimits } = useServer();
@@ -31,14 +32,14 @@ export default () => {
     }, []);
 
     if (backups.length === 0 && loading) {
-        return <Spinner size={'large'} centered={true}/>;
+        return <Spinner size={'large'} centered/>;
     }
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.length ?
-                <p className="text-center text-sm text-neutral-400">
+                <p css={tw`text-center text-sm text-neutral-400`}>
                     There are no backups stored for this server.
                 </p>
                 :
@@ -46,7 +47,7 @@ export default () => {
                     {backups.map((backup, index) => <BackupRow
                         key={backup.uuid}
                         backup={backup}
-                        className={index !== (backups.length - 1) ? 'mb-2' : undefined}
+                        css={index > 0 ? tw`mt-2` : undefined}
                     />)}
                 </div>
             }
@@ -57,12 +58,12 @@ export default () => {
             }
             <Can action={'backup.create'}>
                 {(featureLimits.backups > 0 && backups.length > 0) &&
-                <p className="text-center text-xs text-neutral-400 mt-2">
+                <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
                     {backups.length} of {featureLimits.backups} backups have been created for this server.
                 </p>
                 }
                 {featureLimits.backups > 0 && featureLimits.backups !== backups.length &&
-                <div className={'mt-6 flex justify-end'}>
+                <div css={tw`mt-6 flex justify-end`}>
                     <CreateBackupButton/>
                 </div>
                 }

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -16,6 +16,7 @@ import deleteBackup from '@/api/server/backups/deleteBackup';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import Can from '@/components/elements/Can';
+import tw from 'twin.macro';
 
 interface Props {
     backup: ServerBackup;
@@ -61,8 +62,8 @@ export default ({ backup }: Props) => {
         <>
             {visible &&
             <ChecksumModal
+                appear
                 visible={visible}
-                appear={true}
                 onDismissed={() => setVisible(false)}
                 checksum={backup.sha256Hash}
             />
@@ -84,27 +85,27 @@ export default ({ backup }: Props) => {
                 renderToggle={onClick => (
                     <button
                         onClick={onClick}
-                        className={'text-neutral-200 transition-color duration-150 hover:text-neutral-100 p-2'}
+                        css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
                     >
                         <FontAwesomeIcon icon={faEllipsisH}/>
                     </button>
                 )}
             >
-                <div className={'text-sm'}>
+                <div css={tw`text-sm`}>
                     <Can action={'backup.download'}>
                         <DropdownButtonRow onClick={() => doDownload()}>
-                            <FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Download</span>
+                            <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Download</span>
                         </DropdownButtonRow>
                     </Can>
                     <DropdownButtonRow onClick={() => setVisible(true)}>
-                        <FontAwesomeIcon fixedWidth={true} icon={faLock} className={'text-xs'}/>
-                        <span className={'ml-2'}>Checksum</span>
+                        <FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
+                        <span css={tw`ml-2`}>Checksum</span>
                     </DropdownButtonRow>
                     <Can action={'backup.delete'}>
-                        <DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
-                            <FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Delete</span>
+                        <DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
+                            <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Delete</span>
                         </DropdownButtonRow>
                     </Can>
                 </div>

resources/scripts/components/server/backups/BackupRow.tsx

@@ -10,6 +10,8 @@ import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     backup: ServerBackup;
@@ -34,38 +36,38 @@ export default ({ backup, className }: Props) => {
     });
 
     return (
-        <div className={`grey-row-box flex items-center ${className}`}>
-            <div className={'mr-4'}>
+        <GreyRowBox css={tw`flex items-center`} className={className}>
+            <div css={tw`mr-4`}>
                 {backup.completedAt ?
-                    <FontAwesomeIcon icon={faArchive} className={'text-neutral-300'}/>
+                    <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
                     :
                     <Spinner size={'small'}/>
                 }
             </div>
-            <div className={'flex-1'}>
-                <p className={'text-sm mb-1'}>
+            <div css={tw`flex-1`}>
+                <p css={tw`text-sm mb-1`}>
                     {backup.name}
                     {backup.completedAt &&
-                    <span className={'ml-3 text-neutral-300 text-xs font-thin'}>{bytesToHuman(backup.bytes)}</span>
+                    <span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
                     }
                 </p>
-                <p className={'text-xs text-neutral-400 font-mono'}>
+                <p css={tw`text-xs text-neutral-400 font-mono`}>
                     {backup.uuid}
                 </p>
             </div>
-            <div className={'ml-8 text-center'}>
+            <div css={tw`ml-8 text-center`}>
                 <p
-                    title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
-                    className={'text-sm'}
+                    title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
+                    css={tw`text-sm`}
                 >
                     {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
             </div>
             <Can action={'backup.download'}>
-                <div className={'ml-6'} style={{ marginRight: '-0.5rem' }}>
+                <div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
                     {!backup.completedAt ?
-                        <div className={'p-2 invisible'}>
+                        <div css={tw`p-2 invisible`}>
                             <FontAwesomeIcon icon={faEllipsisH}/>
                         </div>
                         :
@@ -73,6 +75,6 @@ export default ({ backup, className }: Props) => {
                     }
                 </div>
             </Can>
-        </div>
+        </GreyRowBox>
     );
 };

resources/scripts/components/server/backups/ChecksumModal.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import tw from 'twin.macro';
 
 const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum: string }) => (
     <Modal {...props}>
-        <h3 className={'mb-6'}>Verify file checksum</h3>
-        <p className={'text-sm'}>
+        <h3 css={tw`mb-6`}>Verify file checksum</h3>
+        <p css={tw`text-sm`}>
             The SHA256 checksum of this file is:
         </p>
-        <pre className={'mt-2 text-sm p-2 bg-neutral-900 rounded'}>
-            <code className={'block font-mono'}>{checksum}</code>
+        <pre css={tw`mt-2 text-sm p-2 bg-neutral-900 rounded`}>
+            <code css={tw`block font-mono`}>{checksum}</code>
         </pre>
     </Modal>
 );

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -10,6 +10,9 @@ import createServerBackup from '@/api/server/backups/createServerBackup';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
+import Input, { Textarea } from '@/components/elements/Input';
 
 interface Values {
     name: string;
@@ -21,17 +24,17 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <Form className={'pb-6'}>
-                <FlashMessageRender byKey={'backups:create'} className={'mb-4'}/>
-                <h3 className={'mb-6'}>Create server backup</h3>
-                <div className={'mb-6'}>
+            <Form>
+                <FlashMessageRender byKey={'backups:create'} css={tw`mb-4`}/>
+                <h2 css={tw`text-2xl mb-6`}>Create server backup</h2>
+                <div css={tw`mb-6`}>
                     <Field
                         name={'name'}
                         label={'Backup name'}
                         description={'If provided, the name that should be used to reference this backup.'}
                     />
                 </div>
-                <div className={'mb-6'}>
+                <div css={tw`mb-6`}>
                     <FormikFieldWrapper
                         name={'ignored'}
                         label={'Ignored Files & Directories'}
@@ -42,20 +45,13 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
                             prefixing the path with an exclamation point.
                         `}
                     >
-                        <FormikField
-                            name={'ignored'}
-                            component={'textarea'}
-                            className={'input-dark h-32'}
-                        />
+                        <FormikField as={Textarea} name={'ignored'} css={tw`h-32`}/>
                     </FormikFieldWrapper>
                 </div>
-                <div className={'flex justify-end'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-sm'}
-                    >
+                <div css={tw`flex justify-end`}>
+                    <Button type={'submit'}>
                         Start backup
-                    </button>
+                    </Button>
                 </div>
             </Form>
         </Modal>
@@ -99,18 +95,15 @@ export default () => {
                 })}
             >
                 <ModalContent
-                    appear={true}
+                    appear
                     visible={visible}
                     onDismissed={() => setVisible(false)}
                 />
             </Formik>
             }
-            <button
-                className={'btn btn-primary btn-sm'}
-                onClick={() => setVisible(true)}
-            >
+            <Button onClick={() => setVisible(true)}>
                 Create backup
-            </button>
+            </Button>
         </>
     );
 };

resources/scripts/components/server/users/AddSubuserButton.tsx

@@ -2,20 +2,18 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
 
     return (
         <>
-            {visible && <EditSubuserModal
-                appear={true}
-                visible={true}
-                onDismissed={() => setVisible(false)}
-            />}
-            <button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faUserPlus} className={'mr-1'}/> New User
-            </button>
+            {visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
+            <Button onClick={() => setVisible(true)}>
+                <FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
+            </Button>
         </>
     );
 };

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -18,6 +18,9 @@ import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
 import { useDeepMemo } from '@/plugins/useDeepMemo';
 import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
 
 type Props = {
     subuser?: Subuser;
@@ -72,17 +75,17 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
         }
 
         return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
-    }, [permissions, loggedInPermissions]);
+    }, [ permissions, loggedInPermissions ]);
 
     return (
         <Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
-            <h3 ref={ref}>
+            <h2 css={tw`text-2xl`} ref={ref}>
                 {subuser ?
                     `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
                     :
                     'Create new subuser'
                 }
-            </h3>
+            </h2>
             <FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
             {(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
             <div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
@@ -108,8 +111,8 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                         title={
                             <div css={tw`flex items-center`}>
                                 <p css={tw`text-sm uppercase flex-1`}>{key}</p>
-                                {canEditUser && editablePermissions.indexOf(key) >= 0 &&
-                                <input
+                                {canEditUser &&
+                                <Input
                                     type={'checkbox'}
                                     onClick={e => {
                                         if (e.currentTarget.checked) {
@@ -133,7 +136,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                 }
                             </div>
                         }
-                        className={index !== 0 ? 'mt-4' : undefined}
+                        css={index > 0 ? tw`mt-4` : undefined}
                     >
                         <p css={tw`text-sm text-neutral-400 mb-4`}>
                             {permissions[key].description}
@@ -157,9 +160,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                     />
                                 </div>
                                 <div css={tw`flex-1`}>
-                                    <span css={tw`font-medium`} className={'input-dark-label'}>
-                                        {pkey}
-                                    </span>
+                                    <Label css={tw`font-medium`}>{pkey}</Label>
                                     {permissions[key].keys[pkey].length > 0 &&
                                     <p css={tw`text-xs text-neutral-400 mt-1`}>
                                         {permissions[key].keys[pkey]}
@@ -173,9 +174,9 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
             </div>
             <Can action={subuser ? 'user.update' : 'user.create'}>
                 <div css={tw`pb-6 flex justify-end`}>
-                    <button className={'btn btn-primary btn-sm'} type={'submit'}>
+                    <Button type={'submit'}>
                         {subuser ? 'Save' : 'Invite User'}
-                    </button>
+                    </Button>
                 </div>
             </Can>
         </Modal>

resources/scripts/components/server/users/RemoveSubuserButton.tsx

@@ -8,6 +8,7 @@ import deleteSubuser from '@/api/server/users/deleteSubuser';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
 
 export default ({ subuser }: { subuser: Subuser }) => {
     const [ loading, setLoading ] = useState(false);
@@ -38,7 +39,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
             <ConfirmationModal
                 title={'Delete this subuser?'}
                 buttonText={'Yes, remove subuser'}
-                visible={true}
+                visible
                 showSpinnerOverlay={loading}
                 onConfirmed={() => doDeletion()}
                 onDismissed={() => setShowConfirmation(false)}
@@ -50,7 +51,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
             <button
                 type={'button'}
                 aria-label={'Delete subuser'}
-                className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
                 onClick={() => setShowConfirmation(true)}
             >
                 <FontAwesomeIcon icon={faTrashAlt}/>

resources/scripts/components/server/users/UserRow.tsx

@@ -9,6 +9,8 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     subuser: Subuser;
@@ -19,23 +21,23 @@ export default ({ subuser }: Props) => {
     const [ visible, setVisible ] = useState(false);
 
     return (
-        <div className={'grey-row-box mb-2'}>
+        <GreyRowBox css={tw`mb-2`}>
             {visible &&
             <EditSubuserModal
-                appear={true}
-                visible={true}
+                appear
+                visible
                 subuser={subuser}
                 onDismissed={() => setVisible(false)}
             />
             }
-            <div className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800 overflow-hidden'}>
-                <img className={'f-full h-full'} src={`${subuser.image}?s=400`}/>
+            <div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden`}>
+                <img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
             </div>
-            <div className={'ml-4 flex-1'}>
-                <p className={'text-sm'}>{subuser.email}</p>
+            <div css={tw`ml-4 flex-1`}>
+                <p css={tw`text-sm`}>{subuser.email}</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>
                     &nbsp;
                     <FontAwesomeIcon
                         icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
@@ -45,13 +47,13 @@ export default ({ subuser }: Props) => {
                     />
                     &nbsp;
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>2FA Enabled</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>2FA Enabled</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>
                     {subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Permissions</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
             </div>
             <button
                 type={'button'}
@@ -66,6 +68,6 @@ export default ({ subuser }: Props) => {
             <Can action={'user.delete'}>
                 <RemoveSubuserButton subuser={subuser}/>
             </Can>
-        </div>
+        </GreyRowBox>
     );
 };

resources/scripts/components/server/users/UsersContainer.tsx

@@ -10,6 +10,7 @@ import getServerSubusers from '@/api/server/users/getServerSubusers';
 import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -43,15 +44,15 @@ export default () => {
     }, []);
 
     if (!subusers.length && (loading || !Object.keys(permissions).length)) {
-        return <Spinner size={'large'} centered={true}/>;
+        return <Spinner size={'large'} centered/>;
     }
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'users'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
             {!subusers.length ?
-                <p className={'text-center text-sm text-neutral-400'}>
-                    It looks like you don't have any subusers.
+                <p css={tw`text-center text-sm text-neutral-400`}>
+                    It looks like you don&apos;t have any subusers.
                 </p>
                 :
                 subusers.map(subuser => (
@@ -59,7 +60,7 @@ export default () => {
                 ))
             }
             <Can action={'user.create'}>
-                <div className={'flex justify-end mt-6'}>
+                <div css={tw`flex justify-end mt-6`}>
                     <AddSubuserButton/>
                 </div>
             </Can>