Refactor IP copy functionality into a reusable component

Extracted the "Copy IP" button to a new `CopyIpComponent` to improve reusability and modularity. Updated `HomeComponent` to use this new component and removed redundant methods for copying text to the clipboard. Added tests and styles for the new component.

frontend/src/app/home/home.component.html

@@ -17,10 +17,7 @@
       <!--      TODO load player count from old api or backend?-->
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
-      <!--      TODO make copy be angular not js-->
-      <button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
-        <span class="button-inner" id="copybutton">Copy IP</span>
-      </button>
+      <app-copy-ip></app-copy-ip>
     </section>
     <section class="darkmodeSection">
       <div class="container">
@@ -140,9 +137,7 @@
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
-        <button type="button" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
-          <span class="button-inner" id="copybutton2">Copy IP</span>
-        </button>
+        <app-copy-ip></app-copy-ip>
       </div>
     </section>
     <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">