From 58611e6f6b23838ab0f8af13f4f7e8c60a37b957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Fri, 1 Apr 2022 16:08:16 +0100 Subject: [PATCH] Rounded and redesigned static pages - Login and register pages - Features page --- customize.dist/pages.js | 2 +- customize.dist/pages/index.js | 13 ++++++++----- customize.dist/pages/login.js | 6 ++++-- customize.dist/pages/register.js | 16 +++++++++------- .../src/less2/include/colortheme-dark.less | 1 + .../src/less2/include/colortheme.less | 1 + .../src/less2/include/infopages.less | 6 +++--- .../src/less2/pages/page-features.less | 3 ++- .../src/less2/pages/page-login.less | 19 +++++++++---------- .../src/less2/pages/page-register.less | 19 ++++++++----------- 10 files changed, 46 insertions(+), 40 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 25d1b6e94..35b28a6f7 100644 --- a/customize.dist/pages.js +++ b/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?', diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index d7dde32a1..38b8f01cb 100644 --- a/customize.dist/pages/index.js +++ b/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 - privacyLink, // XXX DB: insert link to privacy policy if available - imprintLink // XXX DB: insert link to imprint if available + termsLink, + privacyLink, + 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 - ]) // XXX DB TODO: add drive link + 'Drive: 1GB' // XXX DB TODO: Use instance default storage + ]) ]) ]), notice diff --git a/customize.dist/pages/login.js b/customize.dist/pages/login.js index 9ff9b6746..c5e39424c 100644 --- a/customize.dist/pages/login.js +++ b/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') diff --git a/customize.dist/pages/register.js b/customize.dist/pages/register.js index 1bd26ff47..30e04a6b4 100644 --- a/customize.dist/pages/register.js +++ b/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(), ]), - 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('a', { - href: '/features.html' - }, Msg.register_whyRegister), + h('div.cp-register-instance', [ + Msg.register_instance, , h('br'), + h('a', { + href: '/features.html' + }, Msg.register_whyRegister) + ]), h('input.form-control#username', { type: 'text', autocomplete: 'off', diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index e2f585b6e..db7e714f7 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/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 diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 55bfe92db..3dc1b222b 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/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 diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index d87ddb980..5b53c4a8a 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/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; diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 5ec076a34..50f9195ae 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/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; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 07fcc7cb5..f6e417c19 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/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; - - #register { - border-color: @cryptpad_color_brand; - background: @cryptpad_color_white; - color: @cryptpad_color_brand; - padding: 10px; - border-radius: 0; - margin: 0px; + button.login { + margin-right: 0px; } } } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 1ce8bbd5f..cafeaee05 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -13,13 +13,9 @@ .cp-container { .form-group { - .checkbox-container { - &:nth-of-type(1) { - margin-top: 2em; - } - &:last-of-type { - margin-bottom: 1em; - } + .cp-register-instance { + text-align: center; + margin-bottom: 10px; } #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; } } }