Merge pull request #1404 from Aravindh-Raju/aravindhr/update-copy-button

Update copy button

modules/portal/app/views/dnsChanges/dnsChangeDetail.scala.html

@@ -42,9 +42,9 @@
         <div class="row">
             <div class="col-md-12">
                 <p><strong>ID:</strong> {{batch.id}}
-                    <span class="copy-button" ng-click="copyToClipboard()"
+                    <span class="small-copy-button" ng-click="copyToClipboard()"
-                          data-toggle="tooltip" data-placement="top" title="Copy batch id to clipboard">
+                          data-toggle="tooltip" data-placement="top" title="Copy Batch ID to clipboard">
-                        <i class="fa fa-clone"></i> Copy
+                        <i class="fa fa-clone"></i>
                     </span>
                     <button class="btn-right-corner" ng-click="exportToCSV(batch.id)">Export CSV</button>
                 </p>

modules/portal/app/views/dnsChanges/dnsChanges.scala.html

@@ -114,8 +114,8 @@
                                     <td>
                                         <a href="/dnschanges/{{batchChange.id}}">{{batchChange.id}}</a>
                                         <span class="small-copy-button" ng-click="copyToClipboard(batchChange.id)"
-                                              data-toggle="tooltip" data-placement="top" title="Copy batch id to clipboard">
+                                              data-toggle="tooltip" data-placement="top" title="Copy Batch ID to clipboard">
-                                            <i class="fa fa-clone"></i> Copy
+                                            <i class="fa fa-clone"></i>
                                         </span>
                                     </td>
                                     <td ng-bind="batchChange.totalChanges"></td>

modules/portal/app/views/groups/groupDetail.scala.html

@@ -33,9 +33,9 @@
                             </i>
                         </h3>
                         <p><strong>Group ID:</strong> {{membership.group.id}}
-                            <span class="copy-button" ng-click="copyToClipboard()"
+                            <span class="small-copy-button" ng-click="copyToClipboard()"
-                                  data-toggle="tooltip" data-placement="top" title="Copy group id to clipboard">
+                                  data-toggle="tooltip" data-placement="top" title="Copy Group ID to clipboard">
-                                <i class="fa fa-clone"></i> Copy
+                                <i class="fa fa-clone"></i>
                             </span>
                         </p>
                         <p><strong>Group Email:</strong> {{membership.group.email}}</p>

modules/portal/app/views/zones/zoneDetail.scala.html

@@ -33,9 +33,9 @@
             <div class="row">
                 <div class="col-md-12">
                     <p><strong>Zone ID:</strong> {{zoneInfo.id}}
-                        <span class="copy-button" ng-click="copyToClipboard()"
+                        <span class="small-copy-button" ng-click="copyToClipboard()"
-                              data-toggle="tooltip" data-placement="top" title="Copy zone id to clipboard">
+                              data-toggle="tooltip" data-placement="top" title="Copy Zone ID to clipboard">
-                            <i class="fa fa-clone"></i> Copy
+                            <i class="fa fa-clone"></i>
                         </span>
                     </p>
                 </div>

modules/portal/public/css/vinyldns.css

@@ -634,34 +634,16 @@ input[type="file"] {
     flex-direction: column;
 }
 
-.copy-button {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 6px;
-    border: 1px solid #d1d5da;
-    background-color: #f6f8fa;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    color: #24292e;
-    margin-left: 8px;
-    transition: background-color 0.3s ease;
-}
-
-.copy-button:hover {
-    background-color: #e1e4e8;
-}
-
-.copy-button i {
-    margin-right: 4px;
-    font-size: 12px;
-}
-
 .small-copy-button {
     font-size: 12px;
-    padding: 2px 6px;
+    padding: 0;
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
 }
 
 .small-copy-button i {

modules/portal/public/lib/controllers/controller.membership.js

@@ -50,7 +50,7 @@ angular.module('controller.membership', []).controller('MembershipController', f
     $scope.copyToClipboard = function() {
         utilityService.copyToClipboard($scope.membership.group.id);
         // Trigger success alert using utilityService
-        var alert = utilityService.success('Successfully copied group id to clipboard');
+        var alert = utilityService.success('Successfully copied Group ID to clipboard');
         $scope.alerts.push(alert);
     };
 

modules/portal/public/lib/controllers/controller.records.js

@@ -108,7 +108,7 @@ angular.module('controller.records', [])
     $scope.copyToClipboard = function() {
         utilityService.copyToClipboard($scope.zoneInfo.id);
         // Trigger success alert using utilityService
-        var alert = utilityService.success('Successfully copied zone id to clipboard');
+        var alert = utilityService.success('Successfully copied Zone ID to clipboard');
         $scope.alerts.push(alert);
     };
 

modules/portal/public/lib/dns-change/dns-change-detail.controller.js

@@ -35,7 +35,7 @@
             $scope.copyToClipboard = function() {
                 utilityService.copyToClipboard($scope.batch.id);
                 // Trigger success alert using utilityService
-                var alert = utilityService.success('Successfully copied batch id to clipboard');
+                var alert = utilityService.success('Successfully copied Batch ID to clipboard');
                 $scope.alerts.push(alert);
             };
 

modules/portal/public/lib/dns-change/dns-changes.controller.js

@@ -59,7 +59,7 @@
             $scope.copyToClipboard = function(copyText) {
                 utilityService.copyToClipboard(copyText);
                 // Trigger success alert using utilityService
-                var alert = utilityService.success('Successfully copied batch id to clipboard');
+                var alert = utilityService.success('Successfully copied Batch ID to clipboard');
                 $scope.alerts.push(alert);
             };