From c24cd349251b8b682bdcf0322e3cd8325910b0f5 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Mon, 20 Jan 2025 08:14:42 +0000
Subject: [PATCH] feat: switch to new dialog gutter

---
 app/components/Dialog.tsx              | 2 +-
 app/routes/dns/components/magic.tsx    | 4 ++--
 app/routes/dns/components/rename.tsx   | 4 ++--
 app/routes/dns/dialogs/dns.tsx         | 4 ++--
 app/routes/dns/dialogs/nameserver.tsx  | 4 ++--
 app/routes/machines/dialogs/delete.tsx | 4 ++--
 app/routes/machines/dialogs/expire.tsx | 4 ++--
 app/routes/machines/dialogs/move.tsx   | 4 ++--
 app/routes/machines/dialogs/new.tsx    | 4 ++--
 app/routes/machines/dialogs/rename.tsx | 4 ++--
 app/routes/machines/dialogs/routes.tsx | 4 ++--
 app/routes/machines/dialogs/tags.tsx   | 4 ++--
 app/routes/settings/dialogs/expire.tsx | 4 ++--
 app/routes/settings/dialogs/new.tsx    | 4 ++--
 app/routes/users/dialogs/add.tsx       | 4 ++--
 15 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/app/components/Dialog.tsx b/app/components/Dialog.tsx
index 00ec251..3566dd9 100644
--- a/app/components/Dialog.tsx
+++ b/app/components/Dialog.tsx
@@ -31,7 +31,7 @@ interface GutterProps {
 
 function Gutter({ children }: GutterProps) {
 	return (
-		<div className="mt-6 flex justify-end gap-2 mt-6">
+		<div className="mt-6 flex justify-end gap-4 mt-6">
 			{children}
 		</div>
 	)
diff --git a/app/routes/dns/components/magic.tsx b/app/routes/dns/components/magic.tsx
index 0822195..d97bc10 100644
--- a/app/routes/dns/components/magic.tsx
+++ b/app/routes/dns/components/magic.tsx
@@ -27,7 +27,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 							Devices will no longer be accessible via your tailnet domain. The
 							search domain will also be disabled.
 						</Dialog.Text>
-						<div className="mt-6 flex justify-end gap-2 mt-6">
+						<Dialog.Gutter>
 							<Dialog.Action variant="cancel" onPress={close}>
 								Cancel
 							</Dialog.Action>
@@ -50,7 +50,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 							>
 								{isEnabled ? 'Disable' : 'Enable'} Magic DNS
 							</Dialog.Action>
-						</div>
+						</Dialog.Gutter>
 					</>
 				)}
 			</Dialog.Panel>
diff --git a/app/routes/dns/components/rename.tsx b/app/routes/dns/components/rename.tsx
index 7ae391a..29c0ca2 100644
--- a/app/routes/dns/components/rename.tsx
+++ b/app/routes/dns/components/rename.tsx
@@ -60,7 +60,7 @@ export default function Modal({ name, disabled }: Properties) {
 								state={[newName, setNewName]}
 								className="my-2"
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -82,7 +82,7 @@ export default function Modal({ name, disabled }: Properties) {
 								>
 									Rename
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</>
 					)}
 				</Dialog.Panel>
diff --git a/app/routes/dns/dialogs/dns.tsx b/app/routes/dns/dialogs/dns.tsx
index e2836de..25ae8d8 100644
--- a/app/routes/dns/dialogs/dns.tsx
+++ b/app/routes/dns/dialogs/dns.tsx
@@ -82,7 +82,7 @@ export default function AddDNS({ records }: Props) {
 									address <Code>{ip}</Code> already exists.
 								</p>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-8">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -93,7 +93,7 @@ export default function AddDNS({ records }: Props) {
 								>
 									Add
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/dns/dialogs/nameserver.tsx b/app/routes/dns/dialogs/nameserver.tsx
index 4f9fc3f..2b5f98d 100644
--- a/app/routes/dns/dialogs/nameserver.tsx
+++ b/app/routes/dns/dialogs/nameserver.tsx
@@ -139,14 +139,14 @@ export default function AddNameserver({ nameservers }: Props) {
 									</Dialog.Text>
 								</>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Add
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/machines/dialogs/delete.tsx b/app/routes/machines/dialogs/delete.tsx
index 992c418..cb2006b 100644
--- a/app/routes/machines/dialogs/delete.tsx
+++ b/app/routes/machines/dialogs/delete.tsx
@@ -32,7 +32,7 @@ export default function Delete({ machine, state }: DeleteProps) {
 						>
 							<input type="hidden" name="_method" value="delete" />
 							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -48,7 +48,7 @@ export default function Delete({ machine, state }: DeleteProps) {
 								>
 									Remove
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/machines/dialogs/expire.tsx b/app/routes/machines/dialogs/expire.tsx
index 6730237..516407d 100644
--- a/app/routes/machines/dialogs/expire.tsx
+++ b/app/routes/machines/dialogs/expire.tsx
@@ -31,7 +31,7 @@ export default function Expire({ machine, state }: ExpireProps) {
 						>
 							<input type="hidden" name="_method" value="expire" />
 							<input type="hidden" name="id" value={machine.id} />
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -47,7 +47,7 @@ export default function Expire({ machine, state }: ExpireProps) {
 								>
 									Expire
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/machines/dialogs/move.tsx b/app/routes/machines/dialogs/move.tsx
index b7ca23d..83e4f1f 100644
--- a/app/routes/machines/dialogs/move.tsx
+++ b/app/routes/machines/dialogs/move.tsx
@@ -55,14 +55,14 @@ export default function Move({ machine, state, magic, users }: MoveProps) {
 									.
 								</p>
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Change owner
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/machines/dialogs/new.tsx b/app/routes/machines/dialogs/new.tsx
index fa03667..c9a93a4 100644
--- a/app/routes/machines/dialogs/new.tsx
+++ b/app/routes/machines/dialogs/new.tsx
@@ -81,7 +81,7 @@ export default function New(data: NewProps) {
 										</Select.Item>
 									))}
 								</Select>
-								<div className="mt-6 flex justify-end gap-2 mt-6">
+								<Dialog.Gutter>
 									<Dialog.Action variant="cancel" onPress={close}>
 										Cancel
 									</Dialog.Action>
@@ -96,7 +96,7 @@ export default function New(data: NewProps) {
 										)}
 										Register
 									</Dialog.Action>
-								</div>
+								</Dialog.Gutter>
 							</fetcher.Form>
 						</>
 					)}
diff --git a/app/routes/machines/dialogs/rename.tsx b/app/routes/machines/dialogs/rename.tsx
index 8f75d4d..f1544c8 100644
--- a/app/routes/machines/dialogs/rename.tsx
+++ b/app/routes/machines/dialogs/rename.tsx
@@ -62,14 +62,14 @@ export default function Rename({ machine, state, magic }: RenameProps) {
 									</p>
 								)
 							) : undefined}
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Rename
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/machines/dialogs/routes.tsx b/app/routes/machines/dialogs/routes.tsx
index 181432a..da67edd 100644
--- a/app/routes/machines/dialogs/routes.tsx
+++ b/app/routes/machines/dialogs/routes.tsx
@@ -159,7 +159,7 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 								</div>
 							)}
 						</div>
-						<div className="mt-6 flex justify-end gap-2 mt-6">
+						<Dialog.Gutter>
 							<Dialog.Action
 								variant="cancel"
 								isDisabled={fetcher.state === 'submitting'}
@@ -167,7 +167,7 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 							>
 								Close
 							</Dialog.Action>
-						</div>
+						</Dialog.Gutter>
 					</>
 				)}
 			</Dialog.Panel>
diff --git a/app/routes/machines/dialogs/tags.tsx b/app/routes/machines/dialogs/tags.tsx
index 4acc4f7..1792cb1 100644
--- a/app/routes/machines/dialogs/tags.tsx
+++ b/app/routes/machines/dialogs/tags.tsx
@@ -130,14 +130,14 @@ export default function Tags({ machine, state }: TagsProps) {
 									</Button>
 								</div>
 							</div>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Save
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}
diff --git a/app/routes/settings/dialogs/expire.tsx b/app/routes/settings/dialogs/expire.tsx
index 37766c0..33400b8 100644
--- a/app/routes/settings/dialogs/expire.tsx
+++ b/app/routes/settings/dialogs/expire.tsx
@@ -33,7 +33,7 @@ export default function ExpireKey({ authKey }: Props) {
 								from being used to authenticate new devices. This action cannot
 								be undone.
 							</Dialog.Text>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -52,7 +52,7 @@ export default function ExpireKey({ authKey }: Props) {
 									)}
 									Expire
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</fetcher.Form>
 					</>
 				)}
diff --git a/app/routes/settings/dialogs/new.tsx b/app/routes/settings/dialogs/new.tsx
index 9b7f68e..8000492 100644
--- a/app/routes/settings/dialogs/new.tsx
+++ b/app/routes/settings/dialogs/new.tsx
@@ -124,7 +124,7 @@ export default function AddPreAuthKey(data: Props) {
 								name="ephemeral"
 								value={ephemeral.toString()}
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
@@ -138,7 +138,7 @@ export default function AddPreAuthKey(data: Props) {
 									)}
 									Generate
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</fetcher.Form>
 					</>
 				)}
diff --git a/app/routes/users/dialogs/add.tsx b/app/routes/users/dialogs/add.tsx
index dcac126..f50cac0 100644
--- a/app/routes/users/dialogs/add.tsx
+++ b/app/routes/users/dialogs/add.tsx
@@ -45,14 +45,14 @@ export default function Add({ magic }: Props) {
 								state={[username, setUsername]}
 								className="my-2"
 							/>
-							<div className="mt-6 flex justify-end gap-2 mt-6">
+							<Dialog.Gutter>
 								<Dialog.Action variant="cancel" onPress={close}>
 									Cancel
 								</Dialog.Action>
 								<Dialog.Action variant="confirm" onPress={close}>
 									Create
 								</Dialog.Action>
-							</div>
+							</Dialog.Gutter>
 						</Form>
 					</>
 				)}