fix: review fixes and other changes

frontend/app/assets/index.html

@@ -5,12 +5,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="slack-app-id" content="AA5LEB34M">
-    <link rel="icon" type="image/png" href="/favicon@1x.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="/favicon@2x.png" sizes="64x64">
-    <link rel="icon" type="image/png" href="/favicon@3x.png" sizes="96x96">
-    <link rel="icon" type="image/png" href="/favicon@4x.png" sizes="128x128">
-    <link rel="icon" type="image/png" href="/favicon@5x.png" sizes="160x160">
-    <link rel="icon" type="image/png" href="/favicon@6x.png" sizes="192x192">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="/path/to/styles/theme-name.css">

frontend/app/components/Client/ManageUsers/ManageUsers.js

@@ -7,6 +7,7 @@ import styles from './manageUsers.css';
 import UserItem from './UserItem';
 import { confirm } from 'UI/Confirmation';
 import { toast } from 'react-toastify';
+import BannerMessage from 'Shared/BannerMessage';
 
 const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
 const LIMIT_WARNING = 'You have reached users limit.';
@@ -158,28 +159,37 @@ class ManageUsers extends React.PureComponent {
             onClose={ this.closeModal }
           />
           <div className={ styles.wrapper }>
-            <div className={ styles.tabHeader }>
-              { !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + 'Users' }</h3> }
-              { hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Team Size ${members.size}` }</h3>}
-              <Popup
-                trigger={
-                  <div>
-                    <IconButton
-                        id="add-button"
-                        disabled={ !canAddUsers }
-                        circle
-                        icon="plus"
-                        outline
-                        onClick={ () => this.init() }
-                    />
-                  </div>
+            <div className={ cn(styles.tabHeader, 'flex items-center') }>
+              <div className="flex items-center mr-auto">
+                { !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + 'Users' }</h3> }
+                { hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Team Size ${members.size}` }</h3>}
+                <Popup
+                  trigger={
+                    <div>
+                      <IconButton
+                          id="add-button"
+                          disabled={ !canAddUsers }
+                          circle
+                          icon="plus"
+                          outline
+                          onClick={ () => this.init() }
+                      />
+                    </div>
+                  }
+                  // disabled={ canAddUsers }
+                  content={ `${ !canAddUsers ? (!isAdmin ? PERMISSION_WARNING : LIMIT_WARNING) : 'Add team member' }` }
+                  size="tiny"
+                  inverted
+                  position="top left"
+                />
+              </div>
+              <div>
+                { !account.smtp && 
+                <BannerMessage>
+                  Inviting new users require email messaging. Please <a className="link" href="https://docs.openreplay.com/configuration/configure-smtp" target="_blank">setup SMTP</a>.
+                </BannerMessage>
                 }
-                // disabled={ canAddUsers }
-                content={ `${ !canAddUsers ? (!isAdmin ? PERMISSION_WARNING : LIMIT_WARNING) : 'Add team member' }` }
-                size="tiny"
-                inverted
-                position="top left"
-              />
+              </div>
             </div>
 
             <NoContent

frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js

@@ -80,7 +80,7 @@ function PreferencesMenu({ activeTab, appearance, history }) {
         <SideMenuitem
           active={ activeTab === CLIENT_TABS.NOTIFICATIONS }
           title="Notifications"
-          iconName="users"
+          iconName="bell"
           onClick={() => setTab(CLIENT_TABS.NOTIFICATIONS) }
         />
       </div>      

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -232,7 +232,7 @@ export default class Timeline extends React.PureComponent {
                     icon={getPointerIcon('exception')}
                     content={ 
                       <div className={ stl.popup } >
-                        <b>{ "Exception:" }</b>
+                        <b>{ "Exception" }</b>
                         <br/>
                         <span>{ e.message }</span>
                       </div>  
@@ -278,7 +278,7 @@ export default class Timeline extends React.PureComponent {
                     icon={getPointerIcon('log')}
                     content={ 
                       <div className={ stl.popup } >
-                        <b>{ "Console:" }</b>
+                        <b>{ "Console" }</b>
                         <br/>
                         <span>{ l.value }</span>
                       </div> 
@@ -380,7 +380,7 @@ export default class Timeline extends React.PureComponent {
                     icon={getPointerIcon('fetch')}
                     content={ 
                       <div className={ stl.popup }>
-                        <b>{ "Failed Fetch:" }</b>
+                        <b>{ "Failed Fetch" }</b>
                         <br/>
                         { e.name }
                       </div> 
@@ -421,7 +421,7 @@ export default class Timeline extends React.PureComponent {
                     icon={getPointerIcon('stack')}
                     content={ 
                       <div className={ stl.popup }>
-                        <b> { "Stack Event:" }</b>
+                        <b> { "Stack Event" }</b>
                         <br/>
                         { e.name }
                       </div> 

frontend/app/components/shared/BannerMessage/BannerMessage.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Icon } from 'UI'
+
+const BannerMessage= (props) => {
+  const { icon = 'info-circle', children } = props;
+
+  return (
+    <>
+      <div>
+        <div
+          className="rounded text-sm flex items-center p-2 justify-between"
+          style={{ backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)'}}
+        >
+          <div className="flex items-center w-full">
+            <div className="flex-shrink-0 w-8 flex justify-center">
+              <Icon name={icon} size="14" color="gray-darkest" />
+            </div>
+            <div className="ml-2color-gray-darkest mr-auto">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BannerMessage;

frontend/app/components/shared/BannerMessage/index.js

@@ -0,0 +1 @@
+export { default } from './BannerMessage'

frontend/app/types/account/account.js

@@ -8,7 +8,8 @@ export default Member.extend({
   limits: Limit(),
   banner: undefined,
   email: '',
-  verifiedEmail: undefined
+  verifiedEmail: undefined,
+  smtp: false,
 }, {
   fromJS: account => ({
     ...account,