From 9d425c36d75ca01a523c6e3910878c8a4abcc31e Mon Sep 17 00:00:00 2001
From: Victor Carli <victorcarlibr@gmail.com>
Date: Fri, 11 Oct 2019 14:10:31 -0300
Subject: [PATCH 1/2] add button like and deslike

---
 src/components/DeslikeCollab.svelte     | 48 +++++++++++++++++++++++++
 src/components/LikeCollab.svelte        | 44 +++++++++++++++++++++++
 src/routes/_layout.svelte               |  4 +++
 static/img/dark/icon/deslike_button.svg |  3 ++
 static/img/dark/icon/like_button.svg    |  3 ++
 5 files changed, 102 insertions(+)
 create mode 100644 src/components/DeslikeCollab.svelte
 create mode 100644 src/components/LikeCollab.svelte
 create mode 100755 static/img/dark/icon/deslike_button.svg
 create mode 100755 static/img/dark/icon/like_button.svg

diff --git a/src/components/DeslikeCollab.svelte b/src/components/DeslikeCollab.svelte
new file mode 100644
index 0000000..e006258
--- /dev/null
+++ b/src/components/DeslikeCollab.svelte
@@ -0,0 +1,48 @@
+<script>
+    import IconCollab from '../components/IconCollab.svelte'
+	let deslikes = 0
+
+    function handleClick() {
+        deslikes += 1;
+    }
+</script>
+
+<style>
+    button {
+        height: 40px;
+        width: 100px;
+        border-radius: 20px;
+        border: none;
+        cursor: pointer;
+        padding: 5px 15px;
+        background: rgb(255, 252, 238, 0.1);
+        margin: 20px 0 20px 16px;
+    }
+
+    button:last-child {
+        margin: 20px 0 0 5px;
+    }
+
+    button > div {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    button > div > p {
+        color: #FFF;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+        font-family: Comfortaa;
+    }
+</style>
+
+<button on:click={handleClick}> 
+    <div>
+        <IconCollab
+        name="deslike_button"
+        alt="Deslike Button" />
+        <p>{deslikes}</p>
+    </div>
+</button>
\ No newline at end of file
diff --git a/src/components/LikeCollab.svelte b/src/components/LikeCollab.svelte
new file mode 100644
index 0000000..c6b2cfc
--- /dev/null
+++ b/src/components/LikeCollab.svelte
@@ -0,0 +1,44 @@
+<script>
+    import IconCollab from '../components/IconCollab.svelte'
+	let likes = 0
+
+    function handleClick() {
+        likes += 1;
+    }
+</script>
+
+<style>
+    button {
+        height: 40px;
+        width: 100px;
+        border-radius: 20px;
+        border: none;
+        cursor: pointer;
+        padding: 5px 15px;
+        background: rgb(255, 252, 238, 0.1);
+        margin: 20px 0 20px 16px;
+    }
+
+    button > div {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    button > div > p {
+        color: #FFF;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+        font-family: Comfortaa;
+    }
+</style>
+
+<button on:click={handleClick}> 
+    <div>
+        <IconCollab
+        name="like_button"
+        alt="Like Button" />
+        <p>{likes}</p>
+    </div>
+</button>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 330b435..b14f131 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,5 +1,7 @@
 <script>
   import HeaderCollab from '../containers/HeaderCollab.svelte'
+  import LikeCollab from '../components/LikeCollab.svelte'
+  import DeslikeCollab from '../components/DeslikeCollab.svelte'
 
   export let segment
 </script>
@@ -12,4 +14,6 @@
 
 <main>
   <slot />
+  <LikeCollab />
+  <DeslikeCollab />
 </main>
diff --git a/static/img/dark/icon/deslike_button.svg b/static/img/dark/icon/deslike_button.svg
new file mode 100755
index 0000000..e550309
--- /dev/null
+++ b/static/img/dark/icon/deslike_button.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.15999 14.455L12.3075 10.3C12.585 10.0225 12.7425 9.64 12.7425 9.2425V1.75C12.7425 0.925 12.0675 0.25 11.2425 0.25H4.49999C3.89999 0.25 3.35999 0.61 3.12749 1.1575L0.682486 6.865C0.0449857 8.35 1.13249 10 2.74499 10H6.98249L6.26999 13.435C6.19499 13.81 6.30749 14.1925 6.57749 14.4625C7.01999 14.8975 7.72499 14.8975 8.15999 14.455ZM15.75 0.25C14.925 0.25 14.25 0.925 14.25 1.75V7.75C14.25 8.575 14.925 9.25 15.75 9.25C16.575 9.25 17.25 8.575 17.25 7.75V1.75C17.25 0.925 16.575 0.25 15.75 0.25Z" fill="#C37472"/>
+</svg>
diff --git a/static/img/dark/icon/like_button.svg b/static/img/dark/icon/like_button.svg
new file mode 100755
index 0000000..9330d19
--- /dev/null
+++ b/static/img/dark/icon/like_button.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.84 0.545007L5.685 4.70001C5.4075 4.97751 5.25 5.36001 5.25 5.75751V13.25C5.25 14.075 5.925 14.75 6.75 14.75H13.5C14.1 14.75 14.64 14.39 14.88 13.8425L17.325 8.13501C17.955 6.65001 16.8675 5.00001 15.255 5.00001H11.0175L11.73 1.56501C11.805 1.19001 11.6925 0.807507 11.4225 0.537507C10.98 0.102507 10.275 0.102507 9.84 0.545007ZM2.25 14.75C3.075 14.75 3.75 14.075 3.75 13.25V7.25001C3.75 6.42501 3.075 5.75001 2.25 5.75001C1.425 5.75001 0.75 6.42501 0.75 7.25001V13.25C0.75 14.075 1.425 14.75 2.25 14.75Z" fill="#C2F9BB"/>
+</svg>

From f803d818217211ab84f2ff97d6d72334fd8452c2 Mon Sep 17 00:00:00 2001
From: Victor Carli <victorcarlibr@gmail.com>
Date: Sat, 12 Oct 2019 17:19:15 -0300
Subject: [PATCH 2/2] correcting class naming in CSS

---
 ...likeCollab.svelte => DislikeCollab.svelte} | 24 ++++++++++---------
 src/components/LikeCollab.svelte              | 14 ++++++-----
 src/routes/_layout.svelte                     |  4 ++--
 ...{deslike_button.svg => dislike_button.svg} |  0
 4 files changed, 23 insertions(+), 19 deletions(-)
 rename src/components/{DeslikeCollab.svelte => DislikeCollab.svelte} (65%)
 rename static/img/dark/icon/{deslike_button.svg => dislike_button.svg} (100%)

diff --git a/src/components/DeslikeCollab.svelte b/src/components/DislikeCollab.svelte
similarity index 65%
rename from src/components/DeslikeCollab.svelte
rename to src/components/DislikeCollab.svelte
index e006258..13d6b1f 100644
--- a/src/components/DeslikeCollab.svelte
+++ b/src/components/DislikeCollab.svelte
@@ -1,14 +1,14 @@
 <script>
     import IconCollab from '../components/IconCollab.svelte'
-	let deslikes = 0
+	let dislikes = 0
 
     function handleClick() {
-        deslikes += 1;
+        dislikes += 1;
     }
 </script>
 
 <style>
-    button {
+    .dislike-button {
         height: 40px;
         width: 100px;
         border-radius: 20px;
@@ -19,17 +19,17 @@
         margin: 20px 0 20px 16px;
     }
 
-    button:last-child {
+    .dislike-button:last-child {
         margin: 20px 0 0 5px;
     }
 
-    button > div {
+    .dislike-button > .items {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
     }
 
-    button > div > p {
+    .dislike-button > .items > .text {
         color: #FFF;
         font-size: 16px;
         line-height: 24px;
@@ -38,11 +38,13 @@
     }
 </style>
 
-<button on:click={handleClick}> 
-    <div>
+<button 
+    on:click={handleClick} 
+    class="dislike-button"> 
+    <div class="items">
         <IconCollab
-        name="deslike_button"
-        alt="Deslike Button" />
-        <p>{deslikes}</p>
+        name="dislike_button"
+        alt="Dislike Button" />
+        <p class="text">{dislikes}</p>
     </div>
 </button>
\ No newline at end of file
diff --git a/src/components/LikeCollab.svelte b/src/components/LikeCollab.svelte
index c6b2cfc..446ada9 100644
--- a/src/components/LikeCollab.svelte
+++ b/src/components/LikeCollab.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <style>
-    button {
+    .like-button {
         height: 40px;
         width: 100px;
         border-radius: 20px;
@@ -19,13 +19,13 @@
         margin: 20px 0 20px 16px;
     }
 
-    button > div {
+    .like-button > .items {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
     }
 
-    button > div > p {
+    .like-button > .items > .text {
         color: #FFF;
         font-size: 16px;
         line-height: 24px;
@@ -34,11 +34,13 @@
     }
 </style>
 
-<button on:click={handleClick}> 
-    <div>
+<button 
+    on:click={handleClick}
+    class="like-button"> 
+    <div class="items">
         <IconCollab
         name="like_button"
         alt="Like Button" />
-        <p>{likes}</p>
+        <p class="text">{likes}</p>
     </div>
 </button>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index b14f131..de7536b 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import HeaderCollab from '../containers/HeaderCollab.svelte'
   import LikeCollab from '../components/LikeCollab.svelte'
-  import DeslikeCollab from '../components/DeslikeCollab.svelte'
+  import DislikeCollab from '../components/DislikeCollab.svelte'
 
   export let segment
 </script>
@@ -15,5 +15,5 @@
 <main>
   <slot />
   <LikeCollab />
-  <DeslikeCollab />
+  <DislikeCollab />
 </main>
diff --git a/static/img/dark/icon/deslike_button.svg b/static/img/dark/icon/dislike_button.svg
similarity index 100%
rename from static/img/dark/icon/deslike_button.svg
rename to static/img/dark/icon/dislike_button.svg