From 116f109a62891287b3d7006451c8327a822f8817 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Tue, 24 Nov 2020 17:18:26 +0000
Subject: [PATCH] Improve setup initiation link

---
 res/css/structures/_UserMenu.scss                 |  3 +++
 src/components/structures/HostingSignupAction.tsx | 15 ++++++++++++---
 src/components/structures/UserMenu.tsx            |  2 +-
 src/i18n/strings/en_EN.json                       |  1 +
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss
index 84c21364ce..014e7b4213 100644
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@@ -276,6 +276,9 @@ limitations under the License.
     .mx_UserMenu_iconHome::before {
         mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
     }
+    .mx_UserMenu_iconHosting::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
+    }
 
     .mx_UserMenu_iconBell::before {
         mask-image: url('$(res)/img/element-icons/notifications.svg');
diff --git a/src/components/structures/HostingSignupAction.tsx b/src/components/structures/HostingSignupAction.tsx
index 15327f5bd7..d7bc9c1d54 100644
--- a/src/components/structures/HostingSignupAction.tsx
+++ b/src/components/structures/HostingSignupAction.tsx
@@ -17,6 +17,11 @@ limitations under the License.
 import * as React from "react";
 import Modal from "../../Modal";
 import HostingSignupDialog from "../views/dialogs/HostingSignupDialog";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../views/context_menus/IconizedContextMenu";
+import { _t } from "../../languageHandler";
 
 interface IProps {}
 
@@ -50,9 +55,13 @@ export default class HostingSignupAction extends React.PureComponent<IProps, ISt
 
     public render(): React.ReactNode {
         return (
-            <div onClick={this.openDialog} className="mx_HostingSignupAction">
-                Get your own personal Element!
-            </div>
+            <IconizedContextMenuOptionList>
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconHosting"
+                    label={_t("Get your own Element!")}
+                    onClick={(e) => this.openDialog()}
+                />
+            </IconizedContextMenuOptionList>
         );
     }
 }
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index fa46f190e1..8022bcb3a4 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -322,7 +322,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
             const validDomains = hostingSignupDomains.filter(d => (d === mxDomain || mxDomain.endsWith(`.${d}`)));
             if (!hostingSignupDomains || validDomains.length > 0) {
                 hostingSignupIFrame = <div
-                    className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_hostingLink"
+                    className=""
                     onClick={this.onCloseMenu}
                 >
                     <HostingSignupAction />
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0db285dc8d..ea3e4a117f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2462,6 +2462,7 @@
     "Got an account? <a>Sign in</a>": "Got an account? <a>Sign in</a>",
     "New here? <a>Create an account</a>": "New here? <a>Create an account</a>",
     "Notification settings": "Notification settings",
+    "Get your own Element!": "Get your own Element!",
     "Security & privacy": "Security & privacy",
     "All settings": "All settings",
     "Community settings": "Community settings",