Update users screens

Author: DaneEveritt

resources/scripts/components/FlashMessageRender.tsx

@@ -14,18 +14,21 @@ const FlashMessageRender = ({ byKey, className }: Props) => {
     ));
 
     return (
-        <div className={className}>
-            {
-                flashes.map((flash, index) => (
-                    <React.Fragment key={flash.id || flash.type + flash.message}>
-                        {index > 0 && <div css={tw`mt-2`}></div>}
-                        <MessageBox type={flash.type} title={flash.title}>
-                            {flash.message}
-                        </MessageBox>
-                    </React.Fragment>
-                ))
-            }
-        </div>
+        flashes.length ?
+            <div className={className}>
+                {
+                    flashes.map((flash, index) => (
+                        <React.Fragment key={flash.id || flash.type + flash.message}>
+                            {index > 0 && <div css={tw`mt-2`}></div>}
+                            <MessageBox type={flash.type} title={flash.title}>
+                                {flash.message}
+                            </MessageBox>
+                        </React.Fragment>
+                    ))
+                }
+            </div>
+            :
+            null
     );
 };
 

resources/scripts/components/elements/Checkbox.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
+import Input from '@/components/elements/Input';
 
 interface Props {
     name: string;
     value: string;
 }
 
-type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
+type OmitFields = 'ref' | 'name' | 'value' | 'type' | 'checked' | 'onClick' | 'onChange';
 
-type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
+type InputProps = Omit<JSX.IntrinsicElements['input'], OmitFields>;
 
 const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
     <Field name={name}>
@@ -20,7 +21,7 @@ const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
             }
 
             return (
-                <input
+                <Input
                     {...field}
                     {...props}
                     type={'checkbox'}

resources/scripts/components/elements/DropdownMenu.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import Fade from '@/components/elements/Fade';
 
 interface Props {
     children: React.ReactNode;
@@ -55,29 +56,25 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
 
         return () => {
             document.removeEventListener('click', windowListener);
-        }
+        };
     }, [ visible ]);
 
     return (
         <div>
             {renderToggle(onClickHandler)}
-            <CSSTransition
-                timeout={250}
-                in={visible}
-                unmountOnExit={true}
-                classNames={'fade'}
-            >
+            <Fade timeout={250} in={visible} unmountOnExit>
                 <div
                     ref={menu}
                     onClick={e => {
                         e.stopPropagation();
                         setVisible(false);
                     }}
-                    className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
+                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
+                    style={{ minWidth: '12rem' }}
                 >
                     {children}
                 </div>
-            </CSSTransition>
+            </Fade>
         </div>
     );
 };

resources/scripts/components/elements/Input.tsx

@@ -16,6 +16,25 @@ const light = css<Props>`
     }
 `;
 
+const checkboxStyle = css<Props>`
+    ${tw`cursor-pointer appearance-none inline-block align-middle select-none flex-shrink-0 w-4 h-4 text-primary-400 border border-neutral-300 rounded-sm`};
+    color-adjust: exact;
+    background-origin: border-box;
+    transition: all 75ms linear, box-shadow 25ms linear;
+
+    &:checked {
+        ${tw`border-transparent bg-no-repeat bg-center`};
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+        background-color: currentColor;
+        background-size: 100% 100%;
+    }
+
+    &:focus {
+        ${tw`outline-none border-primary-300`};
+        box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
+    }
+`;
+
 const inputStyle = css<Props>`
     // Reset to normal styling.
     ${tw`appearance-none w-full min-w-0`};
@@ -43,7 +62,19 @@ const inputStyle = css<Props>`
     ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
 `;
 
-const Input = styled.input<Props>`${inputStyle}`;
+const Input = styled.input<Props>`
+    &:not([type="checkbox"]):not([type="radio"]) {
+        ${inputStyle};
+    }
+    
+    &[type="checkbox"], &[type="radio"] {
+        ${checkboxStyle};
+        
+        &[type="radio"] {
+            ${tw`rounded-full`};
+        }
+    }
+`;
 const Textarea = styled.textarea<Props>`${inputStyle}`;
 
 export { Textarea };

resources/scripts/components/elements/Modal.tsx

@@ -27,6 +27,7 @@ const ModalMask = styled.div`
 
 const ModalContainer = styled.div<{ alignTop?: boolean }>`
     ${tw`relative flex flex-col w-full m-auto`};
+    max-height: calc(100vh - 8rem);
     max-width: 50%;
     // @todo max-w-screen-lg perhaps?
     ${props => props.alignTop && 'margin-top: 10%'};

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,22 +32,22 @@ 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>
                 :
                 <div>
                     {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,45 +36,45 @@ 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>
                         :
                         <BackupContextMenu backup={backup}/>
                     }
                 </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>
 );