From a49fc395ad693c5b5edc3f935f4df8a4a5528086 Mon Sep 17 00:00:00 2001
From: Harjot Singh <harjot@harkul.com>
Date: Tue, 12 Nov 2024 10:06:09 +0000
Subject: [PATCH] feat(frontend): improve layout of copy ip address buttons in
 About

---
 .../settings/-components/CopyButton/index.tsx | 24 ++++++++++++-------
 .../src/app/settings/server/about/index.css   |  4 ++++
 .../src/app/settings/server/about/index.tsx   | 16 ++++++++++---
 3 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 apps/frontend/src/app/settings/server/about/index.css

diff --git a/apps/frontend/src/app/settings/-components/CopyButton/index.tsx b/apps/frontend/src/app/settings/-components/CopyButton/index.tsx
index e80c480c..d789569e 100644
--- a/apps/frontend/src/app/settings/-components/CopyButton/index.tsx
+++ b/apps/frontend/src/app/settings/-components/CopyButton/index.tsx
@@ -1,29 +1,35 @@
 import './index.css'
 
 import { Button, Tooltip } from '@mui/material'
+import classNames from 'classnames'
+import { noop } from 'radashi'
+import { ReactNode } from 'react'
 
 import { useCopyToClipboard } from '~/hooks'
 
 type CopyButtonProps = {
+  className?: string,
   copyText: string,
-  onClick?: () => Record<string, any>,
-  children: React.ReactNode,
-  style?: Record<string, any>,
+  onClick?: () => void,
+  children: ReactNode,
 }
 
-const CopyButton = (
-  { copyText, onClick: originalOnClick = () => ( {} ), ...props }: CopyButtonProps
-) => {
+const CopyButton = ( {
+  className,
+  copyText,
+  onClick = noop,
+  ...props
+}: CopyButtonProps ) => {
   const copyToClipboard = useCopyToClipboard()
 
-  const onClick = () => {
-    originalOnClick()
+  const handleClick = () => {
+    onClick()
     copyToClipboard( copyText )
   }
 
   return (
     <Tooltip title="Click to copy">
-      <Button className="copy-button" {...props} onClick={onClick} />
+      <Button className={classNames( 'copy-button', className )} {...props} onClick={handleClick} />
     </Tooltip>
   )
 }
diff --git a/apps/frontend/src/app/settings/server/about/index.css b/apps/frontend/src/app/settings/server/about/index.css
new file mode 100644
index 00000000..e5e7e15e
--- /dev/null
+++ b/apps/frontend/src/app/settings/server/about/index.css
@@ -0,0 +1,4 @@
+.copy-address {
+  padding: 2px 0;
+  display: block;
+}
diff --git a/apps/frontend/src/app/settings/server/about/index.tsx b/apps/frontend/src/app/settings/server/about/index.tsx
index 268da84b..618c7593 100644
--- a/apps/frontend/src/app/settings/server/about/index.tsx
+++ b/apps/frontend/src/app/settings/server/about/index.tsx
@@ -1,3 +1,5 @@
+import './index.css'
+
 import { CircularProgress, Grid, List, ListItem, Typography } from '@mui/material'
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -33,9 +35,17 @@ export const About = ( { connected }: AboutProps ) => {
         <Grid container>
           <Grid item xs={6}><Typography variant="body2">Server Address</Typography></Grid>
           <Grid item xs={6}>
-            {Object.entries( about.addresses ).map( ( [ name, address ] ) => (
-              <CopyButton copyText={`http://${address}:${PORT}`}>{`${address}:${PORT} (${name})`}</CopyButton>
-            ) )}
+            {Object
+              .entries( about.addresses )
+              .map( ( [ name, address ] ) => (
+                <CopyButton
+                  key={address}
+                  className="copy-address"
+                  copyText={`http://${address}:${PORT}`}
+                >
+                  {`${address}:${PORT} (${name})`}
+                </CopyButton>
+              ) )}
           </Grid>
         </Grid>
       </ListItem>