From dbf177d667b9476bbbefcef2ab73eb7f4786118d Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 7 Mar 2024 02:20:01 +0100
Subject: [PATCH] Feat: Add copy project slug button

---
 .../components/ProjectNameChangeSection/CopyButton.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
index 4add9df76..8337d1c4d 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx
@@ -9,10 +9,11 @@ import { useToggle } from "@app/hooks";
 type Props = {
   value: string;
   hoverText: string;
+  notificationText: string;
   children: React.ReactNode;
 };
 
-export const CopyButton = ({ value, children, hoverText }: Props) => {
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
   const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
   const { createNotification } = useNotificationContext();
 
@@ -25,7 +26,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
     navigator.clipboard.writeText(value);
 
     createNotification({
-      text: "Copied Project ID to clipboard",
+      text: notificationText,
       type: "success"
     });
 
@@ -43,7 +44,7 @@ export const CopyButton = ({ value, children, hoverText }: Props) => {
       onClick={copyToClipboard}
     >
       {children}
-      <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+      <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 py-2 px-3 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
         {hoverText}
       </span>
     </Button>