fix(sidebar): add oui-clipboard to copy id of project

Author: jleveugle

packages/manager/apps/public-cloud/src/assets/theme/_sidebar.less

@@ -9,6 +9,33 @@ cloud-sidebar { /* stylelint-disable-line */
   position: relative;
   box-shadow: 0 2pt 10pt rgba(40, 89, 192, 0.25);
 
+  oui-clipboard { /* stylelint-disable-line */
+    margin-bottom: 0;
+
+    .oui-clipboard__control {
+      border-bottom: 0;
+      padding: 0;
+      padding-left: 1.5rem;
+      font-weight: 400;
+      color: @primary-color;
+      background-color: transparent;
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+        background-color: transparent;
+      }
+    }
+
+    .oui-clipboard__button {
+      left: 0;
+      right: inherit;
+      padding: 0;
+      min-width: auto;
+      color: @primary-color;
+    }
+  }
+
   .project-list {
     position: absolute;
     width: 100%;
@@ -22,6 +49,13 @@ cloud-sidebar { /* stylelint-disable-line */
     will-change: transform;
     transition: transform ease-in-out 500ms;
 
+    oui-clipboard { /* stylelint-disable-line */
+      .oui-clipboard__control,
+      .oui-clipboard__button {
+        color: #fff;
+      }
+    }
+
     &.ng-enter,
     &.ng-leave.ng-leave-active {
       transform: translateX(-100%);
@@ -141,21 +175,6 @@ cloud-sidebar { /* stylelint-disable-line */
       }
     }
   }
-
-  .project-copy {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-
-    &,
-    .oui-icon {
-      color: @primary-color;
-    }
-
-    .oui-icon {
-      font-size: 1rem;
-    }
-  }
 }
 
 #sidebar-menu .oui-sidebar-menu {

packages/manager/apps/public-cloud/src/sidebar/sidebar.html

@@ -7,10 +7,7 @@
         <div class="d-flex" data-ng-if="!$ctrl.isLoading && $ctrl.project">
             <div class="w-100 text-truncate mr-3">
                 <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
-                <button class="project-copy w-100 d-flex">
-                    <span class="my-auto oui-icon oui-icon-copy-normal mr-1"></span>
-                    <span class="w-100 text-truncate" data-ng-bind="$ctrl.project.project_id"></span>
-                </button>
+                <oui-clipboard model="$ctrl.project.project_id"></oui-clipboard>
             </div>
             <div class="my-auto">
                 <button type="button" class="btn btn-primary rounded-circle" style="padding: 6px 13px; background-color: rgb(40, 89, 192);" data-ng-click="$ctrl.toggleProjectsList()">
@@ -45,10 +42,7 @@ <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.pr
         </div>
         <div class="w-100 text-truncate ml-3">
             <h2 class="mb-0 d-inline-block text-white" style="font-weight: 400;" data-ng-bind="$ctrl.project.description"></h2>
-            <button class="project-copy w-100 d-flex text-white">
-                <span class="my-auto oui-icon oui-icon-copy-normal mr-1 text-white"></span>
-                <span class="w-100 text-truncate" data-ng-bind="$ctrl.project.project_id"></span>
-            </button>
+            <oui-clipboard model="$ctrl.project.project_id"></oui-clipboard>
         </div>
     </div>
     <cloud-sidebar-project-list></cloud-sidebar-project-list>