From f1978683ccb9e2fa652706bc91ca2f934b45318b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 13 Sep 2020 10:49:57 -0700
Subject: [PATCH] More mobile cleanup

---
 resources/scripts/components/elements/Label.tsx    |  2 +-
 resources/scripts/components/elements/Modal.tsx    |  2 +-
 .../components/elements/PageContentBlock.tsx       |  2 +-
 .../server/databases/CreateDatabaseButton.tsx      |  6 +++---
 .../components/server/network/NetworkContainer.tsx |  8 ++++++--
 .../server/schedules/EditScheduleModal.tsx         | 14 +++++++-------
 .../components/server/users/EditSubuserModal.tsx   |  6 +++---
 7 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/resources/scripts/components/elements/Label.tsx b/resources/scripts/components/elements/Label.tsx
index cfe16550b..a8dc1d670 100644
--- a/resources/scripts/components/elements/Label.tsx
+++ b/resources/scripts/components/elements/Label.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
 const Label = styled.label<{ isLight?: boolean }>`
-    ${tw`block text-xs uppercase text-neutral-200 mb-2`};
+    ${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};
     ${props => props.isLight && tw`text-neutral-700`};
 `;
 
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 342d6ab54..10401e9ca 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -113,7 +113,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
                         </div>
                     </Fade>
                     }
-                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
+                    <div css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
                         {children}
                     </div>
                 </ModalContainer>
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index bcbead377..ef0727e8b 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -20,7 +20,7 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
                     <title>{title}</title>
                 </Helmet>
                 }
-                <ContentContainer css={tw`my-10`} className={className}>
+                <ContentContainer css={tw`my-4 sm:my-10`} className={className}>
                     {showFlashKey &&
                     <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
                     }
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index 0fff36d25..03eaf63c9 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -85,16 +85,16 @@ export default () => {
                                         description={'Where connections should be allowed from. Use % for wildcards.'}
                                     />
                                 </div>
-                                <div css={tw`mt-6 text-right`}>
+                                <div css={tw`flex flex-wrap justify-end mt-6`}>
                                     <Button
                                         type={'button'}
                                         isSecondary
-                                        css={tw`mr-2`}
+                                        css={tw`w-full sm:w-auto sm:mr-2`}
                                         onClick={() => setVisible(false)}
                                     >
                                         Cancel
                                     </Button>
-                                    <Button type={'submit'}>
+                                    <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
                                         Create Database
                                     </Button>
                                 </div>
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index 52b8f143f..0bec04274 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -68,7 +68,11 @@ const NetworkContainer = () => {
                 <Spinner size={'large'} centered/>
                 :
                 data.map(({ id, ip, port, alias, notes, isDefault }, index) => (
-                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`} $hoverable={false}>
+                    <GreyRowBox
+                        $hoverable={false}
+                        key={`${ip}:${port}`}
+                        css={index > 0 ? tw`mt-2 overflow-x-auto` : tw`overflow-x-auto`}
+                    >
                         <div css={tw`hidden md:block pl-4 pr-6 text-neutral-400`}>
                             <FontAwesomeIcon icon={faNetworkWired}/>
                         </div>
@@ -90,7 +94,7 @@ const NetworkContainer = () => {
                                 />
                             </InputSpinner>
                         </div>
-                        <div css={tw`w-32 text-right mr-2 md:mr-0`}>
+                        <div css={tw`w-32 text-right pr-4 sm:pr-0`}>
                             {isDefault ?
                                 <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
                                     Primary
diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
index 423ae9919..73f74f2cf 100644
--- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx
+++ b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
@@ -30,7 +30,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <h3 css={tw`mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
+            <h3 css={tw`text-2xl mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
             <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
             <Form>
                 <Field
@@ -38,17 +38,17 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
                     label={'Schedule name'}
                     description={'A human readable identifer for this schedule.'}
                 />
-                <div css={tw`flex mt-6`}>
-                    <div css={tw`flex-1 mr-4`}>
+                <div css={tw`grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6`}>
+                    <div>
                         <Field name={'minute'} label={'Minute'}/>
                     </div>
-                    <div css={tw`flex-1 mr-4`}>
+                    <div>
                         <Field name={'hour'} label={'Hour'}/>
                     </div>
-                    <div css={tw`flex-1 mr-4`}>
+                    <div>
                         <Field name={'dayOfMonth'} label={'Day of month'}/>
                     </div>
-                    <div css={tw`flex-1`}>
+                    <div>
                         <Field name={'dayOfWeek'} label={'Day of week'}/>
                     </div>
                 </div>
@@ -64,7 +64,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
                     />
                 </div>
                 <div css={tw`mt-6 text-right`}>
-                    <Button type={'submit'} disabled={isSubmitting}>
+                    <Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
                         {schedule ? 'Save changes' : 'Create schedule'}
                     </Button>
                 </div>
diff --git a/resources/scripts/components/server/users/EditSubuserModal.tsx b/resources/scripts/components/server/users/EditSubuserModal.tsx
index f3e0f81c7..9396d579e 100644
--- a/resources/scripts/components/server/users/EditSubuserModal.tsx
+++ b/resources/scripts/components/server/users/EditSubuserModal.tsx
@@ -31,7 +31,7 @@ interface Values {
 }
 
 const PermissionLabel = styled.label`
-  ${tw`flex items-center border border-transparent rounded p-2`};
+  ${tw`flex items-center border border-transparent rounded md:p-2`};
   text-transform: none;
 
   &:not(.disabled) {
@@ -146,7 +146,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                 htmlFor={`permission_${key}_${pkey}`}
                                 css={[
                                     tw`transition-colors duration-75`,
-                                    index > 0 ? tw`mt-2` : undefined,
+                                    index > 0 ? tw`mt-4 sm:mt-2` : undefined,
                                 ]}
                                 className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
                             >
@@ -174,7 +174,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
             </div>
             <Can action={subuser ? 'user.update' : 'user.create'}>
                 <div css={tw`pb-6 flex justify-end`}>
-                    <Button type={'submit'}>
+                    <Button type={'submit'} css={tw`w-full sm:w-auto`}>
                         {subuser ? 'Save' : 'Invite User'}
                     </Button>
                 </div>