fix(popover): update popover design (#298)

* fix(popover): fix popover shadow

#287

* fix(popover): update popover background and font, add separator

Author: rishichawda

lib/popover/index.js

@@ -108,6 +108,7 @@ class Popover extends React.Component {
             tabIndex={0}
           >
             {title && <span className={theme.title} aria-label="popover-title">{title}</span>}
+            { title && <hr /> }
             <div className={classnames(theme.popoverContent)}>{content}</div>
             {!noAction && this.renderActionContent()}
             <span className={theme.popoverArrow} />

lib/popover/tests/accessibility.test.js

@@ -75,9 +75,9 @@ describe('Popover accessibility tests', () => {
       .props
       .children;
     simulateEvent(Button, 'click');
-    expect(actualValue()[2].props['aria-label']).to.equal(expectedValueBefore);
+    expect(actualValue()[3].props['aria-label']).to.equal(expectedValueBefore);
     wrappedComponent.setProps({ noAction: true });
-    expect(actualValue()[2]).to.equal(expectedValueAfter);
+    expect(actualValue()[3]).to.equal(expectedValueAfter);
   });
 
   it('Should not render title when title prop is not passed', () => {

lib/popover/theme.module.scss

@@ -7,6 +7,7 @@
 }
 
 :local(.popoverWrapper) {
+    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
     margin: 2% 1%;
     padding: 10px;
     /*
@@ -21,16 +22,28 @@
     white-space: nowrap;
     max-width: 100px;
     border-radius: 5px;
-    background-color: $secondary-white;
+    background-color: #ffffff;
     position: absolute;
-    box-shadow: 1px 0px 8px 1px rgba(0, 0, 0, 0.3);
     outline: none;
+    font-size: 0.9em;
     z-index: 999; // render on top of any content
+    font-variant-ligatures: none;
+    -webkit-font-variant-ligatures: none;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-smooth: antialiased;
+    -webkit-font-smoothing: antialiased;
+    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
+    hr {
+        width: 100%;
+        height: 1px;
+        background-color: rgba(0, 0, 0, 0.3);
+        border: none;
+    }
 }
 
 :local(.title) {
     display: inline-block;
-    font-size: 18px;
     font-weight: bold;
     text-transform: capitalize;
     margin-bottom: 10px;
@@ -57,7 +70,7 @@
     display: inline-block;
     min-width: 12px;
     min-height: 12px;
-    background-color: $secondary-white;
+    background-color: #ffffff;
 }
 
 /* top positions */