Improved UI for Modal

stanleyowen · May 23, 2021 · fec93e4 · fec93e4
1 parent 4502385
commit fec93e4
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 38 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -556,9 +556,9 @@ tbody tr:hover {
 .modal__title {
     display: block;
     padding: 10px;
+    margin-top: 10px;
     font-weight: bold;
     text-align: center;
-    border-bottom: 1px solid;
 }
 .modal__closeBtn {
     float: right;

diff --git a/client/src/App.min.css b/client/src/App.min.css
diff --git a/client/src/components/account.component.js b/client/src/components/account.component.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub, faGoogle, faKeycdn } from '@fortawesome/free-brands-svg-icons'
-import { faCheck, faInfo, faKey, faSignOutAlt, faEyeSlash, faEye, faQuestionCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+import { faCheck, faInfo, faKey, faTimes, faSignOutAlt, faEyeSlash, faEye, faQuestionCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
 import { FormControlLabel, IconButton, Tooltip, Switch } from '@material-ui/core'
 import download from 'js-file-download'
 import axios from 'axios'
@@ -233,9 +233,9 @@ const Account = ({ userData }) => {
 
             <div id="form">
                 <div className="form__contact">
-                    <div className="get_in_touch"><h1>Account</h1></div>
-                    <div className="form">
-                        <div className="m-10 contact__infoField">
+                    <div className="get_in_touch"><h1 className="monospace">Account</h1></div>
+                    <div className="m-10">
+                        <div className="contact__infoField">
                             <label htmlFor="userEmail">Email Address</label>
                             <input title="Email" id="userEmail" type="email" className="contact__inputField" minLength="6" maxLength="60" value={email} readOnly />
                         </div>
@@ -290,10 +290,8 @@ const Account = ({ userData }) => {
 
             <div id="password-bg" className="modal hiddenModal">
                 <div id="password-modal" className="modal__container hiddenModal">
-                    <div className="modal__title">
-                        <span className="modal__closeFireUI modal__closeBtn" onClick={() => closeModal('password-bg', 'password-modal')}>&times;</span>
-                        <h2>Update Password</h2>
-                    </div>
+                    <IconButton onClick={() => closeModal('password-bg', 'password-modal')} className="float-right"><FontAwesomeIcon icon={faTimes} style={{ fontSize: '.8em', color: 'black' }} /></IconButton>
+                    <h2 className="modal__title">Update Password</h2>
                     <div className="modal__body">
                         <form onSubmit={changePassword}>
                             <input type="text" className="contact__inputField" value={email} required readOnly style={{ display: 'none' }} autoComplete="username" />
@@ -330,18 +328,16 @@ const Account = ({ userData }) => {
                                 </div>
                             </div>
                             <p className="isCentered mt-10"><a className="link" href="/reset-password">I forgot my password</a></p>
-                            <button className="oauth-box google isCentered block mt-20 mb-10 p-12 button" id="change-password">Update</button>
+                            <button className="oauth-box google isCentered block mt-20 p-12 button" id="change-password">Update</button>
                         </form>
                     </div>
                 </div>
             </div>
 
             <div id="mfa-bg" className="modal hiddenModal">
                 <div id="mfa-modal" className="modal__container hiddenModal">
-                    <div className="modal__title">
-                        <span className="modal__closeFireUI modal__closeBtn" onClick={() => closeModal('mfa-bg', 'mfa-modal')}>&times;</span>
-                        <h2>Multi Factor Authentication (MFA)</h2>
-                    </div>
+                    <IconButton onClick={() => closeModal('mfa-bg', 'mfa-modal')} className="float-right"><FontAwesomeIcon icon={faTimes} style={{ fontSize: '.8em', color: 'black' }} /></IconButton>
+                    <h2 className="modal__title">Multi Factor Authentication (MFA)</h2>
                     <div className="modal__body mt-10">
                         <ol className="ml-40 ul-mb10">
                             <li>
@@ -388,10 +384,8 @@ const Account = ({ userData }) => {
 
             <div id="otp-bg" className="modal hiddenModal">
                 <div id="otp-modal" className="modal__container hiddenModal">
-                    <div className="modal__title">
-                        <span className="modal__closeFireUI modal__closeBtn" onClick={() => closeModal('otp-bg', 'otp-modal')}>&times;</span>
-                        <h2>Authentication Required</h2>
-                    </div>
+                    <IconButton onClick={() => closeModal('otp-bg', 'otp-modal')} className="float-right"><FontAwesomeIcon icon={faTimes} style={{ fontSize: '.8em', color: 'black' }} /></IconButton>
+                    <h2 className="modal__title">Authentication Required</h2>
                     <div className="modal__body mt-10">
                         <ol className="ml-40 ul-mb10">
                             <li>
@@ -430,13 +424,12 @@ const Account = ({ userData }) => {
                 </div>
             </div>
 
-            { authenticated ? (<div className="contact__infoField"><textarea id="backup-codes" className="contact__inputField no-bot" value={BackupCode()} readOnly></textarea></div>) : null }
-            { authenticated && security['2FA'] ? (<div id="backup-code-bg" className="modal hiddenModal">
+            { authenticated && security['2FA'] ? (<textarea id="backup-codes" className="contact__inputField no-bot" value={BackupCode()} readOnly />) : null }
+            { authenticated && security['2FA'] ?
+            (<div id="backup-code-bg" className="modal hiddenModal">
                 <div id="backup-code-modal" className="modal__container hiddenModal">
-                    <div className="modal__title">
-                        <span className="modal__closeFireUI modal__closeBtn" onClick={() => closeModal('backup-code-bg', 'backup-code-modal')}>&times;</span>
-                        <h2>Backup Codes</h2>
-                    </div>
+                    <IconButton onClick={() => closeModal('backup-code-bg', 'backup-code-modal')} className="float-right"><FontAwesomeIcon icon={faTimes} style={{ fontSize: '.8em', color: 'black' }} /></IconButton>
+                    <h2 className="modal__title">Backup Codes</h2>
                     <div className="modal__body mt-10">
                         <p className="mb-10">Keep these backup codes somewhere safe but accessible. Each backup code can only be used once.</p>
                         <div dangerouslySetInnerHTML={{__html: BackupCodes()}}></div>

diff --git a/client/src/components/home.component.js b/client/src/components/home.component.js
@@ -3,7 +3,7 @@ import DateFnsUtils from "@date-io/date-fns"
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
 import { IconButton, Tooltip, Select, MenuItem } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPen, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons/'
+import { faPen, faTrash, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons/'
 import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
 import axios from 'axios'
 
@@ -203,10 +203,8 @@ const Home = ({ userData }) => {
 
             <div id="background" className="modal hiddenModal">
                 <div id="modal" className="modal__container hiddenModal">
-                    <div className="modal__title">
-                        <span className="modal__closeFireUI modal__closeBtn" onClick={() => closeModal('background','modal')}>&times;</span>
-                        <h2>Add Todo</h2>
-                    </div>
+                    <IconButton onClick={() => closeModal('background','modal')} className="float-right"><FontAwesomeIcon icon={faTimes} style={{ fontSize: '.8em', color: 'black' }} /></IconButton>
+                    <h2 className="modal__title">Add Todo</h2>
                     <div className="modal__body">
                         <form onSubmit={addTodo}>
                             <div className="m-10 no-bot">

diff --git a/client/src/components/login.component.js b/client/src/components/login.component.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
 import { Tooltip, IconButton, FormControlLabel, Checkbox } from '@material-ui/core'
-import { faQuestionCircle, faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons/'
+import { faQuestionCircle, faEyeSlash, faEye, faEnvelope, faChartLine } from '@fortawesome/free-solid-svg-icons/'
 import axios from 'axios'
 
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
@@ -127,7 +127,7 @@ const Login = ({ userData }) => {
 
         <div id="form">
             <div className="form__contact">
-                <div className="get_in_touch"><h1>Verify Your Identity</h1></div>
+                <div className="get_in_touch"><h2 className="monospace">Verify Your Identity</h2></div>
                 <div className="form">
                     <form className="contact__form" onSubmit={VerifyOTP}>
                         <div className="m-10">
@@ -168,6 +168,17 @@ const Login = ({ userData }) => {
                     </form>
                 </div>
             </div>
+            <div className="footer__socialBtn mb-20">
+                <Tooltip title="Contact Support" arrow><a href="/support" rel="noopener noreferrer">
+                    <FontAwesomeIcon icon={faEnvelope} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+                <Tooltip title="Current Status" arrow><a href="https://todoapp.freshstatus.io/" target="_blank" rel="noreferrer">
+                    <FontAwesomeIcon icon={faChartLine} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+                <Tooltip title="View Code on GitHub" arrow><a href="https://github.com/stanleyowen/todo-application/" target="_blank" rel="noreferrer">
+                    <FontAwesomeIcon icon={faGithub} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+            </div>
         </div>
     </div>) :
     (<div id="form">

diff --git a/client/src/components/register.component.js b/client/src/components/register.component.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { IconButton } from '@material-ui/core'
+import { IconButton, Tooltip } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons/'
+import { faEye, faEyeSlash, faEnvelope, faChartLine } from '@fortawesome/free-solid-svg-icons/'
 import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
 import axios from 'axios'
 
@@ -75,12 +75,24 @@ const Register = ({ userData }) => {
                     <hr />
                     <h4 className="mt-20 mb-20 isCentered">If { email ? email : properties.email } is not your email address, click on the back button and enter the correct one.</h4>
                     <h4 className="mt-20 mb-20 isCentered">If you don't receive the e-mail in 5 minutes, please check your spam folder or click the resend button.</h4>
+                    <h4 className="mt-20 isCentered">If you're experiencing a critical issue, please <a className="link" href="/support">contact support</a>.</h4>
                     <div className="flex isCentered">
                         <p><button className="oauth-box google isCentered block mt-20 mb-10 mr-10 p-12 button" id="cancel" onClick={() => window.location='/logout'}>Back</button></p>
                         <p><button className="oauth-box google isCentered block mt-20 mb-10 ml-10 p-12 button" id="send-link" onClick={sendLink}>Resend Link</button></p>
                     </div>
                 </div>
             </div>
+            <div className="footer__socialBtn mt-20 mb-20">
+                <Tooltip title="Contact Support" arrow><a href="/support" rel="noopener noreferrer">
+                    <FontAwesomeIcon icon={faEnvelope} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+                <Tooltip title="Current Status" arrow><a href="https://todoapp.freshstatus.io/" target="_blank" rel="noreferrer">
+                    <FontAwesomeIcon icon={faChartLine} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+                <Tooltip title="View Code on GitHub" arrow><a href="https://github.com/stanleyowen/todo-application/" target="_blank" rel="noreferrer">
+                    <FontAwesomeIcon icon={faGithub} style={{ fontSize: "1.8em" }} />
+                </a></Tooltip>
+            </div>
         </div>
     ) : (
         <div id="form">

diff --git a/client/src/components/support.component.js b/client/src/components/support.component.js
@@ -5,8 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChartLine, faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
-import { NOTIFICATION_TYPES, setNotification } from '../libraries/setNotification'
 import { getCSRFToken } from '../libraries/validation'
+import { NOTIFICATION_TYPES, setNotification } from '../libraries/setNotification'
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const ticketTypes = ["Question","Improvement","Security Issue/Bug","Account Management","Others"]
@@ -81,7 +81,7 @@ const Support = ({ userData }) => {
                             </a></Tooltip>
                         </div>
                     </div>
-                    {properties.success ?
+                    { properties.success ?
                     (<div className="center-object">
                         <h1 className="blue-text monospace">Message Sent</h1>
                         <h3 className="mt-20 monospace">Thank you for submitting the details. We have received your issue(s) and or enhancement(s), and you should receive an email from us after 48 hours.</h3>
@@ -95,8 +95,7 @@ const Support = ({ userData }) => {
                                     <div className="m-10">
                                         <div className="contact__infoField">
                                             <label htmlFor="userEmail">From</label>
-                                            <input title="Email" id="userEmail" type="email" className="contact__inputField" minLength="6" maxLength="60" value={data.email} required disabled="true" autoComplete="username" />
-                                            <span className="contact__onFocus"></span>
+                                            <input title="Email" id="userEmail" type="email" className="contact__inputField" minLength="6" maxLength="60" value={data.email} required readOnly autoComplete="username" />
                                         </div>
                                     </div>
                                     <div className="m-10 no-bot">