ui(admin): update button components, fix Editor for eggs

resources/scripts/components/admin/locations/LocationDeleteButton.tsx

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import tw from 'twin.macro';
 
 import deleteLocation from '@/api/admin/locations/deleteLocation';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
+import { Shape } from '@/components/elements/button/types';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import type { ApplicationStore } from '@/state';
 
@@ -53,7 +54,7 @@ export default ({ locationId, onDeleted }: Props) => {
                 to it.
             </ConfirmationModal>
 
-            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+            <Button.Danger type="button" shape={Shape.IconSquare} onClick={() => setVisible(true)}>
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -68,7 +69,7 @@ export default ({ locationId, onDeleted }: Props) => {
                         d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                     />
                 </svg>
-            </Button>
+            </Button.Danger>
         </>
     );
 };

resources/scripts/components/admin/locations/LocationEditContainer.tsx

@@ -13,7 +13,7 @@ import updateLocation from '@/api/admin/locations/updateLocation';
 import AdminBox from '@/components/admin/AdminBox';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import LocationDeleteButton from '@/components/admin/locations/LocationDeleteButton';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
 import Field from '@/components/elements/Field';
 import Spinner from '@/components/elements/Spinner';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -99,7 +99,7 @@ const EditInformationContainer = () => {
                                 </div>
 
                                 <div css={tw`flex ml-auto`}>
-                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                    <Button type="submit" disabled={isSubmitting || !isValid}>
                                         Save Changes
                                     </Button>
                                 </div>

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -24,7 +24,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import { AdminContext } from '@/state/admin';
 
-const RowCheckbox = ({ id }: { id: number }) => {
+function RowCheckbox({ id }: { id: number }) {
     const isChecked = AdminContext.useStoreState(state => state.locations.selectedLocations.indexOf(id) >= 0);
     const appendSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.appendSelectedLocation);
     const removeSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.removeSelectedLocation);
@@ -42,9 +42,9 @@ const RowCheckbox = ({ id }: { id: number }) => {
             }}
         />
     );
-};
+}
 
-const LocationsContainer = () => {
+function LocationsContainer() {
     const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(LocationsContext);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { data: locations, error, isValidating } = getLocations();
@@ -173,7 +173,7 @@ const LocationsContainer = () => {
             </AdminTable>
         </AdminContentBlock>
     );
-};
+}
 
 export default () => {
     const hooks = useTableHooks<Filters>();

resources/scripts/components/admin/locations/NewLocationButton.tsx

@@ -6,7 +6,8 @@ import { object, string } from 'yup';
 
 import createLocation from '@/api/admin/locations/createLocation';
 import getLocations from '@/api/admin/locations/getLocations';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
+import { Size, Variant } from '@/components/elements/button/types';
 import Field from '@/components/elements/Field';
 import Modal from '@/components/elements/Modal';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -82,14 +83,14 @@ export default () => {
                             </div>
 
                             <div css={tw`flex flex-wrap justify-end mt-6`}>
-                                <Button
-                                    type={'button'}
-                                    isSecondary
+                                <Button.Text
+                                    type="button"
+                                    variant={Variant.Secondary}
                                     css={tw`w-full sm:w-auto sm:mr-2`}
                                     onClick={() => setVisible(false)}
                                 >
                                     Cancel
-                                </Button>
+                                </Button.Text>
                                 <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
                                     Create Location
                                 </Button>
@@ -100,8 +101,8 @@ export default () => {
             </Formik>
 
             <Button
-                type={'button'}
-                size={'large'}
+                type="button"
+                size={Size.Large}
                 css={tw`h-10 px-4 py-0 whitespace-nowrap`}
                 onClick={() => setVisible(true)}
             >