Update more of the UI to use new design elements

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

@@ -6,21 +6,21 @@ 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';
+import { Button } from '@/components/elements/button/index';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import { Allocation } from '@/api/server/getServer';
 import styled from 'styled-components/macro';
 import { debounce } from 'debounce';
 import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
 import { formatIp } from '@/helpers';
+import Code from '@/components/elements/Code';
 
-const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 interface Props {
@@ -29,7 +29,7 @@ interface Props {
 
 const AllocationRow = ({ allocation }: Props) => {
     const [ loading, setLoading ] = useState(false);
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = getServerAllocations();
 
@@ -39,69 +39,64 @@ const AllocationRow = ({ allocation }: Props) => {
 
     const setAllocationNotes = debounce((notes: string) => {
         setLoading(true);
-        clearFlashes('server:network');
+        clearFlashes();
 
         setServerAllocationNotes(uuid, allocation.id, notes)
             .then(() => onNotesChanged(allocation.id, notes))
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }))
+            .catch(error => clearAndAddHttpError(error))
             .then(() => setLoading(false));
     }, 750);
 
     const setPrimaryAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
         mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
 
         setPrimaryServerAllocation(uuid, allocation.id)
             .catch(error => {
-                clearAndAddHttpError({ key: 'server:network', error });
+                clearAndAddHttpError(error);
                 mutate();
             });
     };
 
     return (
-        <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}>
-            <div css={tw`flex items-center w-full md:w-auto`}>
-                <div css={tw`pl-4 pr-6 text-neutral-400`}>
+        <GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
+            <div className={'flex items-center w-full md:w-auto'}>
+                <div className={'pl-4 pr-6 text-neutral-400'}>
                     <FontAwesomeIcon icon={faNetworkWired}/>
                 </div>
-                <div css={tw`mr-4 flex-1 md:w-40`}>
+                <div className={'mr-4 flex-1 md:w-40'}>
                     {allocation.alias ?
-                        <CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
-                        <CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>}
+                        <CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
+                        <CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
                     <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
-                <div css={tw`w-16 md:w-24 overflow-hidden`}>
-                    <Code>{allocation.port}</Code>
+                <div className={'w-16 md:w-24 overflow-hidden'}>
+                    <Code dark>{allocation.port}</Code>
                     <Label>Port</Label>
                 </div>
             </div>
-            <div css={tw`mt-4 w-full md:mt-0 md:flex-1 md:w-auto`}>
+            <div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
                 <InputSpinner visible={loading}>
                     <Textarea
-                        css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
+                        className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
                         placeholder={'Notes'}
                         defaultValue={allocation.notes || undefined}
                         onChange={e => setAllocationNotes(e.currentTarget.value)}
                     />
                 </InputSpinner>
             </div>
-            <div css={tw`w-full md:flex-none md:w-40 md:text-center mt-4 md:mt-0 ml-4 flex items-center justify-end`}>
+            <div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
                 {allocation.isDefault ?
-                    <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
+                    <Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>Primary</Button>
                     :
                     <>
                         <Can action={'allocation.delete'}>
                             <DeleteAllocationButton allocation={allocation.id}/>
                         </Can>
                         <Can action={'allocation.update'}>
-                            <Button
-                                isSecondary
-                                size={'xsmall'}
-                                color={'primary'}
-                                onClick={setPrimaryAllocation}
-                            >
+                            <Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
                                 Make Primary
-                            </Button>
+                            </Button.Text>
                         </Can>
                     </>
                 }

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

@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
 import Icon from '@/components/elements/Icon';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import { ServerContext } from '@/state/server';
 import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
+import { Dialog } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button/index';
 
 interface Props {
     allocation: number;
@@ -19,36 +20,41 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
     const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
     const { mutate } = getServerAllocations();
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
 
     const deleteAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
 
         mutate(data => data?.filter(a => a.id !== allocation), false);
         setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
 
         deleteServerAllocation(uuid, allocation)
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }));
+            .catch(error => {
+                clearAndAddHttpError(error);
+                mutate();
+            });
     };
 
     return (
         <>
-            <ConfirmationModal
-                visible={confirm}
-                title={'Remove this allocation?'}
-                buttonText={'Delete'}
+            <Dialog.Confirm
+                open={confirm}
+                onClose={() => setConfirm(false)}
+                title={'Remove Allocation'}
+                confirm={'Delete'}
                 onConfirmed={deleteAllocation}
-                onModalDismissed={() => setConfirm(false)}
             >
-                This allocation will be immediately removed from your server. Are you sure you want to continue?
-            </ConfirmationModal>
-            <button
-                css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`}
+                This allocation will be immediately removed from your server.
+            </Dialog.Confirm>
+            <Button.Danger
+                variant={Button.Variants.Secondary}
+                size={Button.Sizes.Small}
+                shape={Button.Shapes.IconSquare}
                 type={'button'}
                 onClick={() => setConfirm(true)}
             >
                 <Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
-            </button>
+            </Button.Danger>
         </>
     );
 };

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Spinner from '@/components/elements/Spinner';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import { ServerContext } from '@/state/server';
 import AllocationRow from '@/components/server/network/AllocationRow';
@@ -20,7 +20,7 @@ const NetworkContainer = () => {
     const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
     const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
     const { data, error, mutate } = getServerAllocations();
 
     useEffect(() => {
@@ -28,9 +28,7 @@ const NetworkContainer = () => {
     }, []);
 
     useEffect(() => {
-        if (error) {
-            clearAndAddHttpError({ key: 'server:network', error });
-        }
+        clearAndAddHttpError(error);
     }, [ error ]);
 
     useDeepCompareEffect(() => {
@@ -40,7 +38,7 @@ const NetworkContainer = () => {
     }, [ data ]);
 
     const onCreateAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
 
         setLoading(true);
         createServerAllocation(uuid)
@@ -48,7 +46,7 @@ const NetworkContainer = () => {
                 setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
                 return mutate(data?.concat(allocation), false);
             })
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }))
+            .catch(error => clearAndAddHttpError(error))
             .then(() => setLoading(false));
     };