From 3b7298a3307889ee58c58336991ad2d308d77100 Mon Sep 17 00:00:00 2001
From: Robin Linus <robin_woll@capira.de>
Date: Mon, 28 Dec 2015 23:01:57 +0100
Subject: [PATCH] Add social icons to main page

---
 app/elements/x-cards/x-cards.html | 62 ++++++++++++++++++++++++++++---
 app/styles/icons.html             | 16 ++++++++
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/app/elements/x-cards/x-cards.html b/app/elements/x-cards/x-cards.html
index 1b38cdd..5cc7ddf 100644
--- a/app/elements/x-cards/x-cards.html
+++ b/app/elements/x-cards/x-cards.html
@@ -2,6 +2,8 @@
 <link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
 <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
+<link rel="import" href="../../styles/icons.html">
 <dom-module id="x-cards">
     <template>
         <style>
@@ -17,20 +19,68 @@
         }
         
         paper-icon-button {
-            position: absolute;
-            top: 16px;
-            right: 16px;
-            z-index: 2;
-            color: #313131;
+            color: #52524F;
         }
         
         paper-icon-button:hover {
             color: #4285f4;
         }
+        
+        .share {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            z-index: 10;
+        }
+        
+        .share a {
+            color: #52524F;
+            text-decoration: none;
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+        
+        .share a:hover,
+        #btn:hover {
+            color: #4285f4;
+        }
+        
+        @media all and (max-height: 640px) {
+            .github {
+                display: none;
+            }
+        }
         </style>
         <div id="placeholder"></div>
         <div id="container">
-            <paper-icon-button id="btn" icon="chat:info-outline" on-tap="_switch"></paper-icon-button>
+            <div class="share">
+                <a href="https://twitter.com/capira42" target="_blank">
+                    <iron-icon icon="chat:twitter"></iron-icon>
+                    <paper-tooltip for="" position="bottom" offset="14">
+                        Contact us on Twitter!
+                    </paper-tooltip>
+                </a>
+                <a href="https://www.facebook.com/snapdrop.net/" target="_blank">
+                    <iron-icon icon="chat:facebook"></iron-icon>
+                    <paper-tooltip for="" position="bottom" offset="14">
+                        Like us on Facebook!
+                    </paper-tooltip>
+                </a>
+                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FDAHZJH3228D6" target="_blank">
+                    <iron-icon icon="chat:local-cafe"></iron-icon>
+                    <paper-tooltip for="" position="bottom" offset="14">
+                        You like Snapdrop?
+                        <br> Buy me a cup of coffee!
+                    </paper-tooltip>
+                </a>
+                <a href="https://github.com/capira12/snapdrop" target="_blank" class="github">
+                    <iron-icon icon="chat:github" ></iron-icon>
+                    <paper-tooltip for="" position="bottom" offset="14">
+                        Get involved!
+                    </paper-tooltip>
+                </a>
+                <paper-icon-button id="btn" icon="chat:info-outline" on-tap="_switch"></paper-icon-button>
+            </div>
             <content select="div"></content>
         </div>
     </template>
diff --git a/app/styles/icons.html b/app/styles/icons.html
index dc36ed8..c3fb4fd 100644
--- a/app/styles/icons.html
+++ b/app/styles/icons.html
@@ -38,6 +38,22 @@
             <g id="close">
                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
             </g>
+            <g id="local-cafe">
+                <path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM2 21h18v-2H2v2z" />
+            </g>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="twitter" x="0px" y="0px" width="430.117px" height="430.117px" viewBox="0 0 430.117 430.117" style="enable-background:new 0 0 430.117 430.117;" xml:space="preserve">
+                <g>
+                    <path id="twitter1" d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876   c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404   c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067   c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769   C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192   c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178   c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947   c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828   c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39   C414.973,206.142,393.023,203.486,381.384,198.639z" />
+                </g>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="facebook" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
+                <path id="Facebook__x28_alt_x29_" d="M90,15.001C90,7.119,82.884,0,75,0H15C7.116,0,0,7.119,0,15.001v59.998   C0,82.881,7.116,90,15.001,90H45V56H34V41h11v-5.844C45,25.077,52.568,16,61.875,16H74v15H61.875C60.548,31,59,32.611,59,35.024V41   h15v15H59v34h16c7.884,0,15-7.119,15-15.001V15.001z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="github" x="0px" y="0px" width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;" xml:space="preserve">
+<g>
+    <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z"/>
+
+</svg>
         </defs>
     </svg>
 </iron-iconset-svg>