feat: admin contribute - donate options

client/components/admin/admin-contribute.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-container(fluid, grid-list-lg)
+  v-container.admin-contribute(fluid, grid-list-lg)
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
@@ -16,20 +16,58 @@
             .body-1.pt-3.pl-3 {{ $t('admin:contribute.needYourHelp') }}
             v-divider.mt-3
             v-subheader {{ $t('admin:contribute.fundOurWork') }}
-            .body-1.pl-3 {{ $t('admin:contribute.patreon') }}
-            v-card-actions.ml-2
-              a(href='https://www.patreon.com/bePatron?u=16744039', :title='$t(`admin:contribute.becomeAPatron`)')
-                img(src='/img/become_a_patron_button.png', :alt='$t(`admin:contribute.becomeAPatron`)' style='width:200px;')
-            .body-1.mt-3.pl-3 {{ $t('admin:contribute.openCollective') }}
-            v-card-actions.ml-2
-              v-btn(outline, :color='darkMode ? `blue lighten-1` : `primary`', href='https://opencollective.com/wikijs')
-                v-icon(left) local_atm
-                span {{ $t('admin:contribute.makeADonation') }}
-            .body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
-            v-card-actions.ml-2
-              v-btn(outline, :color='darkMode ? `blue lighten-1` : `primary`', href='https://wikijs.threadless.com')
-                v-icon(left) shopping_cart
-                span {{ $t('admin:contribute.shop') }}
+            v-tabs.mx-3.radius-7.admin-contribute-tabs(
+              centered
+              fixed-tabs
+              color='primary'
+              dark
+              slider-color='#FFF'
+              icons-and-text
+              )
+              v-tab
+                span Patreon
+                img(src='/svg/icon-patreon.svg')
+              v-tab
+                span OpenCollective
+                img(src='/svg/icon-opencollective.svg')
+              v-tab
+                span PayPal
+                img(src='/svg/icon-paypal.svg')
+              v-tab
+                span Ethereum
+                img(src='/svg/icon-ethereum.svg')
+              v-tab
+                span T-Shirts
+                img(src='/svg/icon-t-shirt.svg')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-1.pa-3 {{ $t('admin:contribute.patreon') }}
+                a.ml-3(href='https://www.patreon.com/bePatron?u=16744039', :title='$t(`admin:contribute.becomeAPatron`)')
+                  img(src='/img/become_a_patron_button.png', :alt='$t(`admin:contribute.becomeAPatron`)' style='width:200px;')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-1.pa-3 {{ $t('admin:contribute.openCollective') }}
+                a.ml-3(href='https://opencollective.com/wikijs/donate', :title='$t(`admin:contribute.makeADonation`)')
+                  img(src='https://opencollective.com/webpack/donate/button@2x.png?color=blue', :alt='$t(`admin:contribute.makeADonation`)' style='width:300px;')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-1.pa-3 {{ $t('admin:contribute.paypal') }}
+                .ml-3
+                  form(action='https://www.paypal.com/cgi-bin/webscr', method='post', target='_top')
+                    input(type='hidden', name='cmd', value='_s-xclick')
+                    input(type='hidden', name='hosted_button_id', value='FLV5X255Z9CJU')
+                    input(type='image', src='/img/paypal_button.png', border='0', name='submit', title='PayPal - The safer, easier way to pay online!', alt='Donate with PayPal button')
+                    img(alt='', border='0', src='https://www.paypal.com/en_CA/i/scr/pixel.gif', width='1', height='1')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-1.pa-3 {{ $t('admin:contribute.ethereum') }}
+                .ml-3
+                  .admin-contribute-ethaddress
+                    strong Ethereum Address
+                    span 0xE1d55C19aE86f6Bcbfb17e7f06aCe96BdBb22Cb5
+                  div: img(src='/img/eth_donate_qr.png')
+              v-tab-item(:transition='false', :reverse-transition='false')
+                .body-1.pa-3 {{ $t('admin:contribute.tshirts') }}
+                v-card-actions.ml-2
+                  v-btn(outline, :color='darkMode ? `blue lighten-1` : `primary`', href='https://wikijs.threadless.com', large)
+                    v-icon(left) shopping_cart
+                    span {{ $t('admin:contribute.shop') }}
             v-divider.mt-3
             v-subheader {{ $t('admin:contribute.contribute') }}
             .body-1.pl-3
@@ -203,9 +241,31 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-ul {
-  margin-left: 1rem;
-  list-style-type: square;
+<style lang='scss'>
+.admin-contribute {
+
+  &-tabs {
+    .v-tabs__item img {
+      height: 24px;
+      margin-bottom: 5px;
+    }
+  }
+
+  &-ethaddress {
+    display: inline-block;
+    margin-bottom: 12px;
+    border-radius: 7px;
+    background-color: mc('grey', '100');
+    padding: 12px;
+
+    strong {
+      display: block;
+    }
+  }
+
+  ul {
+    margin-left: 1rem;
+    list-style-type: square;
+  }
 }
 </style>

client/static/svg/icon-ethereum.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 192 192" width="48px" height="48px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"/><g fill="#ffffff"><g id="surface1"><path d="M44,96l56,-88l56,88l-56,32z"/><path d="M100,8l56,88l-56,32z"/><path d="M44,108l56,32l56,-32l-56,76z"/><path d="M100,140l56,-32l-56,76z"/><path d="M44,96l56,-24l56,24l-56,32z"/><path d="M100,72l56,24l-56,32z"/></g></g></g></svg>

client/static/svg/icon-opencollective.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="288px" height="288px" viewBox="0 0 288 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>51D3DEA8-C839-4EC1-832A-7EFA54D4C72F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M188,21.3513568 L156.970455,52.4353616 C145.945446,46.3308604 133.267763,42.8562859 119.78051,42.8562859 C77.2541056,42.8562859 42.7778981,77.3956688 42.7778981,120 C42.7778981,162.604331 77.2541056,197.143714 119.78051,197.143714 C133.267763,197.143714 145.945446,193.66914 156.970455,187.564638 L188,218.648643 C168.639768,232.11022 145.131085,240 119.78051,240 C53.6280593,240 0,186.273671 0,120 C0,53.7263293 53.6280593,0 119.78051,0 C145.131085,0 168.639768,7.88977984 188,21.3513568 Z M218.82592,51 C232.175728,70.2979426 240,93.730988 240,119 C240,144.269012 232.175728,167.704445 218.82592,187 L188,156.072677 C194.053817,145.08314 197.499542,132.443859 197.499542,119 C197.499542,105.556141 194.053817,92.9192472 188,81.92971 L218.82592,51 Z" id="path-1"></path>
+        <filter x="-15.0%" y="-15.0%" width="130.0%" height="130.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.639215686   0 0 0 0 0.705882353   0 0 0 0 0.8  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.766415308">
+        <g id="Homepage---XL,-L,-M-(hd-desktop,-desktop,-hd-laptop,-laptop)" transform="translate(-1567.000000, -5467.000000)">
+            <g id="JOIN-MOVEMENT" transform="translate(0.000000, 1964.000000)">
+                <g id="::-stats" transform="translate(0.000000, 3447.000000)">
+                    <g id="::-stat-(chapters)" transform="translate(1591.000000, 80.000000)">
+                        <g id="symbol">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

client/static/svg/icon-patreon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 192 192" width="24px" height="24px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"/><g fill="#ffffff"><path d="M16,24v144h32v-144zM120,24c-30.872,0 -56,25.128 -56,56c0,30.872 25.128,56 56,56c30.872,0 56,-25.128 56,-56c0,-30.872 -25.128,-56 -56,-56z"/></g></g></svg>

client/static/svg/icon-paypal.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 192 192" width="26px" height="26px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"/><g fill="#ffffff"><g id="surface1"><path d="M34.84615,0.46154l-33.46154,153.23077h44.30769l10.84615,-50.76923h31.61538c30.23077,0 55.32693,-18.63461 62.07692,-50.30769c7.67308,-35.85577 -18.05769,-52.15385 -40.15385,-52.15385zM72.23077,31.61538h21.69231c10.81731,0 18.17308,9.375 15,21c-2.71153,11.65385 -14.10577,21 -25.38462,21h-20.76923zM166.38462,40.61538c-0.02884,4.61538 -0.46154,9.57692 -1.61538,15c-3,14.10577 -9.05769,26.45192 -17.53846,36.23077c-3.57692,10.52884 -14.19231,18.69231 -24.69231,18.69231h-0.46154c-10.18269,4.64423 -21.54808,7.15385 -33.92308,7.15385h-19.61538l-8.30769,39l-2.53846,11.76923h-12.23077l-4.84615,22.15385h44.07692l10.84615,-50.76923h31.61538c30.23077,0 55.52884,-18.63461 62.30769,-50.30769c5.68269,-26.625 -7.125,-42.51923 -23.07692,-48.92308z"/></g></g></g></svg>

client/static/svg/icon-t-shirt.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 192 192" width="24px" height="24px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,192v-192h192v192z" fill="none"/><g fill="#ffffff"><g id="surface1"><path d="M96,0c-15.21875,0 -24.6875,3.65625 -25.5,4l-22.5,7.25c-10.40625,3.1875 -19.09375,9.4375 -25.5,18.25l-22.5,42.5l27.25,16.75l12.75,-24v119.25c0,4.40625 25.0625,8 56,8c30.9375,0 56,-3.59375 56,-8v-119.25l12.75,24l27.25,-16.75l-22.5,-42.5c-6.40625,-8.8125 -15.15625,-15.0625 -24.75,-18.25l-22.25,-7.25c-0.1875,0 -1.03125,1.3125 -2,2.75l1.25,-2.5c0,0 -9.84375,-4.25 -25.75,-4.25zM96,8c11.40625,0 18.4375,2.25 21,3.25c-4.46875,5.75 -11.40625,12.75 -21,12.75c-9.40625,0 -16.40625,-7.0625 -20.75,-12.75c2.875,-1.0625 9.875,-3.25 20.75,-3.25z"/></g></g></g></svg>