Redesign contact page

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,24 +60,24 @@ 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',
+                        h('a.card-small', {href : "https://matrix.to/#/#cryptpad:matrix.xwiki.com"},
                             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',
+                                        src: '/customize/images/sayhi.svg',
                                         alt: '',
-                                        'aria-hidden': 'true'}),
-                                    'Twitter'
+                                        'aria-hidden': 'true'
+                                    }),
+                                    Msg.contact_chat || 'Chat'
                                 ])
                             )
                         )
                     ),
-                    h('div.col-12.col-sm-6.col-md-3.col-lg-3',
-                        h('a.card', {href : "https://social.weho.st/@cryptpad"},
+                    h('div',
+                        h('a.card-small', {href : "https://social.weho.st/@cryptpad"},
                             h('div.card-body',
                                 h('p', [
                                     h('img', {
@@ -88,35 +90,35 @@ define([
                             )
                         )
                     ),
-                    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',
+                        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/github.svg',
+                                        src: '/customize/images/twiitter.svg',
                                         alt: '',
                                         'aria-hidden': 'true'}),
-                                    Msg.contact_bug || 'Bug report'
+                                    'Twitter'
                                 ])
                             )
                         )
                     ),
-                    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://github.com/xwiki-labs/cryptpad/issues/"},
                             h('div.card-body',
                                 h('p', [
                                     h('img', {
-                                        src: '/customize/images/sayhi.svg',
+                                        src: '/customize/images/github.svg',
                                         alt: '',
-                                        'aria-hidden': 'true'
-                                    }),
-                                    Msg.contact_chat || 'Chat'
+                                        '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 : "mailto:" + developerEmail},
+                    h('div',
+                        h('a.card-small', {href : "mailto:" + developerEmail},
                             h('div.card-body',
                                 h('p', [
                                     h('img', {

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;
+                    }
+                }
             }
         }
     }