From d27bda1c746fbd3130a2c1a57e1388e40899f055 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 4 Jul 2020 15:58:14 -0700 Subject: [PATCH] Get settings page in working order --- .../scripts/components/elements/Button.tsx | 41 +++++++++-------- .../components/server/WebsocketHandler.tsx | 7 +-- .../server/settings/ReinstallServerBox.tsx | 34 +++++++++----- .../server/settings/RenameServerBox.tsx | 12 +++-- .../server/settings/SettingsContainer.tsx | 46 ++++++++++--------- 5 files changed, 80 insertions(+), 60 deletions(-) diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx index 276ad1b6b..b9ac57c4e 100644 --- a/resources/scripts/components/elements/Button.tsx +++ b/resources/scripts/components/elements/Button.tsx @@ -10,20 +10,10 @@ interface Props { isSecondary?: boolean; } -const StyledButton = styled.button>` - ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`}; +const ButtonStyle = styled.button>` + ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`}; - ${props => props.isSecondary && css` - ${tw`border border-neutral-600 bg-transparent text-neutral-200`}; - - &:hover:not(:disabled) { - ${tw`border-neutral-500 text-neutral-100`}; - ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`}; - ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`}; - } - `}; - - ${props => (!props.color || props.color === 'primary') && css` + ${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css` ${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`}; &:hover:not(:disabled) { @@ -32,7 +22,7 @@ const StyledButton = styled.button>` `}; ${props => props.color === 'grey' && css` - ${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`}; + ${tw`border-neutral-600 bg-neutral-500 text-neutral-50`}; &:hover:not(:disabled) { ${tw`bg-neutral-600 border-neutral-700`}; @@ -40,7 +30,7 @@ const StyledButton = styled.button>` `}; ${props => props.color === 'green' && css` - ${tw`border border-green-600 bg-green-500 text-green-50`}; + ${tw`border-green-600 bg-green-500 text-green-50`}; &:hover:not(:disabled) { ${tw`bg-green-600 border-green-700`}; @@ -54,7 +44,7 @@ const StyledButton = styled.button>` `}; ${props => props.color === 'red' && css` - ${tw`border border-red-600 bg-red-500 text-red-50`}; + ${tw`border-red-600 bg-red-500 text-red-50`}; &:hover:not(:disabled) { ${tw`bg-red-600 border-red-700`}; @@ -72,13 +62,23 @@ const StyledButton = styled.button>` ${props => props.size === 'large' && tw`p-4 text-sm`}; ${props => props.size === 'xlarge' && tw`p-4 w-full`}; + ${props => props.isSecondary && css` + ${tw`border-neutral-600 bg-transparent text-neutral-200`}; + + &:hover:not(:disabled) { + ${tw`border-neutral-500 text-neutral-100`}; + ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`}; + ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`}; + } + `}; + &:disabled { opacity: 0.55; cursor: default } `; type ComponentProps = Omit & Props; const Button: React.FC = ({ children, isLoading, ...props }) => ( - + {isLoading &&
@@ -87,7 +87,12 @@ const Button: React.FC = ({ children, isLoading, ...props }) => {children} - + ); +type LinkProps = Omit & Props; + +const LinkButton: React.FC = props => ; + +export { LinkButton, ButtonStyle }; export default Button; diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx index ae6d8c165..174626f4d 100644 --- a/resources/scripts/components/server/WebsocketHandler.tsx +++ b/resources/scripts/components/server/WebsocketHandler.tsx @@ -5,6 +5,7 @@ import getWebsocketToken from '@/api/server/getWebsocketToken'; import ContentContainer from '@/components/elements/ContentContainer'; import { CSSTransition } from 'react-transition-group'; import Spinner from '@/components/elements/Spinner'; +import tw from 'twin.macro'; export default () => { const server = ServerContext.useStoreState(state => state.server.data); @@ -67,10 +68,10 @@ export default () => { return ( error ? -
- +
+ -

+

We're having some trouble connecting to your server, please wait...

diff --git a/resources/scripts/components/server/settings/ReinstallServerBox.tsx b/resources/scripts/components/server/settings/ReinstallServerBox.tsx index f958f04ec..eef96c16c 100644 --- a/resources/scripts/components/server/settings/ReinstallServerBox.tsx +++ b/resources/scripts/components/server/settings/ReinstallServerBox.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { ServerContext } from '@/state/server'; -import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import ConfirmationModal from '@/components/elements/ConfirmationModal'; import reinstallServer from '@/api/server/reinstallServer'; import { Actions, useStoreActions } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import { httpErrorToHuman } from '@/api/http'; +import tw from 'twin.macro'; +import Button from '@/components/elements/Button'; export default () => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); @@ -19,7 +20,11 @@ export default () => { setIsSubmitting(true); reinstallServer(uuid) .then(() => { - addFlash({ key: 'settings', type: 'success', message: 'Your server has begun the reinstallation process.' }); + addFlash({ + key: 'settings', + type: 'success', + message: 'Your server has begun the reinstallation process.', + }); }) .catch(error => { console.error(error); @@ -30,10 +35,10 @@ export default () => { setIsSubmitting(false); setModalVisible(false); }); - } + }; return ( - + { visible={modalVisible} onDismissed={() => setModalVisible(false)} > - Your server will be stopped and some files may be deleted or modified during this process, are you sure you wish to continue? + Your server will be stopped and some files may be deleted or modified during this process, are you sure + you wish to continue? -

+

Reinstalling your server will stop it, and then re-run the installation script that initially - set it up. Some files may be deleted or modified during this process, - please back up your data before continuing. + set it up.  + + Some files may be deleted or modified during this process, please back up your data before + continuing. +

-
- +
); diff --git a/resources/scripts/components/server/settings/RenameServerBox.tsx b/resources/scripts/components/server/settings/RenameServerBox.tsx index 2904362e3..7e6832c6f 100644 --- a/resources/scripts/components/server/settings/RenameServerBox.tsx +++ b/resources/scripts/components/server/settings/RenameServerBox.tsx @@ -9,6 +9,8 @@ import { object, string } from 'yup'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import { ApplicationStore } from '@/state'; import { httpErrorToHuman } from '@/api/http'; +import Button from '@/components/elements/Button'; +import tw from 'twin.macro'; interface Values { name: string; @@ -18,19 +20,19 @@ const RenameServerBox = () => { const { isSubmitting } = useFormikContext(); return ( - + -
+ -
- +
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx index 98d399e8f..5697ca824 100644 --- a/resources/scripts/components/server/settings/SettingsContainer.tsx +++ b/resources/scripts/components/server/settings/SettingsContainer.tsx @@ -9,6 +9,10 @@ import FlashMessageRender from '@/components/FlashMessageRender'; import Can from '@/components/elements/Can'; import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox'; import PageContentBlock from '@/components/elements/PageContentBlock'; +import tw from 'twin.macro'; +import Input from '@/components/elements/Input'; +import Label from '@/components/elements/Label'; +import Button, { LinkButton } from '@/components/elements/Button'; export default () => { const user = useStoreState(state => state.user.data!); @@ -16,52 +20,50 @@ export default () => { return ( - -
+ +
-
+
- - Server Address +
-
- - + +
-
-
-
-

+

+
+
+

Your SFTP password is the same as the password you use to access this panel.

-
-
+
-
+