change(ui) - preferences - metadata

frontend/app/components/Client/Client.js

@@ -52,7 +52,7 @@ export default class Client extends React.PureComponent {
           <div className={ styles.tabMenu }>
             <PreferencesMenu activeTab={activeTab} />
           </div>
-          <div className="bg-white w-full rounded-lg mx-4 my-6 p-5">
+          <div className="bg-white w-full rounded-lg mx-4 my-6 p-5 border">
             { activeTab && this.renderActiveTab() }
           </div>
         </div>

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

@@ -6,14 +6,17 @@ import styles from './listItem.module.css';
 const ListItem = ({ field, onEdit, disabled }) => {
     return (
         <div
-            className={cn(styles.wrapper, field.index === 0 ? styles.preDefined : '', { [styles.disabled]: disabled })}
+            className={cn(
+                'border-b group last:border-none hover:bg-active-blue flex items-center justify-between p-3 cursor-pointer',
+                field.index === 0 ? styles.preDefined : '',
+                {
+                    [styles.disabled]: disabled,
+                }
+            )}
             onClick={() => field.index != 0 && onEdit(field)}
         >
             <span>{field.key}</span>
-            <div className={styles.actions} data-hidden={field.index === 0}>
-                {/* <div className={ styles.button } onClick={ (e) => { e.stopPropagation(); onDelete(field) } }>
-          <Icon name="trash" color="teal" size="16" />
-        </div> */}
+            <div className="invisible group-hover:visible" data-hidden={field.index === 0}>
                 <div className={styles.button}>
                     <Icon name="edit" color="teal" size="18" />
                 </div>

frontend/app/components/Client/Integrations/IntegrationItem.tsx

@@ -25,7 +25,7 @@ const IntegrationItem = (props: Props) => {
             <img className="h-12 w-12" src={'/assets/' + integration.icon + '.svg'} alt="integration" />
             <div className="text-center mt-2">
                 <h4 className="">{integration.title}</h4>
-                <p className="text-sm color-gray-medium m-0 p-0 h-3">{integration.subtitle && integration.subtitle}</p>
+                {/* <p className="text-sm color-gray-medium m-0 p-0 h-3">{integration.subtitle && integration.subtitle}</p> */}
             </div>
         </div>
     );

frontend/app/components/Client/Integrations/Integrations.tsx

@@ -114,7 +114,7 @@ function Integrations(props: Props) {
 export default connect(
     (state: any) => ({
         initialSiteId: state.getIn(['site', 'siteId']),
-        integratedList: state.getIn(['integrations', 'list']),
+        integratedList: state.getIn(['integrations', 'list']) || [],
         loading: state.getIn(['integrations', 'fetchRequest', 'loading']),
         siteId: state.getIn(['integrations', 'siteId']),
     }),
@@ -144,13 +144,12 @@ const integrations = [
             { title: 'Datadog', slug: 'datadog', icon: 'integrations/datadog', component: <DatadogForm /> },
             { title: 'Sumo Logic', slug: 'sumologic', icon: 'integrations/sumologic', component: <SumoLogicForm /> },
             {
-                title: 'Google Cloud',
+                title: 'Stackdriver',
                 slug: 'stackdriver',
-                subtitle: '(Stackdriver)',
                 icon: 'integrations/google-cloud',
                 component: <StackdriverForm />,
             },
-            { title: 'AWS', slug: 'cloudwatch', subtitle: '(CloudWatch)', icon: 'integrations/aws', component: <CloudwatchForm /> },
+            { title: 'CloudWatch', slug: 'cloudwatch', icon: 'integrations/aws', component: <CloudwatchForm /> },
             { title: 'Newrelic', slug: 'newrelic', icon: 'integrations/newrelic', component: <NewrelicForm /> },
         ],
     },

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

@@ -4,7 +4,7 @@ import styles from './listItem.module.css';
 
 const ListItem = ({ webhook, onEdit, onDelete }) => {
     return (
-        <div className={styles.wrapper} onClick={onEdit}>
+        <div className="hover:bg-active-blue border-b last:border-none" onClick={onEdit}>
             <div>
                 <span>{webhook.name}</span>
                 <div className={styles.endpoint}>{webhook.endpoint}</div>

frontend/app/components/Client/client.module.css

@@ -7,7 +7,7 @@
 .main {  
   max-height: 100%;
   display: flex;
-  min-height: calc(100vh - 81px);
+  /* min-height: calc(100vh - 81px); */
 
   & .tabMenu {
     width: 240px;