Chore: Refactor add note to use foundation card classes (#2308)

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -285,10 +285,10 @@ $callout-link-tint: 30%;
 $card-background: $white;
 $card-font-color: $body-font-color;
 $card-divider-background: $light-gray;
-$card-border: 1px solid $light-gray;
-$card-shadow: none;
-$card-border-radius: $global-radius;
-$card-padding: $global-padding;
+$card-border: 1px solid var(--color-border);
+$card-shadow: var(--shadow-small);
+$card-border-radius: var(--border-radius-medium);
+$card-padding: var(--space-small);
 $card-margin: $global-margin;
 
 // 15. Close Button

app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="wrap">
-    <div class="input-wrap">
-      <textarea
-        v-model="inputText"
-        :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-        class="input--note"
-        @keydown.enter.shift.exact="onAdd"
-      >
-      </textarea>
-    </div>
+  <div class="card">
+    <textarea
+      v-model="inputText"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      class="input--note"
+      @keydown.enter.shift.exact="onAdd"
+    />
     <div class="footer">
       <woot-button
         size="tiny"
         color-scheme="warning"
         :title="$t('NOTES.ADD.TITLE')"
         :is-disabled="buttonDisabled"
-        class="button-wrap"
         @click="onAdd"
       >
         {{ $t('NOTES.ADD.BUTTON') }}
@@ -25,12 +21,7 @@
 </template>
 
 <script>
-import WootButton from 'dashboard/components/ui/WootButton.vue';
 export default {
-  components: {
-    WootButton,
-  },
-
   data() {
     return {
       inputText: '',
@@ -56,41 +47,20 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-small);
-  margin-bottom: var(--space-smaller);
-  width: 100%;
-
-  .input-wrap {
-    display: flex;
-    flex: 0 0 auto;
-    width: 100%;
-
-    .input--note {
-      font-size: var(--font-size-mini);
-      border-color: transparent;
-      padding: var(--space-small) var(--space-small) 0 var(--space-small);
-      resize: none;
-      box-sizing: border-box;
-      min-height: var(--space-larger);
-      margin-bottom: var(--space-small);
-    }
+  .input--note {
+    font-size: var(--font-size-mini);
+    border-color: transparent;
+    margin: 0;
+    resize: none;
+    min-height: var(--space-larger);
   }
 
   .footer {
     display: flex;
     justify-content: flex-end;
-    flex: 1 1 auto;
-    overflow: auto;
     width: 100%;
-
-    .button-wrap {
-      float: right;
-      margin-bottom: var(--space-small);
-      margin-right: var(--space-small);
-    }
+    padding: var(--space-small);
+    padding-top: 0;
   }
 }
 </style>