Rounded and redesigned static pages

- Login and register pages
- Features page

customize.dist/pages.js

@@ -270,7 +270,7 @@ define([
         // });
 
         return h('nav.navbar.navbar-expand-lg',
-            // XXX add link back to index.html on footer logo
+            // XXX DB add link back to index.html on other pages
             // h('a.navbar-brand', { href: '/index.html'}, [
             //     h('img', {
             //         src: '/customize/CryptPad_logo.svg?',

customize.dist/pages/index.js

@@ -116,6 +116,9 @@ define([
 
         var fastLink = k => pageLink(Pages.customURLs[k], k);
 
+        // XXX DB
+        Msg.terms = "Terms of Service";
+
         // XXX DB: this may be wrong, pasted over form pages.js
         var imprintLink = fastLink('imprint');
         var privacyLink = fastLink('privacy');
@@ -149,9 +152,9 @@ define([
                                 h('i.fa.fa-map-pin', {'aria-hidden': 'true'}),
                                 'Encrypted data is hosted in: France (OVH)' // XXX Use instance location
                             ]),
-                            termsLink, // XXX DB: insert link to ToS if available
+                            termsLink,
-                            privacyLink, // XXX DB: insert link to privacy policy if available
+                            privacyLink,
-                            imprintLink // XXX DB: insert link to imprint if available
+                            imprintLink
                         ]),
                         h('div.col-md-6', [
                             h('div.cp-app-grid', [
@@ -165,8 +168,8 @@ define([
                             ]),
                             h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct
                                 h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}),
-                                'Drive: 1GB' // XXX Use instance default storage
+                                'Drive: 1GB' // XXX DB TODO: Use instance default storage
-                            ]) // XXX DB TODO: add drive link
+                            ])
                         ])
                     ]),
                     notice

customize.dist/pages/login.js

@@ -5,6 +5,7 @@ define([
     '/customize/pages.js',
     '/api/config',
 ], function (h, UI, Msg, Pages, Config) {
+    Msg.login_instance = "Connect to your account on {0}"; // XXX insert instance name
     return function () {
         return [h('div#cp-main', [
             Pages.infopageTopbar(),
@@ -13,6 +14,7 @@ define([
                 h('div.row', [
                     h('div.col-md-3'),
                     h('div#userForm.form-group.hidden.col-md-6', [
+                        h('div.cp-login-instance',Msg.login_instance),
                         h('input.form-control#name', {
                             name: 'name',
                             type: 'text',
@@ -32,11 +34,11 @@ define([
                             UI.createCheckbox('import-recent', Msg.register_importRecent),
                         ]),
                         h('div.extra', [
-                            h('button.login', Msg.login_login),
                             (Config.restrictRegistration?
                                 undefined:
                                 h('button#register.cp-secondary', Msg.login_register)
-                            )
+                            ),
+                            h('button.login', Msg.login_login)
                         ])
                     ]),
                     h('div.col-md-3')

customize.dist/pages/register.js

@@ -26,8 +26,8 @@ define([
                         h('div.row.cp-page-title', h('h1', Msg.register_header)),
                         //h('div.row.cp-register-det', content),
                     ].concat(content)),
-                ]),
                     Pages.infopageFooter(),
+                ]),
             ];
         };
 
@@ -44,6 +44,8 @@ define([
             termsCheck = h('div.checkbox-container', tos);
         }
 
+        Msg.register_instance = "Creating a new account on {0}"; // XXX DB
+
         return frame([
             h('div.row.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
@@ -51,13 +53,13 @@ define([
                     Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
                 ]),
                 h('div.cp-reg-form.col-md-6', [
-                    h('img.img-fluid', {
-                        src: '/customize/images/swallow-the-key.png?' + urlArgs
-                    }),
                     h('div#userForm.form-group.hidden', [
+                        h('div.cp-register-instance', [
+                            Msg.register_instance, , h('br'),
                             h('a', {
                                 href: '/features.html'
-                        }, Msg.register_whyRegister),
+                            }, Msg.register_whyRegister)
+                        ]),
                         h('input.form-control#username', {
                             type: 'text',
                             autocomplete: 'off',

customize.dist/src/less2/include/colortheme-dark.less

@@ -266,6 +266,7 @@
 @cp_static-footer-border: @cryptpad_color_grey_600;
 @cp_static-topbar-fg: @cryptpad_color_brand_300;
 @cp_static-card-bg: @cryptpad_color_grey_800;
+@cp_static-danger: @cryptpad_color_red_fade;
 @cp_static-img-invert-filter: hue-rotate(200grad) invert();
 
 // Limit

customize.dist/src/less2/include/colortheme.less

@@ -265,6 +265,7 @@
 @cp_static-footer-border: @cryptpad_color_white;
 @cp_static-topbar-fg: @cryptpad_color_brand;
 @cp_static-card-bg: @cryptpad_color_white;
+@cp_static-danger: fade(@cryptpad_color_red, 30%);
 @cp_static-img-invert-filter: none;
 
 // Limit

customize.dist/src/less2/include/infopages.less

@@ -125,9 +125,9 @@ body.html {
         }
 
         .form-group {
-            & > * {
+            // & > * {
-                margin-top: 0.5em;
+            //     margin-bottom: 0.5em;
-            }
+            // }
             display: flex;
             flex-direction: column;
             align-items: center;

customize.dist/src/less2/pages/page-features.less

@@ -22,10 +22,11 @@
             .cp-shadow();
             border: none;
             background-color: @cp_static-card-bg;
-            border-radius: 0px;;
+            border-radius: @infopages-radius;
             .title-card {
                 background-color: @cryptpad_color_brand;
                 padding: 20px;
+                border-radius: @infopages-radius @infopages-radius 0 0 ;
             }
             .card-body, .title-card {
                 display: flex;

customize.dist/src/less2/pages/page-login.less

@@ -23,11 +23,16 @@
             .cp-shadow();
             background-color: @cp_static-card-bg;
             padding: 10px;
+            margin: 0 10px 10px 10px;
+            border-radius: @infopages-radius-L;
+            .cp-login-instance {
+                margin-bottom: 10px;
+            }
             .form-control {
-                border-radius: 0;
+                border-radius: @infopages-radius;
                 color: @cryptpad_text_col;
                 background-color: @cp_forms-bg;
-                margin-bottom: 5px;
+                margin-bottom: 10px;
                 &:focus {
                     border-color: @cryptpad_color_brand;
                 }
@@ -43,14 +48,8 @@
         }
         .extra {
             margin-top: 1em;
-
+            button.login {
-            #register {
+                margin-right: 0px;
-                border-color: @cryptpad_color_brand;
-                background: @cryptpad_color_white;
-                color: @cryptpad_color_brand;
-                padding: 10px;
-                border-radius: 0;
-                margin: 0px;
             }
         }
     }

customize.dist/src/less2/pages/page-register.less

@@ -13,13 +13,9 @@
 
     .cp-container {
         .form-group {
-            .checkbox-container {
+            .cp-register-instance {
-                &:nth-of-type(1) {
+                text-align: center;
-                    margin-top: 2em;
+                margin-bottom: 10px;
-                }
-                &:last-of-type {
-                    margin-bottom: 1em;
-                }
             }
             #register {
                 &.btn {
@@ -85,12 +81,13 @@
             position: relative;
             z-index: 2;
             margin-bottom: 100px;
+            border-radius: @infopages-radius-L;
             .cp-shadow();
             .form-control {
-                border-radius: 0;
+                border-radius: @infopages-radius;
                 color: @cryptpad_text_col;
                 background-color: @cp_forms-bg;
-                margin-top: 5px;
+                margin-bottom: 10px;
                 &:focus {
                     border-color: @cryptpad_color_brand;
                 }
@@ -100,7 +97,7 @@
                 color: @cryptpad_text_col;
             }
             button#register {
-                margin: 0px;
+                margin-top: 10px;
             }
         }
 
@@ -119,7 +116,7 @@
                         content: "\f071";
                     }
                     .red {
-                        color: @cryptpad_color_red;
+                        background-color: @cp_static-danger;
                     }
                 }
             }