fix(ui) - review

frontend/app/components/Alerts/Notifications/Notifications.js

@@ -108,8 +108,8 @@ class Notifications extends React.Component {
           content={ 
             <div className="">
               <NoContent
-                title="No Alerts!"
-                subtext="There are no alerts."
+                title=""
+                subtext="There are no alerts to show."
                 icon="exclamation-circle"
                 show={ !loading && notifications.size === 0 }
                 size="small"

frontend/app/components/Announcements/Announcements.js

@@ -73,7 +73,7 @@ class Announcements extends React.Component {
           content={ 
             <div className="mx-4">
               <NoContent
-                title="No Announcements found!"
+                title=""
                 subtext="There are no announcements to show."
                 icon="exclamation-circle"
                 show={ !loading && announcements.size === 0 }

frontend/app/components/BugFinder/EventFilter/EventFilter.js

@@ -130,7 +130,8 @@ export default class EventFilter extends React.PureComponent {
             onClick={ this.onPlaceholderClick }
           >
             { !searchQuery && 
-              <RandomPlaceholder onClick={ this.onPlaceholderItemClick } appliedFilterKeys={ appliedFilterKeys } />
+              <div className={ stl.placeholder }>Search for users, clicks, page visits, requests, errors and more</div>
+              // <RandomPlaceholder onClick={ this.onPlaceholderItemClick } appliedFilterKeys={ appliedFilterKeys } />
             }
           </div>
         }

frontend/app/components/BugFinder/EventFilter/eventFilter.css

@@ -56,4 +56,22 @@
   position: absolute;
   right: 9px;
   top: 9px;
+}
+
+.placeholder {
+  color: $gray-medium;
+  font-weight: 300;
+  font-size: 16px;
+  user-select: none;
+
+  & span {
+    font-weight: 400;
+    color: $teal;
+    cursor: pointer;
+    border-bottom: dashed thin $teal;
+    
+    &:hover {
+      color: $teal-dark;
+    }
+  }
 }

frontend/app/components/Client/CustomFields/CustomFields.js

@@ -100,6 +100,7 @@ class CustomFields extends React.Component {
             title="No data available."
             size="small"
             show={ fields.size === 0 }
+            icon
           >
             <div className={ styles.list }>
               { fields.filter(i => i.index).map(field => (

frontend/app/components/Client/Webhooks/Webhooks.js

@@ -56,7 +56,7 @@ class Webhooks extends React.PureComponent {
         
         <Loader loading={ loading }>
           <NoContent
-            title="No webhooks are available."
+            title="No webhooks available."
             size="small"
             show={ noSlackWebhooks.size === 0 }
             icon

frontend/app/components/Errors/ui/ErrorName.js

@@ -4,7 +4,7 @@ import cn from "classnames";
 function ErrorText({ className, icon, name, message, bold, lineThrough = false }) {
 	return (
     <div className={ cn("mb-1 truncate", { "font-weight-bold": bold }) }>
-      { icon && <Icon name={icon} className="float-left mr-2" size="14" style={{ marginTop: '1px'}}/> }
+      {/* { icon && <Icon name={icon} className="float-left mr-2" size="14" style={{ marginTop: '1px'}}/> } */}
       <span className={cn("code-font color-red", className, { 'line-through' : lineThrough })}>{ name }</span>
       <span className={cn('color-gray-darkest ml-2', { 'line-through' : lineThrough })}>{ message }</span>
     </div>

frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js

@@ -38,7 +38,7 @@ export default connect(state => ({
       />
       { visible && 
         <div className={ stl.modal } >
-          <NoContent show={ metadata.size === 0 } size="small" >
+          <NoContent show={ metadata.size === 0 } size="small">
             { metadata.map((i) => {
               const key = Object.keys(i)[0]
               const value = i[key]