Reuse CopyableText component in all places it can be (#7701)

res/css/views/dialogs/_InviteDialog.scss

@@ -130,12 +130,8 @@ limitations under the License.
         text-transform: uppercase;
     }
 
-    .mx_InviteDialog_footer_link {
-        display: flex;
-        justify-content: space-between;
-        border-radius: 4px;
-        border: solid 1px $light-fg-color;
-        padding: 8px;
+    .mx_CopyableText {
+        width: unset; // full width
 
         > a {
             text-decoration: none;
@@ -144,22 +140,6 @@ limitations under the License.
             text-overflow: ellipsis;
         }
     }
-
-    .mx_InviteDialog_footer_link_copy {
-        flex-shrink: 0;
-        cursor: pointer;
-        margin-left: 20px;
-        display: inherit;
-
-        > div {
-            mask-image: url($copy-button-url);
-            background-color: $message-action-bar-fg-color;
-            margin-left: 5px;
-            width: 20px;
-            height: 20px;
-            background-repeat: no-repeat;
-        }
-    }
 }
 
 .mx_InviteDialog_roomTile {

res/css/views/dialogs/_ShareDialog.scss

@@ -20,44 +20,20 @@ limitations under the License.
     border-color: $light-fg-color;
 }
 
-.mx_ShareDialog_content {
+.mx_ShareDialog .mx_ShareDialog_content {
     margin: 10px 0;
-}
 
-.mx_ShareDialog_matrixto {
-    display: flex;
-    justify-content: space-between;
-    border-radius: 5px;
-    border: solid 1px $light-fg-color;
-    margin-bottom: 10px;
-    margin-top: 30px;
-    padding: 10px;
-}
+    .mx_CopyableText {
+        width: unset; // full width
 
-.mx_ShareDialog_matrixto a {
-    text-decoration: none;
-}
-
-.mx_ShareDialog_matrixto_link {
-    flex-shrink: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mx_ShareDialog_matrixto_copy {
-    flex-shrink: 0;
-    cursor: pointer;
-    margin-left: 20px;
-    display: inherit;
-}
-.mx_ShareDialog_matrixto_copy::after {
-    content: "";
-    mask-image: url($copy-button-url);
-    background-color: $message-action-bar-fg-color;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
 }
 
 .mx_ShareDialog_split {

res/css/views/elements/_CopyableText.scss

@@ -17,6 +17,7 @@ limitations under the License.
 
 .mx_CopyableText {
     display: flex;
+    justify-content: space-between;
     border-radius: 5px;
     border: solid 1px $light-fg-color;
     margin-bottom: 10px;