Introduce new copy icon (#8942)

PSG-110

Author: weeman1337

res/css/components/views/beacon/_ShareLatestLocation.scss

@@ -20,9 +20,20 @@ limitations under the License.
     color: $secondary-content;
 }
 
-.mx_ShareLatestLocation_copy {
+// double class to be more specific than the general mx_CopyableText CSS rule
+.mx_CopyableText.mx_ShareLatestLocation_copy {
     // override copyable text style to make compact
     .mx_CopyableText_copyButton {
+        height: 13px;
         margin-left: $spacing-8 !important;
+        position: relative;
+        top: -1px;
+        width: 13px;
+
+        &::before {
+            background-color: $secondary-content;
+            height: 13px;
+            width: 13px;
+        }
     }
 }

res/css/views/context_menus/_MessageContextMenu.scss

@@ -91,7 +91,12 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconCopy::before {
+        height: 12px;
+        left: 2px;
         mask-image: url($copy-button-url);
+        position: relative;
+        width: 12px;
+        top: 3px;
     }
 
     .mx_MessageContextMenu_iconEdit::before {

res/css/views/elements/_CopyableText.scss

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 .mx_CopyableText {
+    align-items: flex-start;
     display: flex;
     justify-content: space-between;
     width: max-content;
@@ -31,19 +32,25 @@ limitations under the License.
 
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
-        width: 20px;
-        height: 20px;
+        // using em here to adapt to the local font size
+        width: 1em;
+        height: 1em;
         cursor: pointer;
         margin-left: 20px;
         display: block;
+        // center to first line
+        position: relative;
+        top: .15em;
 
         &::before {
             content: "";
-
             mask-image: url($copy-button-url);
+            mask-position: center center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
             background-color: $message-action-bar-fg-color;
-            width: 20px;
-            height: 20px;
+            width: 1em;
+            height: 1em;
             display: block;
             background-repeat: no-repeat;
         }

res/css/views/rooms/_EventTile.scss

@@ -611,6 +611,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 mask-size: 75%;
             }
         }
+
+        .mx_EventTile_copyButton {
+            height: 17px;
+            mask-image: url($copy-button-url);
+            mask-position: center center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            right: 9px;
+            width: 17px;
+        }
     }
 }
 
@@ -631,10 +641,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     cursor: pointer;
 }
 
-.mx_EventTile_copyButton {
-    mask-image: url($copy-button-url);
-}
-
 .mx_EventTile_collapseButton,
 .mx_EventTile_expandButton {
     mask-position: center;

res/img/element-icons/copy.svg

@@ -210,7 +210,7 @@ $event-highlight-bg-color: $yellow-background;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+$copy-button-url: "$(res)/img/element-icons/copy.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent

res/img/feather-customised/clipboard.svg

@@ -325,7 +325,7 @@ $focus-brightness: 105%;
 
 // Icon URLs
 // ********************
-$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+$copy-button-url: "$(res)/img/element-icons/copy.svg";
 // ********************
 
 // Location sharing