From b9f7a681d36537c0c2e8f32bd2caacea12aab649 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 11 Sep 2019 17:36:26 +0200
Subject: [PATCH] Fix buttons with icons

---
 src/components/ContentSelection.vue   | 24 ++++++++++++++++++++----
 src/components/icons/IconInstance.vue | 16 +++++++++-------
 src/components/icons/IconVideo.vue    |  2 +-
 src/scss/main.scss                    |  8 ++++++--
 src/views/Home.vue                    |  7 +++++--
 5 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue
index bf26373..1844049 100644
--- a/src/components/ContentSelection.vue
+++ b/src/components/ContentSelection.vue
@@ -4,18 +4,18 @@
     <div class="left">
       <img :src="thumbnailUrl" alt="thumbnail"/>
 
-      <button class="jpt-button jpt-button-light">
-        <span v-if="type === 'video'">
+      <button class="jpt-button jpt-button-medium">
+        <span class="span-wrapper" v-if="type === 'video'">
           <icon-video></icon-video>
           Watch the video
         </span>
 
-        <span v-if="type === 'channel'">
+        <span class="span-wrapper" v-if="type === 'channel'">
           <icon-channel></icon-channel>
           Discover the channel
         </span>
 
-        <span v-if="type === 'instance'">
+        <span class="span-wrapper" v-if="type === 'instance'">
           <icon-instance></icon-instance>
           Go on the instance
         </span>
@@ -66,6 +66,22 @@
       margin-top: 30px;
       width: 250px;
       height: 35px;
+
+      .span-wrapper {
+        display: block;
+        width: 100%;
+        position: relative;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left: 24px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+      }
     }
   }
 
diff --git a/src/components/icons/IconInstance.vue b/src/components/icons/IconInstance.vue
index 0436d59..b044b91 100644
--- a/src/components/icons/IconInstance.vue
+++ b/src/components/icons/IconInstance.vue
@@ -1,14 +1,16 @@
 <template>
-  <svg width="41px" height="20px" viewBox="0 0 41 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
-       xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="icone/instance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path
-        d="M26.5555556,17.7777778 L26.5555556,9.86666667 L27.6666667,10.9777778 L27.6666667,17.7777778 C27.6666667,18.3914275 27.1692053,18.8888889 26.5555556,18.8888889 L22.6666667,18.8888889 L22.6666667,13.3333333 L19.3333333,13.3333333 L19.3333333,18.8888889 L15.4444444,18.8888889 C14.8307947,18.8888889 14.3333333,18.3914275 14.3333333,17.7777778 L14.3333333,11.1111111 L15.4444444,10 L15.4444444,17.7777778 L18.2222222,17.7777778 L18.2222222,12.2222222 L23.7777778,12.2222222 L23.7777778,17.7777778 L26.5555556,17.7777778 Z M29.7277778,9.60555556 L29.7222222,9.61111111 C29.9109871,9.83153349 29.8982957,10.1601079 29.6930907,10.3653129 C29.4878857,10.5705179 29.1593113,10.5832093 28.9388889,10.3944444 L21,2.45 L13.0611111,10.3888889 C12.8406887,10.5776538 12.5121143,10.5649624 12.3069093,10.3597573 C12.1017043,10.1545523 12.0890129,9.82597793 12.2777778,9.60555556 L20.6111111,1.27222222 C20.8277986,1.05682023 21.177757,1.05682023 21.3944444,1.27222222 L29.7277778,9.60555556 Z"
-        id="Mask" fill="#000000" fill-rule="nonzero"></path>
+  <svg width="18" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
+    <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
+    <g class="currentLayer" style=""><title>Layer 1</title>
+      <g id="icone/instance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="">
+        <path
+          d="M14.41136646270752,16.667107820510864 L14.41136646270752,8.755995988845825 L15.522477149963379,9.867106676101685 L15.522477149963379,16.667107820510864 C15.522477149963379,17.280757188796997 15.025015830993652,17.778218507766724 14.41136646270752,17.778218507766724 L10.522477149963379,17.778218507766724 L10.522477149963379,12.222662210464478 L7.189145088195801,12.222662210464478 L7.189145088195801,17.778218507766724 L3.30025577545166,17.778218507766724 C2.686605453491211,17.778218507766724 2.1891441345214844,17.280757188796997 2.1891441345214844,16.667107820510864 L2.1891441345214844,10.000439882278442 L3.30025577545166,8.889329195022583 L3.30025577545166,16.667107820510864 L6.078032493591309,16.667107820510864 L6.078032493591309,11.111551523208618 L11.633589744567871,11.111551523208618 L11.633589744567871,16.667107820510864 L14.41136646270752,16.667107820510864 zM17.58358860015869,8.494884729385376 L17.57803249359131,8.500439882278442 C17.766798973083496,8.720862627029419 17.75410747528076,9.049436807632446 17.548901557922363,9.254641771316528 C17.343697547912598,9.45984673500061 17.015122413635254,9.472538232803345 16.794699668884277,9.28377366065979 L8.85581111907959,1.3393292427062988 L0.9169225692749023,9.278218507766724 C0.6964998245239258,9.466983079910278 0.36792564392089844,9.454291582107544 0.1627206802368164,9.249086618423462 C-0.042484283447265625,9.04388165473938 -0.05517578125,8.715307474136353 0.1335887908935547,8.494884729385376 L8.46692180633545,0.1615513563156128 C8.683609962463379,-0.053850531578063965 9.033568382263184,-0.053850531578063965 9.25025463104248,0.1615513563156128 L17.58358860015869,8.494884729385376 z"
+          id="Mask" fill="#000000" fill-rule="nonzero"/>
+      </g>
     </g>
   </svg>
 </template>
 
 <script>
-export default {}
+  export default {}
 </script>
diff --git a/src/components/icons/IconVideo.vue b/src/components/icons/IconVideo.vue
index 43f5ea0..43b8f00 100644
--- a/src/components/icons/IconVideo.vue
+++ b/src/components/icons/IconVideo.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
     <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
 
     <g class="currentLayer" style=""><title>Layer 1</title>
diff --git a/src/scss/main.scss b/src/scss/main.scss
index abfe21a..888d230 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -78,13 +78,17 @@ main {
   background-color: transparent;
   align-items: center;
 
-  .icon {
+  svg {
     width: 18px;
     height: 18px;
   }
 }
 
-.jpt-button-light {
+.jpt-big-button-icon svg {
+  margin-right: 30px;
+}
+
+.jpt-button-medium {
   border-width: 2px;
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e6b20b4..946603a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,13 +14,13 @@
       </div>
 
       <div class="buttons-row">
-        <button class="jpt-button what-is-peertube">
+        <button class="jpt-button jpt-big-button-icon what-is-peertube">
           <icon-instance></icon-instance>
 
           <span v-translate>What is PeerTube?</span>
         </button>
 
-        <button class="jpt-button instances-list">
+        <button class="jpt-button jpt-big-button-icon instances-list">
           <icon-instance></icon-instance>
 
           <translate>See the instances list</translate>
@@ -325,7 +325,10 @@
   }
 
   .jpt-button-legend {
+    margin-top: 5px;
     max-width: 330px;
+    font-size: 13px;
+    text-align: center;
   }
 
   .presentation {