styles: update node buttons

resources/scripts/components/admin/nodes/NewNodeContainer.tsx

@@ -12,7 +12,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
 import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
 import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import type { ApplicationStore } from '@/state';
 
@@ -95,7 +95,7 @@ export default () => {
                 })}
             >
                 {({ isSubmitting, isValid }) => (
-                    <Form>
+                    <Form className="mt-4">
                         <div css={tw`flex flex-col lg:flex-row`}>
                             <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
                                 <NodeSettingsContainer />

resources/scripts/components/admin/nodes/NodeDeleteButton.tsx

@@ -4,9 +4,10 @@ import { useState } from 'react';
 import tw from 'twin.macro';
 
 import deleteNode from '@/api/admin/nodes/deleteNode';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import type { ApplicationStore } from '@/state';
+import { Size, Variant, Shape } from '@/components/elements/button/types';
 
 interface Props {
     nodeId: number;
@@ -52,7 +53,13 @@ export default ({ nodeId, onDeleted }: Props) => {
                 Are you sure you want to delete this node?
             </ConfirmationModal>
 
-            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+            <Button
+                type={'button'}
+                shape={Shape.IconSquare}
+                size={Size.Small}
+                variant={Variant.Danger}
+                onClick={() => setVisible(true)}
+            >
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"

resources/scripts/components/admin/nodes/NodeEditContainer.tsx

@@ -12,7 +12,7 @@ import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
 import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
 import { Context } from '@/components/admin/nodes/NodeRouter';
 import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
 import type { ApplicationStore } from '@/state';
 
 interface Values {
@@ -118,7 +118,7 @@ export default () => {
                             </div>
 
                             <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 px-6`}>
-                                <div css={tw`flex flex-row`}>
+                                <div css={tw`flex flex-row items-center`}>
                                     <NodeDeleteButton nodeId={node?.id} onDeleted={() => navigate('/admin/nodes')} />
                                     <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
                                         Save Changes

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

@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
 import { useGetUsers } from '@/api/admin/users';
 import type { UUID } from '@/api/definitions';
 import { Transition } from '@/components/elements/transitions';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import Checkbox from '@/components/elements/inputs/Checkbox';
 import InputField from '@/components/elements/inputs/InputField';
 import UserTableRow from '@/components/admin/users/UserTableRow';

resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import SetupTOTPDialog from '@/components/dashboard/forms/SetupTOTPDialog';
 import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
 import DisableTOTPDialog from '@/components/dashboard/forms/DisableTOTPDialog';

resources/scripts/components/dashboard/forms/DisableTOTPDialog.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react';
 import * as React from 'react';
 import asDialog from '@/hoc/asDialog';
 import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { Input } from '@/components/elements/inputs';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';

resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogProps } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { Alert } from '@/components/elements/alert';
 

resources/scripts/components/dashboard/forms/SetupTOTPDialog.tsx

@@ -5,7 +5,7 @@ import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoF
 import { useFlashKey } from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import QRCode from 'qrcode.react';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import Spinner from '@/components/elements/Spinner';
 import { Input } from '@/components/elements/inputs';
 import CopyOnClick from '@/components/elements/CopyOnClick';

resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

@@ -7,7 +7,7 @@ import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
 import { ApplicationStore } from '@/state';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 interface Values {
     email: string;

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -8,7 +8,7 @@ import updateAccountPassword from '@/api/account/updateAccountPassword';
 import { httpErrorToHuman } from '@/api/http';
 import { ApplicationStore } from '@/state';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 interface Values {
     current: string;

resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ClipboardListIcon } from '@heroicons/react/outline';
 import { Dialog } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 export default ({ meta }: { meta: Record<string, unknown> }) => {
     const [open, setOpen] = useState(false);

resources/scripts/components/elements/dialog/ConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog, RenderDialogProps } from './';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 type ConfirmationProps = Omit<RenderDialogProps, 'description' | 'children'> & {
     children: React.ReactNode;

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import * as React from 'react';
 import { Dialog as HDialog } from '@headlessui/react';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { XIcon } from '@heroicons/react/solid';
 import { AnimatePresence, motion } from 'framer-motion';
 import { DialogContext, IconPosition, RenderDialogProps, styles } from './';

resources/scripts/components/elements/table/PaginationFooter.tsx

@@ -1,6 +1,6 @@
 import { PaginationDataSet } from '@/api/http';
 import classNames from 'classnames';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/solid';
 
 interface Props {

resources/scripts/components/server/console/PowerButtons.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import * as React from 'react';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import Can from '@/components/elements/Can';
 import { ServerContext } from '@/state/server';
 import { PowerAction } from '@/components/server/console/ServerConsoleContainer';

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -11,7 +11,7 @@ import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { NavLink, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import { ServerError } from '@/components/elements/ScreenBlock';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 // import FileManagerStatus from '@/components/server/files/FileManagerStatus';

resources/scripts/components/server/files/FileManagerStatus.tsx

@@ -2,7 +2,7 @@ import { CloudUploadIcon, XIcon } from '@heroicons/react/solid';
 import { useSignal } from '@preact/signals-react';
 import { useContext, useEffect } from 'react';
 
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import Code from '@/components/elements/Code';

resources/scripts/components/server/files/NewDirectoryButton.tsx

@@ -6,7 +6,7 @@ import { join } from 'pathe';
 import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import { useFlashKey } from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';

resources/scripts/components/server/files/UploadButton.tsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react';
 import tw from 'twin.macro';
 
 import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { ModalMask } from '@/components/elements/Modal';
 import Portal from '@/components/elements/Portal';
 import FadeTransition from '@/components/elements/transitions/FadeTransition';

resources/scripts/components/server/network/AllocationRow.tsx

@@ -6,7 +6,7 @@ import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import InputSpinner from '@/components/elements/InputSpinner';
 import { Textarea } from '@/components/elements/Input';
 import Can from '@/components/elements/Can';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import { Allocation } from '@/api/server/getServer';
 import styled from 'styled-components';

resources/scripts/components/server/network/DeleteAllocationButton.tsx

@@ -7,7 +7,7 @@ import deleteServerAllocation from '@/api/server/network/deleteServerAllocation'
 import getServerAllocations from '@/api/swr/getServerAllocations';
 import { useFlashKey } from '@/plugins/useFlash';
 import { Dialog } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 interface Props {
     allocation: number;

resources/scripts/components/server/schedules/DeleteScheduleButton.tsx

@@ -4,7 +4,7 @@ import { ServerContext } from '@/state/server';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import { Dialog } from '@/components/elements/dialog';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 

resources/scripts/components/server/schedules/EditScheduleModal.tsx

@@ -9,7 +9,7 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import ModalContext from '@/context/ModalContext';
 import asModal from '@/hoc/asModal';
 import Switch from '@/components/elements/Switch';

resources/scripts/components/server/schedules/NewTaskButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 interface Props {
     schedule: Schedule;

resources/scripts/components/server/schedules/RunScheduleButton.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
 import { ServerContext } from '@/state/server';
 import useFlash from '@/plugins/useFlash';

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -10,7 +10,7 @@ import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import { Link } from 'react-router-dom';
 

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -11,7 +11,7 @@ import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
 import isEqual from 'react-fast-compare';
 import { format } from 'date-fns';

resources/scripts/components/server/schedules/TaskDetailsModal.tsx

@@ -12,7 +12,7 @@ import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import tw from 'twin.macro';
 import Label from '@/components/elements/Label';
 import { Textarea } from '@/components/elements/Input';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 import Select from '@/components/elements/Select';
 import ModalContext from '@/context/ModalContext';
 import asModal from '@/hoc/asModal';

resources/scripts/components/server/settings/ReinstallServerBox.tsx

@@ -6,7 +6,7 @@ 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/index';
+import { Button } from '@/components/elements/button';
 import { Dialog } from '@/components/elements/dialog';
 
 export default () => {

resources/scripts/components/server/settings/RenameServerBox.tsx

@@ -8,7 +8,7 @@ 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/index';
+import { Button } from '@/components/elements/button';
 import tw from 'twin.macro';
 import Label from '@/components/elements/Label';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -12,7 +12,7 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import isEqual from 'react-fast-compare';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { ip } from '@/lib/formatters';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 export default () => {
     const username = useStoreState(state => state.user.data!.username);

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import { Button } from '@/components/elements/button/index';
+import { Button } from '@/components/elements/button';
 
 export default () => {
     const [visible, setVisible] = useState(false);