Add custom autocomplete styles

arisgk · Sep 16, 2017 · 0670222 · 0670222
1 parent 840404a
commit 0670222
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 7 deletions.
diff --git a/src/components/Home/AutocompleteEditor/AutocompleteEditor.jsx b/src/components/Home/AutocompleteEditor/AutocompleteEditor.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { EditorState } from 'draft-js';
 import Editor from 'draft-js-plugins-editor';
-import 'draft-js-mention-plugin/lib/plugin.css';
 import createAutocompletePlugin from 'draft-js-mention-plugin';
+import './styles/autocomplete.css';
 
 const mentionPlugin = createAutocompletePlugin({
   mentionPrefix: '@',

diff --git a/src/components/Home/AutocompleteEditor/styles/autocomplete.css b/src/components/Home/AutocompleteEditor/styles/autocomplete.css
@@ -0,0 +1,73 @@
+.draftJsMentionPlugin__mention__29BEd, .draftJsMentionPlugin__mention__29BEd:visited {
+  color: #03a9f4;
+  cursor: pointer;
+  display: inline-block;
+  padding-left: 2px;
+  padding-right: 2px;
+  border-radius: 2px;
+  text-decoration: none;
+}
+
+.draftJsMentionPlugin__mention__29BEd:hover, .draftJsMentionPlugin__mention__29BEd:focus {
+  color: #677584;
+  background: #edf5fd;
+  outline: 0; /* reset for :focus */
+}
+
+.draftJsMentionPlugin__mention__29BEd:active {
+  color: #222;
+  background: #455261;
+}
+.draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm {
+  padding: 7px 10px 3px 10px;
+  -webkit-transition: background-color 0.4s cubic-bezier(.27,1.27,.48,.56);
+  transition: background-color 0.4s cubic-bezier(.27,1.27,.48,.56);
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm:active {
+  background-color: #cce7ff;
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntryFocused__3LcTd {
+  background-color: #e6f3ff;
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntryText__3Jobq {
+  display: inline-block;
+  margin-left: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 368px;
+  font-size: 0.9em;
+  margin-bottom: 0.2em;
+}
+
+.draftJsMentionPlugin__mentionSuggestionsEntryAvatar__1xgA9 {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+}
+.draftJsMentionPlugin__mentionSuggestions__2DWjA {
+  border: 1px solid #eee;
+  margin-top: 1.75em;
+  position: absolute;
+  min-width: 220px;
+  max-width: 440px;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0px 4px 30px 0px rgba(220,220,220,1);
+  cursor: pointer;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  z-index: 2;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  box-sizing: border-box;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
diff --git a/src/data/mentions/index.js b/src/data/mentions/index.js
@@ -1,31 +1,31 @@
 const mentions = [
   {
-    name: 'matthew',
+    name: 'Matthew Yorke',
     title: 'Senior Software Engineer',
     avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
   },
   {
-    name: 'julian',
+    name: 'Julian Smith',
     title: 'United Kingdom',
     avatar: 'https://avatars2.githubusercontent.com/u/1188186?v=3&s=400',
   },
   {
-    name: 'jyoti',
+    name: 'Yvoti Bahar',
     title: 'New Delhi, India',
     avatar: 'https://avatars0.githubusercontent.com/u/2182307?v=3&s=400',
   },
   {
-    name: 'max',
+    name: 'Max Werner',
     title: 'Travels around the world, brews coffee, skis mountains and makes stuff on the web.',
     avatar: 'https://pbs.twimg.com/profile_images/763033229993574400/6frGyDyA_400x400.jpg',
   },
   {
-    name: 'nik',
+    name: 'Nik Vitalik',
     title: 'Passionate about Software Architecture, UX, Skiing & Triathlons',
     avatar: 'https://avatars0.githubusercontent.com/u/223045?v=3&s=400',
   },
   {
-    name: 'pascal',
+    name: 'Pascal Young',
     title: 'HeathIT hacker and researcher',
     avatar: 'https://pbs.twimg.com/profile_images/688487813025640448/E6O6I011_400x400.png',
   },