fix(modal): update modal design (#295)

* fix(modal): update modal design and animation

#287

* fix(modal): update modal design

Author: rishichawda

lib/globals/fonts.scss

@@ -27,10 +27,6 @@
     content: "\e802";
 }
 
-.icon-cross:before {
-    content: "\e807";
-}
-
 .icon-menu:before {
     content: '\e800';
 }

lib/modal/index.js

@@ -3,6 +3,7 @@ import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import cx from 'classnames';
+import { MdClose } from 'react-icons/md';
 import { transitionEndEventName } from '../globals/helper';
 import defaultTheme from './theme.module.scss';
 import '../globals/fonts.scss';
@@ -87,7 +88,7 @@ class Modal extends Component {
     const { open } = this.state;
     const classes = cx(
       theme.modal,
-      open ? theme['d-block'] : theme['d-none'],
+      open ? theme['d-block-modal'] : theme['d-none'],
       className,
     );
     const backdrop = cx(
@@ -113,7 +114,16 @@ class Modal extends Component {
               this.modalRef = ref;
             }}
           >
-            {this.renderModalTitle(title)}
+            <div className={theme.titleWrapper}>
+              {this.renderModalTitle(title)}
+              <span
+                className={cx(theme.close, 'icon-cross')}
+                onClick={this.closeModal}
+              >
+                &times;
+              </span>
+              {title && <hr />}
+            </div>
             <div className={theme['modal-body']} aria-label="card-body">
               {children || (
                 typeof body === 'function'
@@ -122,10 +132,6 @@ class Modal extends Component {
               ) || null}
             </div>
             {this.renderModalFooter(footer)}
-            <i
-              className={cx(theme.close, 'icon-cross')}
-              onClick={this.closeModal}
-            />
           </div>
         )}
       </div>

lib/modal/tests/accessibility.test.js

@@ -83,7 +83,7 @@ describe('Modal accessibility tests', () => {
     toggleModal();
     expect(simulatedValue()).equals(expectedValueBeforeClosing);
     wrappedComponent
-      .find('i.icon-cross')
+      .find('span.icon-cross')
       .simulate('click'); // Get the last child element, i.e, close icon.
     setTimeout(() => {
       expect(simulatedValue()).equals(expectedValueAfterClosing);

lib/modal/tests/render.test.js

@@ -65,6 +65,7 @@ describe('Modal render tests', () => {
     const expectedValue = 'card-header';
     const simulatedValue = () => wrappedComponent
       .find('#modal')
+      .childAt(0)
       .childAt(0);
 
     toggleModal();
@@ -75,7 +76,7 @@ describe('Modal render tests', () => {
     const expectedValue = 'card-footer';
     const simulatedValue = () => {
       const { length } = wrappedComponent.find('#modal').children();
-      return wrappedComponent.find('#modal').childAt(length - 2);
+      return wrappedComponent.find('#modal').childAt(length - 1);
     };
 
     toggleModal();

lib/modal/theme.module.scss

@@ -1,5 +1,5 @@
 :local(.modal-backdrop) {
-    background: rgba(0,0,0,0.51);
+    background: rgba(0, 0, 0, 0.51);
     position: fixed;
     top: 0;
     left: 0;
@@ -9,49 +9,117 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-  }
+}
 
-  :local(.animation) {
+:local(.animation) {
     opacity: 0;
     transition: opacity 0.3s;
-  }
-  
-  :local(.modal) {
-    display: none;
+}
+
+:local(.titleWrapper) {
+    display: flex;
+    width: 100%;
+    position: relative;
     padding: 2%;
-    padding-bottom: 1%;
-    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+    box-sizing: border-box;
+    hr {
+        border: none;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        background-color: #888282ab;
+        bottom: 0;
+        height: 1px;
+        margin-bottom: 0;
+    }
+}
+
+:local(.modal) {
+    display: none;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
     background: white;
     width: 50%;
-    top: calc(30vh + 2em);
+    top: calc(20vh + 2em);
     height: fit-content;
     position: fixed;
     flex-flow: column;
     box-sizing: border-box;
-
+    border-radius: 0.3em;
+    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;
     :local(.modal-title) {
         padding: 1% 0%;
         font-weight: bold;
         box-sizing: border-box;
+        width: 80%;
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        text-align: start;
+        
+        @media only screen and (max-width: 500px) {
+            padding: 3%;
+        }
     }
-    
     :local(.modal-body) {
         box-sizing: border-box;
+        padding: 2%;
+        text-align: left;
+        @media only screen and (max-width: 768px) {
+            padding: 3%;
+        }
+        @media only screen and (max-width:500px) {
+            padding: 5%;
+            line-height: 1.4em;
+        }
     }
-
     :local(.modal-footer) {
         width: 100%;
         padding: 1% 2%;
         box-sizing: border-box;
+        @media only screen and (max-width: 768px) {
+            padding: 2% 3%;
+        }
+    }
+}
+
+:local(.d-block-modal) {
+    display: flex;
+    animation: anim 0.3s linear;
+    @keyframes anim {
+        0% {
+            opacity: 0;
+            -webkit-transform: scale(0.1);
+            -moz-transform: scale(0.1);
+            -ms-transform: scale(0.1);
+            transform: scale(0.1);
+        }
+        100% {
+            opacity: 1;
+            -webkit-transform: scale(1);
+            -moz-transform: scale(1);
+            -ms-transform: scale(1);
+            transform: scale(1);
+        }
     }
 }
 
 :local(.d-block) {
     display: flex;
     animation: fadein 0.3s linear;
     @keyframes fadein {
-        0% { opacity: 0; }
-        100% { opacity: 1; }
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 }
 
@@ -60,18 +128,20 @@
 }
 
 :local(.close) {
+    display: flex;
     width: fit-content;
+    height: fit-content;
     position: absolute;
-    right: 0.6em;
-    top: 0.6em;
+    font-size: 20px;
+    color: #1f1e1eab;
+    right: 1em;
+    align-items: center;
+    align-self: center;
     cursor: pointer;
-    font-size: 0.7rem;
-    background-color: black;
-    color: white;
 }
 
 @media only screen and (max-width: 992px) {
-  :local(.modal) {
-    width: 75%;
-  }
+    :local(.modal) {
+        width: 75%;
+    }
 }