Merge pull request #660 from clemsos/master

Element web : update welcome page template

roles/matrix-client-element/templates/welcome.html.j2

@@ -97,19 +97,10 @@ h1::after {
     color: #2e2f32 !important;
 }
 
-.mx_ButtonHeadline {
-    margin-bottom: 14px;
-}
-
 .mx_ButtonLabel {
     margin-left: 20px;
 }
 
-.mx_ButtonWrapperText {
-    font-size: 13px;
-    margin-bottom: 10px;
-}
-
 .mx_Header_title {
     font-size: 24px;
     font-weight: 600;
@@ -128,7 +119,7 @@ h1::after {
 }
 
 .mx_ButtonCreateAccount {
-    background-color: #03B381;
+    background-color: #0DBD8B;
     color: white !important;
 }
 
@@ -150,6 +141,32 @@ h1::after {
     background-image: url('welcome/images/icon-room-directory.svg');
 }
 
+/*
+.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
+If it is set on the page, we should show the buttons. Otherwise, we have to assume
+we don't have an account and should hide them. No account == no guest account either.
+ */
+.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
+    display: none;
+}
+
+.mx_ButtonRow.mx_WelcomePage_guestFunctions {
+    margin-top: 20px;
+}
+.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
+    margin: 0 auto;
+}
+
+@media only screen and (max-width: 480px) {
+    .mx_ButtonRow {
+        flex-direction: column;
+    }
+
+    .mx_ButtonRow > * {
+        margin: 0 0 10px 0;
+    }
+}
+
 </style>
 
 <div class="mx_Parent">
@@ -175,17 +192,10 @@ h1::after {
              See https://github.com/vector-im/riot-web/issues/8622.
              TODO: Convert to config option if possible. -->
         <!-- BEGIN Ansible: Remove these lines when guest access is disabled -->
-        <div class="mx_ButtonRow">
+        <div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
-            <div>
-                <div class="mx_ButtonWrapperText">_t("Need help?")</div>
-                <a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconHelp">
-                    <div class="mx_ButtonLabel">_t("Chat with Riot Bot")</div>
-                </a>
-            </div>
             <div>
-                <div class="mx_ButtonWrapperText">_t("Explore rooms")</div>
                 <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
-                    <div class="mx_ButtonLabel">_t("Room Directory")</div>
+                    <div class="mx_ButtonLabel">_t("Explore rooms")</div>
                 </a>
             </div>
         </div>