ADD: Style update

kevinfaveri · May 10, 2020 · 1e14c6e · 1e14c6e
1 parent 6b6f39e
commit 1e14c6e
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 70 deletions.
diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md
@@ -4,6 +4,9 @@ title: 'Changelog'
 
 # Changelog
 
+## 5.7.3
+- Style update for TwemojiPicker
+
 ## 5.7.2
 
 - Added a Vue slot which enables the usage of TwemojiPicker as a headless component when using TwemojiTextarea component

diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md
@@ -35,7 +35,7 @@ The value of this prop represents whether the textarea is enabled.
 
 ### componentColor
 - Type: ``string``
-- Default: ``'#EBEBEB'``
+- Default: ``'#f0f0f0'``
 - Valid Props: ``Any CSS valid color.``
 
 Define the component color style.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kevinfaguiar/vue-twemoji-picker",
-  "version": "5.7.2",
+  "version": "5.7.3",
   "main": "dist/vue-twemoji-picker.umd.min.js",
   "module": "dist/vue-twemoji-picker.esm.min.js",
   "unpkg": "dist/vue-twemoji-picker.min.js",

diff --git a/src/components/PopupEmoji.vue b/src/components/PopupEmoji.vue
@@ -39,7 +39,7 @@
 
 #popper-container {
   padding: 0;
-  background: #ebebeb;
+  background: #f7f7f7;
   border: none;
   border-radius: 3px;
   animation: fadein 300ms;
@@ -64,7 +64,7 @@
     z-index: -1;
     content: '';
     transform: rotate(45deg);
-    background: #ebebeb;
+    background: #f0f0f0;
     width: 24px;
     height: 24px;
   }

diff --git a/src/components/PopupSkins.vue b/src/components/PopupSkins.vue
@@ -39,7 +39,7 @@
 #popper-skins-container {
   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
   padding: 0;
-  background: #f2f2f2;
+  background: #f7f7f7;
   border: none;
   border-radius: 3px;
   animation: fadein 300ms;
@@ -60,7 +60,7 @@
     z-index: -1;
     content: '';
     transform: rotate(45deg);
-    background: #f2f2f2;
+    background: #f0f0f0;
     width: 24px;
     height: 24px;
   }
@@ -92,7 +92,7 @@
 import Vue from 'vue';
 import {
   popperGenerator,
-  defaultModifiers
+  defaultModifiers,
 } from '@popperjs/core/lib/popper-lite';
 import offset from '@popperjs/core/lib/modifiers/offset';
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
@@ -112,54 +112,54 @@ export default Vue.extend({
       debouncedPopperOpen: false as boolean,
       popperInstance: null as any | null,
       holdingInterval: null as any,
-      closeOnClickaway: true as boolean
+      closeOnClickaway: true as boolean,
     };
   },
   props: {
     disabled: {
       default: false,
-      type: Boolean as () => boolean
+      type: Boolean as () => boolean,
     },
     offset: {
       default: () => [0, 30],
-      type: Array as () => Array<number>
+      type: Array as () => Array<number>,
     },
     emojiList: {
       required: true,
-      type: Array as () => Array<EmojiSkin>
+      type: Array as () => Array<EmojiSkin>,
     },
     clickEmoji: {
       required: true,
-      type: Function as () => Function
-    }
+      type: Function as () => Function,
+    },
   },
   computed: {
     createPopper() {
       const defaultModifiersObj = [
         ...defaultModifiers,
         offset,
         preventOverflow,
-        arrow
+        arrow,
       ];
 
       return popperGenerator({
-        defaultModifiers: defaultModifiersObj
+        defaultModifiers: defaultModifiersObj,
       });
-    }
+    },
   },
   mounted(): void {
     this.containerRef = this.$refs.container;
   },
   watch: {
-    popperOpen: function(val): void {
+    popperOpen: function (val): void {
       this.$emit('popperOpenChanged', val);
       setTimeout(() => {
         this.debouncedPopperOpen = val;
       }, 300);
     },
-    closeOnClickaway: function(val): void {
+    closeOnClickaway: function (val): void {
       this.$emit('closeOnClickaway', val);
-    }
+    },
   },
   methods: {
     clickAwayPopper(): void {
@@ -183,16 +183,16 @@ export default Vue.extend({
             {
               name: 'offset',
               options: {
-                offset: this.offset
-              }
+                offset: this.offset,
+              },
             },
             {
               name: 'arrow',
               options: {
-                element: '#skins-arrow'
-              }
-            }
-          ]
+                element: '#skins-arrow',
+              },
+            },
+          ],
         }
       );
       this.$refs.container.setAttribute('data-show', true);
@@ -208,7 +208,7 @@ export default Vue.extend({
     },
     setCloseOnClickaway(bool: boolean): void {
       this.closeOnClickaway = bool;
-    }
-  }
+    },
+  },
 });
 </script>