polish

css/client.css

@@ -1,5 +1,6 @@
-.ClientListView .list {
+.ClientListView h2 {
-    padding: 16px 0;
+    text-align: center;
+    margin: 18px 0;
 }
 
 .ClientView {
@@ -49,12 +50,15 @@
     height: 100%;
 }
 
+.ClientView .back {
+    margin-top: 22px;
+}
+
 .InstallClientView .instructions button {
     background-repeat: no-repeat;
     background-position: center;
-    background-color: var(--link);
+    background-color: transparent;
     padding: 4px;
-    border-radius: 4px;
     border: none;
     width: 24px;
     height: 24px;
@@ -67,5 +71,6 @@
 }
 
 .InstallClientView .instructions button.tick {
-    background-image: url('../images/tick.svg');
+    background-image: url('../images/tick-dark.svg');
 }
+

css/main.css

@@ -42,6 +42,7 @@ html {
 body {
 	background-color: var(--app-background);
 	background-image: url('../images/background.svg');
+    background-attachment: fixed;
 	background-repeat: no-repeat;
 	background-size: auto;
 	background-position: center -50px;
@@ -53,6 +54,14 @@ body {
     margin: 0;
 }
 
+p {
+    line-height: 150%;
+}
+
+a {
+    text-decoration: none;
+}
+
 body,
 button,
 input,
@@ -118,14 +127,13 @@ button, input {
 }
 
 .footer .links {
-    font-size: 0.8em;
+    font-size: 12px;
     list-style: none;
     padding: 0;
 }
 
 a, button.text {
 	color: var(--link);
-    text-decoration: underline;
 }
 
 button.text {
@@ -184,7 +192,6 @@ input[type='text'].large {
     border: 1px solid var(--foreground);
     border-radius: 16px;
     font-size: 14px;
-    line-height: 24px;
 }
 
 .fullwidth {

css/open.css

@@ -14,11 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.OpenLinkView .previewSource {
+.OpenLinkView .caption {
     color: var(--grey);
     font-size: 12px;
 }
 
+.ServerConsentView .actions label {
+    display: flex;
+    align-items: end;
+    gap: 5px;
+}
+
 .ServerConsentView .actions {
     margin-top: 24px;
     display: flex;
@@ -27,7 +33,7 @@ limitations under the License.
 
 .ServerConsentView input[type=submit] {
     flex: 1;
-    margin-left: 12px;
+    margin-left: 32px;
 }
 
 .ServerOptions div {

css/preview.css

@@ -61,8 +61,8 @@
 }
 
 .PreviewView .memberCount p:not(.placeholder) {
-    padding: 4px 4px 4px 24px;
+    padding: 4px 8px 4px 24px;
-    border-radius: 8px;
+    border-radius: 14px;
     background-image: url(../images/member-icon.svg);
     background-repeat: no-repeat;
     background-position: 2px center;
@@ -107,7 +107,7 @@
         var(--flash-fg) calc(10% + 25px),
         var(--flash-bg) calc(10% + 50px)
     );
-    animation: flash 2s ease-in-out infinite;
+    animation: flash 2s linear infinite;
     background-size: 200%;
 }
 

images/background.svg

@@ -1,6 +1,6 @@
 <svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<g opacity="0.26">
+<g>
 <path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
 <path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
 <path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>

images/copy.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="white" stroke-width="1.5"/>
+<path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="#0098d4" stroke-width="1.5"/>
-<rect x="9" y="9" width="11" height="11" rx="2" stroke="white" stroke-width="1.5"/>
+<rect x="9" y="9" width="11" height="11" rx="2" stroke="#0098d4" stroke-width="1.5"/>
 </svg>

images/tick-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 12.5L8.84497 15.845C9.71398 16.714 11.1538 16.601 11.8767 15.6071L18.5 6.5" stroke="#333" stroke-width="2" stroke-linecap="round"/>
+</svg>

src/open/ClientView.js

@@ -43,7 +43,11 @@ export class ClientView extends TemplateView {
 			t.div({className: "header"}, [
 				t.div({className: "description"}, [
 					t.h3(vm.name),
-					t.p(vm.description),
+					t.p([vm.description, " ", t.a({
+                        href: vm.homepage,
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                    }, "Learn more")]),
 					t.p({className: "platforms"}, formatPlatforms(vm.availableOnPlatformNames)),
 				]),
 				t.img({className: "clientIcon", src: vm.iconUrl})
@@ -80,6 +84,8 @@ class InstallClientView extends TemplateView {
 		if (textInstructions) {
             const copyButton = t.button({
                 className: "copy",
+                title: "Copy instructions",
+                "aria-label": "Copy instructions",
                 onClick: evt => {
                     if (copy(vm.copyString, copyButton.parentElement)) {
                         copyButton.className = "tick";
@@ -131,9 +137,8 @@ class InstallClientView extends TemplateView {
 }
 
 function showBack(t, vm) {
-    return t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [
+    return t.p({className: {caption: true, "back": true, hidden: vm => !vm.showBack}}, [
-        `Continue with ${vm.name}.`,
+        `Continue with ${vm.name} · `,
-        " ",
         t.button({className: "text", onClick: () => vm.back()}, "Change"),
     ]);
 }

src/open/ClientViewModel.js

@@ -76,6 +76,10 @@ export class ClientViewModel extends ViewModel {
 		return actions;
 	}
 
+    get homepage() {
+        return this._client.homepage;
+    }
+
 	get identifier() {
 		return this._link.identifier;
 	}
@@ -102,7 +106,7 @@ export class ClientViewModel extends ViewModel {
 
 	get textInstructions() {
         let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
-        if (!Array.isArray(instructions)) {
+        if (instructions && !Array.isArray(instructions)) {
             instructions = [instructions];
         }
 		return instructions;

src/open/OpenLinkView.js

@@ -35,9 +35,9 @@ class ShowLinkView extends TemplateView {
         return t.div([
             t.view(new PreviewView(vm.previewViewModel)),
             t.view(new ClientListView(vm.clientsViewModel)),
-            t.p({className: {previewSource: true, hidden: vm => !vm.previewDomain}}, [
+            t.p({className: {caption: true, hidden: vm => !vm.previewDomain}}, [
-                vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}.`,
+                vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}`,
-                " ",
+                " · ",
                 t.button({className: "text", onClick: () => vm.changeServer()}, "Change"),
             ]),
         ]);

src/open/clients/Element.js

@@ -40,7 +40,7 @@ export class Element {
 	get name() {return "Element"; }
 	get description() { return 'Fully-featured Matrix client, used by millions.'; }
 
-	get homepage() { return ; } // prevents a visit app homepage button from appearing
+	get homepage() { return "https://element.io"; }
 	get author() { return "Element"; }
 
 	getMaturity(platform) { return Maturity.Stable; }