From bc49d1d94541f21659d5951dfac56381e926d8ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Fri, 6 May 2022 16:33:07 +0100
Subject: [PATCH 01/11] Display longer instance titles on one line on large
 screens

- refactored flex layout to maximize the length of the instance title
if more screen space is available.
---
 customize.dist/pages/index.js                  | 10 +++++-----
 customize.dist/src/less2/pages/page-index.less | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index 09c5dd23d..d4ca0d04f 100644
--- a/customize.dist/pages/index.js
+++ b/customize.dist/pages/index.js
@@ -130,9 +130,9 @@ define([
         // instance title
         var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
         // XXX DB: How does TextFit work?!
-        setTimeout(function () {
-            TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48});
-        });
+        // setTimeout(function () {
+        //     TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48}); // XXX DB remove?
+        // });
 
         // instance location
         var locationBlock;
@@ -168,7 +168,7 @@ define([
                 notice,
                 h('div.container.cp-container', [
                     h('div.row.cp-home-hero', [
-                        h('div.cp-title.col-md-6', [
+                        h('div.cp-title.col-lg-6', [
                             h('img', {
                                 src: '/customize/CryptPad_logo.svg?' + urlArgs,
                                 'aria-hidden': 'true',
@@ -181,7 +181,7 @@ define([
                             privacyLink,
                             imprintLink
                         ]),
-                        h('div.col-md-6', [
+                        h('div.cp-apps.col-lg-6', [
                             h('div.cp-app-grid', [
                                 h('span.cp-app-new', [
                                     h('i.fa.fa-plus'),
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 6c7097668..8264d8e26 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -23,6 +23,7 @@
             flex-flow: column;
             justify-content: space-around;
             justify-content: space-evenly;
+            max-width: 1000vh;
         }
     }
     body {
@@ -46,18 +47,22 @@
         width: 100%;
         align-self: center;
         align-items: center;
+        justify-content: flex-end;
+        @media screen and (max-width: 990px){
+            justify-content: center;
+        }
     }
     .cp-title {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        margin-top: 1.5em;
+        margin: 0 auto;
+        flex-grow: 1; // XXX DB: no effect
         img {
             max-width: 200px;
             margin-bottom: 1.5em;
         }
-        margin-left: 0;
         h1 {
             font-family: "IBM Plex Mono";
             font-weight: 500;
@@ -82,6 +87,13 @@
         text-decoration: none;
     }
 
+    .cp-apps{
+        max-width: 575px;
+        @media screen and (max-width: 990px) {
+            align-self: baseline;
+        }
+    }
+
     .cp-app-grid {
         background-color: @cp_alertify-bg;
         border-radius: @infopages-radius-L;
@@ -103,7 +115,7 @@
         a {
             margin: 10px;
         }
-        @media screen and (max-width: 768px) {
+        @media screen and (max-width: 990px) {
             margin-top: 40px;
         }
     }

From c990665bb56646464532c777a65f897aba1042c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Fri, 6 May 2022 16:35:45 +0100
Subject: [PATCH 02/11] Add Contact link and style instance "legal" links

---
 customize.dist/pages/index.js                  | 9 ++++++---
 customize.dist/src/less2/pages/page-index.less | 6 ++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index d4ca0d04f..ae1a86f36 100644
--- a/customize.dist/pages/index.js
+++ b/customize.dist/pages/index.js
@@ -177,9 +177,12 @@ define([
                             instanceTitle,
                             Pages.setHTML(h('span.tag-line'), Pages.Instance.description),
                             locationBlock,
-                            termsLink,
-                            privacyLink,
-                            imprintLink
+                            h('div.cp-instance-links', [
+                                termsLink,
+                                privacyLink,
+                                imprintLink,
+                                h('a', {href:"/contact.html"}, Msg.contact)
+                            ])
                         ]),
                         h('div.cp-apps.col-lg-6', [
                             h('div.cp-app-grid', [
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 8264d8e26..e9d2c1e8e 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -80,6 +80,12 @@
                 margin-right: 5px;
             }
         }
+        .cp-instance-links {
+            padding: 1.3rem;
+            a {
+                margin: 1.3rem;
+            }
+        }
     }
 
     @callout-padding: 15px;

From 936dc9950a31589e283148f048e3e42f6390c628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Fri, 6 May 2022 18:00:30 +0100
Subject: [PATCH 03/11] 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                       | 21 ++++++++-----------
 customize.dist/pages/index.js                 |  8 +++----
 .../src/less2/include/colortheme-dark.less    |  1 +
 .../src/less2/include/colortheme.less         |  1 +
 .../src/less2/include/infopages.less          | 10 +++++++--
 .../src/less2/pages/page-contact.less         |  2 +-
 .../src/less2/pages/page-index.less           | 14 +++++++++++--
 7 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 9f914ddc2..d7ba9c6ad 100644
--- a/customize.dist/pages.js
+++ b/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
             [
diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index ae1a86f36..9929586e7 100644
--- a/customize.dist/pages/index.js
+++ b/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 {
diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index db7e714f7..f1ad36526 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/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;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 3dc1b222b..d4c1158e6 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/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;
diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 1aec1703c..2d9a06617 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/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;
             }
diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less
index c305f087a..0e75e7c15 100644
--- a/customize.dist/src/less2/pages/page-contact.less
+++ b/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;
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index e9d2c1e8e..684cce3e0 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/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;
+                }
             }
         }
     }

From c17c4adfd79c11e85f0f22d7d893bd8cda9690d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 13:02:47 +0100
Subject: [PATCH 04/11] Redesign contact page

---
 customize.dist/pages/contact.js               | 96 ++++++++++---------
 .../src/less2/pages/page-contact.less         | 37 ++++++-
 2 files changed, 85 insertions(+), 48 deletions(-)

diff --git a/customize.dist/pages/contact.js b/customize.dist/pages/contact.js
index 94423f640..43c5bcacb 100644
--- a/customize.dist/pages/contact.js
+++ b/customize.dist/pages/contact.js
@@ -15,6 +15,8 @@ define([
         ].indexOf(Config.adminEmail) === -1;
         var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn();
 
+        Msg.contact_admin = "Contact the administrators for: {0}"; // XXX DB: add instance title
+
         return h('div#cp-main', [
             Pages.infopageTopbar(),
             h('div.container.cp-container', [
@@ -24,7 +26,7 @@ define([
                 (adminEmail || adminMailbox) ? h('div.row.cp-iconCont.align-items-center', [
                     h('div.col-12',
                         Pages.setHTML(h('h2.text-center'), Msg.contact_admin),
-                        h('p', Msg.contact_adminHint)
+                        h('p.center', Msg.contact_adminHint)
                     ),
                     adminEmail ? h('div.col-12.col-sm-6.col-md-3.col-lg-3',
                         h('a.card', {href : "mailto:"+Config.adminEmail},
@@ -58,51 +60,10 @@ define([
                 h('div.row.cp-iconCont.align-items-center', [
                     h('div.col-12',
                         Pages.setHTML(h('h2.text-center'), Msg.contact_dev),
-                        h('p', Msg.contact_devHint)
+                        h('p.center', Msg.contact_devHint)
                     ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "https://twitter.com/cryptpad"},
-                            h('div.card-body',
-                                h('p', [
-                                    // this is not a typo. adblock plus blocks images with src *twitter* apparently
-                                    h('img', {
-                                        src: '/customize/images/twiitter.svg',
-                                        alt: '',
-                                        'aria-hidden': 'true'}),
-                                    'Twitter'
-                                ])
-                            )
-                        )
-                    ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "https://social.weho.st/@cryptpad"},
-                            h('div.card-body',
-                                h('p', [
-                                    h('img', {
-                                        src: '/customize/images/mastodon.svg',
-                                        alt: '',
-                                        'aria-hidden': 'true'
-                                    }),
-                                    'Mastodon'
-                                ])
-                            )
-                        )
-                    ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
-                            h('div.card-body',
-                                h('p', [
-                                    h('img', {
-                                        src: '/customize/images/github.svg',
-                                        alt: '',
-                                        'aria-hidden': 'true'}),
-                                    Msg.contact_bug || 'Bug report'
-                                ])
-                            )
-                        )
-                    ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
+                    h('div',
+                        h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
                             h('div.card-body',
                                 h('p', [
                                     h('img', {
@@ -115,8 +76,49 @@ define([
                             )
                         )
                     ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "mailto:" + developerEmail},
+                    h('div',
+                        h('a.card-small', {href : "https://social.weho.st/@cryptpad"},
+                            h('div.card-body',
+                                h('p', [
+                                    h('img', {
+                                        src: '/customize/images/mastodon.svg',
+                                        alt: '',
+                                        'aria-hidden': 'true'
+                                    }),
+                                    'Mastodon'
+                                ])
+                            )
+                        )
+                    ),
+                    h('div',
+                        h('a.card-small', {href : "https://twitter.com/cryptpad"},
+                            h('div.card-body',
+                                h('p', [
+                                    // this is not a typo. adblock plus blocks images with src *twitter* apparently
+                                    h('img', {
+                                        src: '/customize/images/twiitter.svg',
+                                        alt: '',
+                                        'aria-hidden': 'true'}),
+                                    'Twitter'
+                                ])
+                            )
+                        )
+                    ),
+                    h('div',
+                        h('a.card-small', {href : "https://github.com/xwiki-labs/cryptpad/issues/"},
+                            h('div.card-body',
+                                h('p', [
+                                    h('img', {
+                                        src: '/customize/images/github.svg',
+                                        alt: '',
+                                        'aria-hidden': 'true'}),
+                                    Msg.contact_bug || 'Bug report'
+                                ])
+                            )
+                        )
+                    ),
+                    h('div',
+                        h('a.card-small', {href : "mailto:" + developerEmail},
                             h('div.card-body',
                                 h('p', [
                                     h('img', {
diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less
index 0e75e7c15..803dc1a3c 100644
--- a/customize.dist/src/less2/pages/page-contact.less
+++ b/customize.dist/src/less2/pages/page-contact.less
@@ -11,12 +11,19 @@
     .cp-container {
 
         .cp-iconCont {
+            text-align: center;
+            &.align-items-center {
+                justify-content: center;
+            }
             h4 {
                 margin-top: 1.5em;
                 margin-bottom: 1.5em;
             }
+            p.center {
+                text-align: center;
+            }
             div {
-                .card {
+                a.card {
                     .cp-shadow();
                     border-radius: @infopages-radius-L;
                     margin-bottom: 1em;
@@ -53,6 +60,34 @@
                         font-size: 1.3em;
                     }
                 }
+                a.card-small {
+                    .cp-shadow();
+                    border-radius: @infopages-radius-L;
+                    display: inline-block;
+                    background-color: @cp_static-card-bg;
+                    margin: 15px;
+                    .card-body {
+                        padding: 10px;
+                        p {
+                            display: flex;
+                            flex-flow: row;
+                            justify-content: center;
+                            align-items: center;
+                            margin: 0;
+                            height: 100%;
+                            font-size: 1.3em;
+                        }
+                    }
+                    img {
+                        width: 40px;
+                        margin: 0 10px 0 0;
+                    }
+                    &:hover, &:focus {
+                        text-decoration: none;
+                        color: @cryptpad_text_col;
+                        background-color: @cryptpad_color_brand_fadest;
+                    }
+                }
             }
         }
     }

From 54fdf32c36951fc6fefe2ff08c90aaec284a5c92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 13:03:44 +0100
Subject: [PATCH 05/11] Fix color of hovered leftside-categories in light theme

---
 customize.dist/pages/contact.js                     | 1 +
 customize.dist/src/less2/include/colortheme.less    | 4 ++--
 customize.dist/src/less2/include/leftside-menu.less | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/customize.dist/pages/contact.js b/customize.dist/pages/contact.js
index 43c5bcacb..e01100dcb 100644
--- a/customize.dist/pages/contact.js
+++ b/customize.dist/pages/contact.js
@@ -15,6 +15,7 @@ define([
         ].indexOf(Config.adminEmail) === -1;
         var adminMailbox = Config.supportMailbox && LocalStore.isLoggedIn();
 
+        // XXX: existing key to update
         Msg.contact_admin = "Contact the administrators for: {0}"; // XXX DB: add instance title
 
         return h('div#cp-main', [
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index d4c1158e6..5d7374977 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -48,7 +48,7 @@
 @cryptpad_color_black: #000;
 
 @cryptpad_text_col:@cryptpad_color_grey_800;
-@cryptpad_text_col_inv: @cryptpad_color_grey_200;
+@cryptpad_text_col_inv: @cryptpad_color_grey_50;
 
 @cryptpad_color_blue: #326599; // former logo-1
 @cryptpad_color_light_blue: #00b7d8;
@@ -324,7 +324,7 @@
 @cp_usergrid-selected-fg: @cryptpad_color_white;
 
 // Other
-@cp_shadow-color: fade(@cryptpad_color_black, 30%);
+@cp_shadow-color: fade(@cryptpad_color_black, 20%);
 
 // Apps
 @cp_app-bg: @cryptpad_color_white;
diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less
index 830f63334..bb9c86e56 100644
--- a/customize.dist/src/less2/include/leftside-menu.less
+++ b/customize.dist/src/less2/include/leftside-menu.less
@@ -17,7 +17,7 @@
         min-width: 20px;
     }
     &:hover {
-        background: fade(@cryptpad_text_col, 10%);
+        background: @cryptpad_text_col_inv;
     }
     &.cp-leftside-active {
         background: @cp_sidebar-left-active;

From e22de3f699b9c24543ec6391c89b0950833b5ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 13:41:27 +0100
Subject: [PATCH 06/11] Add icon for Accounts app

---
 customize.dist/pages/index.js                  | 5 ++++-
 customize.dist/src/less2/pages/page-index.less | 7 ++++++-
 www/common/application_config_internal.js      | 3 ++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index 9929586e7..c3713655c 100644
--- a/customize.dist/pages/index.js
+++ b/customize.dist/pages/index.js
@@ -153,7 +153,10 @@ define([
                 var sub = h('div.cp-sub-prompt', [
                     h('span', Msg.home_morestorage),
                     // XXX how to link these properly to accounts?
-                    h('button', {href:"/accounts/"}, Msg.features_f_subscribe)
+                    h('a', {href:"/accounts/"}, h('button', [
+                        h('i.fa.fa-ticket'),
+                        Msg.features_f_subscribe
+                    ]))
                 ]);
                 return sub;
             } else {
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 684cce3e0..8ab544127 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -243,7 +243,12 @@
                 font-size: 1.4rem;
                 margin: 10px 0;
                 border-radius: @infopages-radius-L;
-                &:hover {
+                padding: 0.75rem;
+                i {
+                    display: inline;
+                    margin-right: 10px;
+                }
+                &:hover, &:focus {
                     background-color: @cp_static-card-bg;
                     color: @cryptpad_text_col;
                 }
diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js
index 5dfbe3c2f..21c5d0ff3 100644
--- a/www/common/application_config_internal.js
+++ b/www/common/application_config_internal.js
@@ -204,7 +204,8 @@ define(function() {
         admin: 'fa-gears',
         settings: 'fa-gear',
         profile: 'fa-user-circle',
-        support: 'fa-life-ring'
+        support: 'fa-life-ring',
+        accounts: 'fa-ticket'
     };
 
     // Ability to create owned pads and expiring pads through a new pad creation screen.

From a960d20a936342af0ff2f7a4072de6b398ef0f5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 13:41:53 +0100
Subject: [PATCH 07/11] Remove underline in footer buttons

---
 customize.dist/src/less2/include/infopages.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 2d9a06617..5d79665b2 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@@ -14,7 +14,7 @@
     }
 }
 .cp-shadow() {
-    box-shadow: 0px 0px 25px 0px @cp_shadow-color;
+    box-shadow: 0px 0px 20px 0px @cp_shadow-color;
 }
 
 .infopages_main () {
@@ -197,6 +197,7 @@ body.html {
                 &:hover {
                     background-color: @cp_static-card-bg;
                     color: @cryptpad_text_col;
+                    text-decoration: none;
                 }
             }
 

From cf01bd8215f778a5ff2af0c38cc61317c3efe648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 13:53:39 +0100
Subject: [PATCH 08/11] Clean up and lint

---
 customize.dist/pages.js                          | 16 ----------------
 customize.dist/pages/index.js                    |  3 ---
 customize.dist/pages/login.js                    |  2 +-
 .../src/less2/include/colortheme-dark.less       |  2 +-
 customize.dist/src/less2/include/creation.less   |  2 +-
 customize.dist/src/less2/include/drive.less      |  8 ++------
 customize.dist/src/less2/include/dropdown.less   |  1 -
 .../src/less2/include/sidebar-layout.less        |  2 +-
 customize.dist/src/less2/include/toolbar.less    |  4 ----
 customize.dist/src/less2/pages/page-index.less   |  4 ++--
 www/kanban/app-kanban.less                       |  4 ++--
 www/teams/app-team.less                          |  4 ++--
 12 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index d7ba9c6ad..3e1bb1510 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -74,22 +74,6 @@ define([
         return select;
     };
 
-/* // XXX remove ?
-    var footerCol = function (title, L, n) {
-        n = n || 3;
-        return h('div.col-sm-' + n, [
-            h('ul.list-unstyled', [
-                h('li.footer-title', {
-                    'data-localization': title,
-                }, Msg[title])
-                ].concat(L.map(function (l) {
-                    return h('li', [ l ]);
-                }))
-            )
-        ]);
-    };
-*/
-
     var footLink = function (ref, loc, text, icon) {
         if (!ref) { return; }
         var attrs =  {
diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index c3713655c..9f4919d63 100644
--- a/customize.dist/pages/index.js
+++ b/customize.dist/pages/index.js
@@ -112,7 +112,6 @@ define([
         Msg.terms = Msg.footer_tos; //"Terms of Service"; // XXX
         Msg.home_location = "Encrypted data is hosted in {0}"; // XXX
 
-        // XXX DB: this may be wrong, pasted over form pages.js
         var imprintLink = fastLink('imprint');
         var privacyLink = fastLink('privacy');
         var termsLink = fastLink('terms');
@@ -148,11 +147,9 @@ define([
         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),
-                    // XXX how to link these properly to accounts?
                     h('a', {href:"/accounts/"}, h('button', [
                         h('i.fa.fa-ticket'),
                         Msg.features_f_subscribe
diff --git a/customize.dist/pages/login.js b/customize.dist/pages/login.js
index b28c61e13..996936df4 100644
--- a/customize.dist/pages/login.js
+++ b/customize.dist/pages/login.js
@@ -5,7 +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
+    Msg.login_instance = "Connect to your account on {0}"; // XXX DB highlight instance name?
     return function () {
         document.title = Msg.login_login;
         return [h('div#cp-main', [
diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index f1ad36526..777232105 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -175,7 +175,7 @@
 @cp_sidebar-right-bg: @cryptpad_color_grey_900;
 @cp_sidebar-right-fg: @cryptpad_text_col;
 @cp_sidebar-left-active: @cryptpad_color_grey_400;
-@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; // XXX create text_col_inv ?
+@cp_sidebar-left-active-fg: @cryptpad_color_grey_900;
 @cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
 
 // Drive
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index f0189ff0e..e64bd74a3 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -329,7 +329,7 @@
                 max-height: 159px;
                 align-items: center;
                 .cp-creation-template-element {
-                    box-shadow: 0px 0px 5px 1px #00000030; // XXX
+                    box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
                     width: 300px;
                     max-width: calc(100% - 10px);
                     padding: 5px;
diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 705bcce47..2dd9bd46d 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -300,7 +300,6 @@
                     display: none;
                 }
                 input {
-                    //width: ~"calc(100% - 30px)";
                     flex: 1;
                     min-width: 0;
                     padding: 0 10px;
@@ -310,11 +309,8 @@
                 & > span.cp-app-drive-element-row {
                     overflow: hidden;
                     text-overflow: ellipsis;
-                    //min-width: ~"calc(100% + 5px)";
                     .leftside-menu-category_main();
-                    //width: ~"calc(100% + 5px)"; // XXX remove
                     margin: 0;
-                    //margin-bottom: -6px;
                     display: flex;
                     align-items: center;
                     cursor: pointer;
@@ -344,7 +340,7 @@
             margin-top: 10px;
             background-color: @cp_sidebar-left-item-bg;
             border-radius: @variables_radius;
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX
+            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
             .cp-app-drive-tree-root {
                 .fa-trash-o {
                     padding-left: 2px;
@@ -385,7 +381,7 @@
             }
         }
         .cp-app-drive-tree-docs {
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX
+            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
             padding: 2px;
 
             .cp-app-drive-element-row {
diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less
index 0526900ec..5f55cb3e7 100644
--- a/customize.dist/src/less2/include/dropdown.less
+++ b/customize.dist/src/less2/include/dropdown.less
@@ -163,7 +163,6 @@
                 height: 1px;
                 background: @cp_dropdown-bg-active;
                 border: 0 !important;
-                //border-top: 1px solid rgba(0,0,0,.1) !important; // XXX
                 & + hr {
                     display: none;
                 }
diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 39f142742..ff14f3dff 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -31,7 +31,7 @@
                     display: flex;
                     align-items: center;
                     .leftside-menu-category_main();
-                    box-shadow: 0px 0px 5px 1px #00000030; // XXX
+                    box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
                 }
             }
             &.cp-leftside-narrow {
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index dc5c52116..e963dfbcd 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -15,10 +15,7 @@
     @bg-color: @colortheme_apps[default], // color of the toolbar background
 ) {
     @toolbar-bg-color: @bg-color;
-    // XXX Todo: clean up unused variables
     // XXX: check contrasts of app colors used as btn background
-    // @desat-color: desaturate(@bg-color, 20%);
-    // @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
     @toolbar-bg-color-light: lighten(@bg-color, 30%);
     @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
 };
@@ -32,7 +29,6 @@
     --toolbar-bg-color: @toolbar-bg-color;
     --toolbar-bg-color-fade: @toolbar-bg-color-fade;
     --toolbar-bg-color-light: @toolbar-bg-color-light;
-    // --toolbar-bg-color-active: @toolbar-bg-color-active;
 
     .help_main();
     .notifications_main();
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 8ab544127..692ba3e8a 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -48,7 +48,7 @@
         align-self: center;
         align-items: center;
         justify-content: flex-end;
-        @media screen and (max-width: 990px){
+        @media screen and (max-width: 990px) {
             justify-content: center;
         }
     }
@@ -93,7 +93,7 @@
         text-decoration: none;
     }
 
-    .cp-apps{
+    .cp-apps {
         max-width: 575px;
         @media screen and (max-width: 990px) {
             align-self: baseline;
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 2b0f41e87..a1f3553b7 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -36,7 +36,7 @@
             display: flex;
             flex-flow: column;
             border-radius: @variables_radius;
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB
+            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
         }
         color: @cp_kanban-fg;
         button {
@@ -186,7 +186,7 @@
         border-radius: @variables_radius;
         flex-wrap: wrap;
         background: @cp_kanban-item-bg;
-        box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable?
+        box-shadow: 0px 0px 5px 1px #00000030; // XXX  DB: make shadow var
         .tools_unselectable();
         touch-action: none;
         cursor: move;
diff --git a/www/teams/app-team.less b/www/teams/app-team.less
index 615a18284..a8f6dc9ec 100644
--- a/www/teams/app-team.less
+++ b/www/teams/app-team.less
@@ -216,9 +216,9 @@
                     height: 50px;
                     display: inline-block;
                     border-radius: @variables_radius;
-                    background-color: red; // XXX hard coded colors
+                    background-color: @cryptpad_color_red;
                     &.online {
-                        background-color: green;
+                        background-color: @cryptpad_color_green;
                     }
                 }
                 .cp-team-member-name {

From 5f3cee76019a8b117feee40dc65c10f1bbbb55a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 16:32:45 +0100
Subject: [PATCH 09/11] Style offline drive

---
 customize.dist/src/less2/include/colortheme-dark.less |  6 +++---
 customize.dist/src/less2/include/colortheme.less      |  4 ++--
 customize.dist/src/less2/include/drive.less           | 11 +++++++++--
 customize.dist/src/less2/include/forms.less           |  2 ++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 777232105..a8d8af45a 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -193,9 +193,9 @@
 @cp_drive-droppable-bg: @cryptpad_color_grey_700;
 @cp_drive-droppable-fg: @cryptpad_text_col;
 @cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
-@cp_drive-infobox-fg: @cryptpad_text_col;
-@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
-@cp_drive-warnbox-fg: @cryptpad_text_col;
+@cp_drive-infobox-fg: @cryptpad_color_brand_300;
+@cp_drive-warnbox-bg: @cryptpad_color_red_fader;
+@cp_drive-warnbox-fg: @cryptpad_color_light_red;
 @cp_drive-tree-branch: @cryptpad_text_col;
 
 // Contextmenu
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 5d7374977..e36718df9 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -193,8 +193,8 @@
 @cp_drive-droppable-fg: @cryptpad_text_col;
 @cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
 @cp_drive-infobox-fg: @cryptpad_text_col;
-@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
-@cp_drive-warnbox-fg: @cryptpad_text_col;
+@cp_drive-warnbox-bg: @cryptpad_color_light_red_fade;
+@cp_drive-warnbox-fg:  darken(@cp_alerts-danger-fg, 55%);
 @cp_drive-tree-branch: @cryptpad_text_col;
 
 // Contextmenu
diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 2dd9bd46d..c7c5617a9 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -486,6 +486,13 @@
                 font-size: 1.6rem;
             }
         }
+        &.cp-app-drive-readonly { // applied to offline drive (not read-only shared folders)
+            #cp-app-drive-content-folder {
+                opacity: 0.5;
+            }
+
+            // background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
+        }
     }
     #cp-app-drive-content {
         box-sizing: border-box;
@@ -503,8 +510,8 @@
             position: absolute;
             z-index: 50;
         }
-        &.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive?
-            background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
+        &.cp-app-drive-readonly { // XXX DB never applied?
+            // background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
         }
         h1 {
             padding-left: 10px;
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 56460e08a..fa51a3c8c 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -295,9 +295,11 @@
         font-weight: bold;
         text-transform: uppercase;
         cursor: default;
+        border-radius: @variables_radius;
         &.cp-banner-danger {
             background-color: @cp_drive-warnbox-bg;
             color: @cp_drive-warnbox-fg;
+            border: 1px solid @cp_drive-warnbox-fg;
         }
         &.cp-banner-info {
             background-color: @cp_drive-infobox-bg;

From 6098890910df55c02cef67f2b983b052fb4cd282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 16:43:36 +0100
Subject: [PATCH 10/11] Apply rounded corners to filepicker modal

---
 www/secureiframe/app-secure.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/secureiframe/app-secure.less b/www/secureiframe/app-secure.less
index 76956019b..5ffe92cf2 100644
--- a/www/secureiframe/app-secure.less
+++ b/www/secureiframe/app-secure.less
@@ -27,10 +27,11 @@
     #cp-filepicker-dialog {
         display: none;
         .cp-modal {
+            border-radius: @variables_radius_L;
             .cp-filepicker-content {
                 display: flex;
                 flex-wrap: wrap;
-                justify-content: center;
+                justify-content: flex-start;
                 overflow-y: auto;
             }
 
@@ -48,6 +49,7 @@
                 //height: 1em;
                 padding: 10px;
                 margin: 5px;
+                border-radius: @variables_radius;
 
                 display: inline-flex;
                 flex-flow: column;

From 5d6ebe682e285a4fb92362cb0c7bb1f3e44f663b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Mon, 9 May 2022 16:47:35 +0100
Subject: [PATCH 11/11] Round tooltips

---
 customize.dist/src/less2/include/tippy.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less
index 5450d3114..bce6a2414 100644
--- a/customize.dist/src/less2/include/tippy.less
+++ b/customize.dist/src/less2/include/tippy.less
@@ -1,4 +1,5 @@
 @import (reference) './colortheme-all.less';
+@import (reference) './variables.less';
 
 .tippy_main() {
     --LessLoader_require: LessLoader_currentFile();
@@ -6,7 +7,7 @@
 & {
     .tippy-tooltip.cryptpad-theme {
         background-color: @cp_tooltip-bg;
-        border-radius: 0px;
+        border-radius: @variables_radius;
         color: @cp_tooltip-fg;
         overflow-wrap: break-word;
         [x-circle] {