Style buttons and footer

- add logo to Back Home button
- style Subscribe button on homepage
- reorganize footer with version string on the left
- restyle footer buttons

customize.dist/pages.js

@@ -182,20 +182,20 @@ define([
                     }),
                     h('span.logo-font', 'CryptPad')
                 ]),
+                h('span.cp-footer-version', 'v' + Pages.versionString)
+            ]),
+            h('div.cp-footer-center', [
                 h('div.cp-logo-btns', [
                     footLink('https://cryptpad.org', null, Msg.footer_website, 'link'),
                     footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate', null, 'money') // XXX DB: add OpenCollective icon
 
                 ])
             ]),
-            h('div.cp-footer-center', [
+            h('div.cp-footer-right', [
                 h('div.cp-footer-language', [
                     h('i.fa.fa-language', {'aria-hidden': 'true'}),
                     languageSelector()
                 ])
-            ]),
-            h('div.cp-footer-right', [
-                h('span.cp-footer-version', 'Version: ' + Pages.versionString) // XXX DB: translate 'Version' ?
             ])
         ]);
     };
@@ -248,18 +248,15 @@ define([
         var isHome = ['/', '/index.html'].includes(window.location.pathname);
         var homeLink = h('a.nav-item.nav-link.cp-back-home' /* .navbar-brand */, { href: '/index.html' }, [
             h('i.fa.fa-arrow-left'),
+            h('img', {
+                src: '/customize/CryptPad_logo.svg',
+                "aria-hidden": true,
+                alt: ''
+            }),
             Msg.homePage
         ]);
 
         return h('nav.navbar.navbar-expand-lg',
-            // 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?',
-            //         'aria-hidden': true,
-            //         alt: ''
-            //     }), 'CryptPad'
-            // ]),
             // button, // XXX collapse button
             // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button
             [

customize.dist/pages/index.js

@@ -145,15 +145,15 @@ define([
             locationBlock = h('div', h('br'));
         }
 
-        Msg.home_morestorage = 'For more storage space, and to support the project:'; // XXX
+        Msg.home_morestorage = 'For more storage space:'; // XXX
 
         var subButton = function () {
+            // XXX display donation button even if instance doesn't accept subscriptions
             if (Pages.areSubscriptionsAllowed()) {
                 var sub = h('div.cp-sub-prompt', [
                     h('span', Msg.home_morestorage),
-                    h('br'),
-                    h('button', Msg.features_f_subscribe),
-                    h('button', Msg.footer_donate)
+                    // XXX how to link these properly to accounts?
+                    h('button', {href:"/accounts/"}, Msg.features_f_subscribe)
                 ]);
                 return sub;
             } else {

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

@@ -48,6 +48,7 @@
 @cryptpad_color_black: #000;
 
 @cryptpad_text_col: @cryptpad_color_grey_200;
+@cryptpad_text_col_inv: @cryptpad_color_grey_900;
 
 @cryptpad_color_blue: #326599; // former logo-1
 @cryptpad_color_light_blue: #00b7d8;

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

@@ -48,6 +48,7 @@
 @cryptpad_color_black: #000;
 
 @cryptpad_text_col:@cryptpad_color_grey_800;
+@cryptpad_text_col_inv: @cryptpad_color_grey_200;
 
 @cryptpad_color_blue: #326599; // former logo-1
 @cryptpad_color_light_blue: #00b7d8;

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

@@ -153,7 +153,7 @@ body.html {
         justify-content: space-between;
         flex-direction: row;
         flex-wrap: wrap;
-        .cp-footer-left, .cp-footer-right {
+        .cp-footer-left, .cp-footer-center, .cp-footer-right {
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -185,7 +185,8 @@ body.html {
         .cp-logo-btns {
             padding: 10px;
             a {
-                background-color: @cp_static-card-bg;
+                background-color: @cryptpad_color_link;
+                color: @cryptpad_text_col_inv;
                 border-radius: @infopages-radius;
                 padding: 0.5em 0.7em;
                 white-space: nowrap;
@@ -194,6 +195,7 @@ body.html {
                     margin-right: 5px;
                 }
                 &:hover {
+                    background-color: @cp_static-card-bg;
                     color: @cryptpad_text_col;
                 }
             }
@@ -266,6 +268,10 @@ body.html {
             margin: 5px;
             color: @cp_static-link;
             display: inline-block;
+            img {
+                max-height: 30px;
+                margin-right: 10px;
+            }
             &.cp-back-home {
                 margin-right: auto;
             }

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

@@ -18,7 +18,7 @@
             div {
                 .card {
                     .cp-shadow();
-                    border-radius: 0;
+                    border-radius: @infopages-radius-L;
                     margin-bottom: 1em;
                     border: 0;
                     background-color: @cp_static-card-bg;

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

@@ -220,7 +220,7 @@
             width: fit-content;
             padding: 10px;
             border-radius: @infopages-radius-L;
-            margin-right: 15px;
+            margin-right: 25px;
             &:visited {
                 color: @cryptpad_text_col;
             }
@@ -234,9 +234,19 @@
             }
         }
         .cp-sub-prompt {
+            * {
+                display: block;
+            }
             button {
+                background-color: @cryptpad_color_link;
+                color: @cryptpad_text_col_inv;
                 font-size: 1.4rem;
-                margin-top: 10px;
+                margin: 10px 0;
+                border-radius: @infopages-radius-L;
+                &:hover {
+                    background-color: @cp_static-card-bg;
+                    color: @cryptpad_text_col;
+                }
             }
         }
     }