diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 17d83f78..55993271 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -155,7 +155,6 @@ export default ({ server, className }: { server: Server; className?: string }) =
</div>
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
</div>
-
<div css={tw`flex-1 flex justify-end sm:hidden`}>
<div css={tw`flex items-end text-right`}>
<div
diff --git a/resources/scripts/components/elements/ConfirmationModal.tsx b/resources/scripts/components/elements/ConfirmationModal.tsx
index d67c74d1..1b5b3ce1 100644
--- a/resources/scripts/components/elements/ConfirmationModal.tsx
+++ b/resources/scripts/components/elements/ConfirmationModal.tsx
@@ -19,11 +19,11 @@ const ConfirmationModal = ({ title, children, buttonText, onConfirmed }: Props)
<>
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
<p css={tw`text-sm`}>{children}</p>
- <div css={tw`flex items-center justify-end mt-8`}>
- <Button isSecondary onClick={() => dismiss()}>
+ <div css={tw`flex flex-wrap items-center justify-end mt-8`}>
+ <Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto`}>
Cancel
</Button>
- <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
+ <Button color={'red'} css={tw`w-full sm:w-auto mt-4 sm:mt-0 sm:ml-4`} onClick={() => onConfirmed()}>
{buttonText}
</Button>
</div>
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 953a631a..342d6ab5 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -1,9 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
@@ -26,25 +24,27 @@ export const ModalMask = styled.div`
background: rgba(0, 0, 0, 0.70);
`;
-const ModalContainer = styled.div<{ alignTop?: boolean }>`
- ${breakpoint('xs')`
- max-width: 95%;
- `};
-
- ${breakpoint('md')`
- max-width: 50%;
- `};
+const ModalContainer = styled.div<{ alignTop?: boolean }>`
+ max-width: 95%;
+ max-height: calc(100vh - 8rem);
+ ${breakpoint('md')`max-width: 75%`};
+ ${breakpoint('lg')`max-width: 50%`};
${tw`relative flex flex-col w-full m-auto`};
- max-height: calc(100vh - 8rem);
- // @todo max-w-screen-lg perhaps?
- ${props => props.alignTop && 'margin-top: 10%'};
+ ${props => props.alignTop && css`
+ margin-top: 20%;
+ ${breakpoint('md')`margin-top: 10%`};
+ `};
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
- top: -2rem;
+ top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
+
+ & > svg {
+ ${tw`w-6 h-6`};
+ }
}
`;
@@ -80,6 +80,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
>
<ModalMask
onClick={e => e.stopPropagation()}
+ onContextMenu={e => e.stopPropagation()}
onMouseDown={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
@@ -92,7 +93,14 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
<ModalContainer alignTop={top}>
{isDismissable &&
<div className={'close-icon'} onClick={() => setRender(false)}>
- <FontAwesomeIcon icon={faTimes}/>
+ <svg xmlns={'http://www.w3.org/2000/svg'} fill={'none'} viewBox={'0 0 24 24'} stroke={'currentColor'}>
+ <path
+ strokeLinecap={'round'}
+ strokeLinejoin={'round'}
+ strokeWidth={'2'}
+ d={'M6 18L18 6M6 6l12 12'}
+ />
+ </svg>
</div>
}
{showSpinnerOverlay &&
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index 4b3d73a8..ef68d5c7 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -120,7 +120,7 @@ export default () => {
/>
</div>
<div css={tw`flex justify-end mt-4`}>
- <div css={tw`rounded bg-neutral-900 mr-4`}>
+ <div css={tw`flex-1 sm:flex-none rounded bg-neutral-900 mr-4`}>
<Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
{Object.keys(modes).map(key => (
<option key={key} value={key}>{modes[key]}</option>
@@ -129,13 +129,13 @@ export default () => {
</div>
{action === 'edit' ?
<Can action={'file.update'}>
- <Button onClick={() => save()}>
+ <Button css={tw`flex-1 sm:flex-none`} onClick={() => save()}>
Save Content
</Button>
</Can>
:
<Can action={'file.create'}>
- <Button onClick={() => setModalVisible(true)}>
+ <Button css={tw`flex-1 sm:flex-none`} onClick={() => setModalVisible(true)}>
Create File
</Button>
</Can>
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 444dc2fa..4c46edc1 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -6,7 +6,7 @@ import FileObjectRow from '@/components/server/files/FileObjectRow';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import { FileObject } from '@/api/server/files/loadDirectory';
import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
-import { Link, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
import Can from '@/components/elements/Can';
import ServerError from '@/components/screens/ServerError';
import tw from 'twin.macro';
@@ -81,16 +81,17 @@ export default () => {
</CSSTransition>
}
<Can action={'file.create'}>
- <div css={tw`flex justify-end mt-8`}>
- <NewDirectoryButton/>
- <UploadButton/>
- <Button
- // @ts-ignore
- as={Link}
+ <div css={tw`flex flex-wrap-reverse justify-end mt-4`}>
+ <NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
+ <UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
+ <NavLink
to={`/server/${id}/files/new${window.location.hash}`}
+ css={tw`flex-1 sm:flex-none sm:mt-0`}
>
- New File
- </Button>
+ <Button css={tw`w-full`}>
+ New File
+ </Button>
+ </NavLink>
</div>
</Can>
</>
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 8cb82dd9..14e3d2e5 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -11,6 +11,7 @@ import Button from '@/components/elements/Button';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFlash from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import { WithClassname } from '@/components/types';
interface Values {
directoryName: string;
@@ -34,7 +35,7 @@ const generateDirectoryData = (name: string): FileObject => ({
isEditable: () => false,
});
-export default () => {
+export default ({ className }: WithClassname) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearAndAddHttpError } = useFlash();
const [ visible, setVisible ] = useState(false);
@@ -95,7 +96,7 @@ export default () => {
</Modal>
)}
</Formik>
- <Button isSecondary css={tw`mr-2`} onClick={() => setVisible(true)}>
+ <Button isSecondary onClick={() => setVisible(true)} className={className}>
Create Directory
</Button>
</>
diff --git a/resources/scripts/components/server/files/RenameFileModal.tsx b/resources/scripts/components/server/files/RenameFileModal.tsx
index b8108794..2e6f59f1 100644
--- a/resources/scripts/components/server/files/RenameFileModal.tsx
+++ b/resources/scripts/components/server/files/RenameFileModal.tsx
@@ -62,11 +62,11 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
<Form css={tw`m-0`}>
<div
css={[
- tw`flex`,
+ tw`flex flex-wrap`,
useMoveTerminology ? tw`items-center` : tw`items-end`,
]}
>
- <div css={tw`flex-1 mr-6`}>
+ <div css={tw`w-full sm:flex-1 sm:mr-4`}>
<Field
type={'string'}
id={'file_name'}
@@ -79,8 +79,8 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
autoFocus
/>
</div>
- <div>
- <Button>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
+ <div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
+ <Button css={tw`w-full`}>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
</div>
</div>
{useMoveTerminology &&
diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx
index f5889111..a2e218bb 100644
--- a/resources/scripts/components/server/files/UploadButton.tsx
+++ b/resources/scripts/components/server/files/UploadButton.tsx
@@ -11,13 +11,14 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server';
+import { WithClassname } from '@/components/types';
const InnerContainer = styled.div`
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
`;
-export default () => {
+export default ({ className }: WithClassname) => {
const fileUploadInput = useRef<HTMLInputElement>(null);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [ visible, setVisible ] = useState(false);
@@ -114,7 +115,7 @@ export default () => {
}}
/>
<Button
- css={tw`mr-2`}
+ className={className}
onClick={() => {
fileUploadInput.current
? fileUploadInput.current.click()
diff --git a/resources/scripts/components/types.ts b/resources/scripts/components/types.ts
new file mode 100644
index 00000000..73da750b
--- /dev/null
+++ b/resources/scripts/components/types.ts
@@ -0,0 +1,3 @@
+export interface WithClassname {
+ className?: string;
+}