From 2a492b416231b3c7e6483d2dea3f9b2935470d07 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Thu, 20 May 2021 23:41:15 +0530
Subject: [PATCH] Chore: Refactors view note component (#2310)

---
 .../assets/scss/_foundation-custom.scss       |  4 +-
 .../assets/scss/_foundation-settings.scss     |  2 +-
 .../dashboard/contacts/components/AddNote.vue | 27 ++++++-------
 .../contacts/components/ContactNote.vue       | 39 +++++++------------
 4 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 61ead3492..d8909a181 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -5,8 +5,10 @@
   &.round {
     border-radius: 1000px;
   }
+}
 
-
+.card {
+  padding: var(--space-small);
 }
 
 .button-wrapper .button.link.grey-btn {
diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index dc39751f0..0cd3f66d3 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -287,7 +287,7 @@ $card-font-color: $body-font-color;
 $card-divider-background: $light-gray;
 $card-border: 1px solid var(--color-border);
 $card-shadow: var(--shadow-small);
-$card-border-radius: var(--border-radius-medium);
+$card-border-radius: var(--border-radius-normal);
 $card-padding: var(--space-small);
 $card-margin: $global-margin;
 
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue
index 0e5fd334f..2fe918924 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue
@@ -46,21 +46,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wrap {
-  .input--note {
-    font-size: var(--font-size-mini);
-    border-color: transparent;
-    margin: 0;
-    resize: none;
-    min-height: var(--space-larger);
-  }
+.input--note {
+  font-size: var(--font-size-mini);
+  border-color: transparent;
+  margin-bottom: var(--space-small);
+  padding: 0;
+  resize: none;
+  min-height: var(--space-larger);
+}
 
-  .footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-    padding: var(--space-small);
-    padding-top: 0;
-  }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue
index 9be5649b3..f3e718464 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="note-wrap">
-    <div class="text">
+  <div class="card note-wrap">
+    <p class="note__content">
       {{ note }}
-    </div>
+    </p>
     <div class="footer">
       <div class="meta">
         <div :title="userName">
@@ -19,7 +19,6 @@
           icon="ion-compose"
           color-scheme="secondary"
           class-names="button--emoji"
-          class="button-wrap"
           @click="onEdit"
         />
         <woot-button
@@ -28,7 +27,6 @@
           icon="ion-trash-b"
           color-scheme="secondary"
           class-names="button--emoji"
-          class="button-wrap"
           @click="onDelete"
         />
       </div>
@@ -90,17 +88,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.note-wrap {
-  padding: var(--space-small);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-small);
-  margin-bottom: var(--space-smaller);
-
-  .text {
-    padding-bottom: var(--space-small);
-    font-size: var(--font-size-mini);
-    color: var(--color-body);
-  }
+.note__content {
+  font-size: var(--font-size-mini);
+  margin-bottom: var(--space-small);
 }
 
 .footer {
@@ -119,19 +109,20 @@ export default {
     }
   }
   .actions {
-    display: none;
+    display: flex;
+    visibility: hidden;
+  }
+
+  .button--emoji {
+    margin-left: var(--space-small);
+    height: var(--space-medium);
+    width: var(--space-medium);
   }
 }
 
 .note-wrap:hover {
   .actions {
-    display: flex;
-
-    .button-wrap {
-      margin-right: var(--space-small);
-      height: var(--space-medium);
-      width: var(--space-medium);
-    }
+    visibility: visible;
   }
 }
 </style>