From 7c71294bc9fc924457942c430c809821ae661aa1 Mon Sep 17 00:00:00 2001
From: Alexander Klein <alexander.klein@logmein.com>
Date: Mon, 15 Feb 2021 16:44:27 +0100
Subject: [PATCH] refactor: extract events table styling

---
 components/metrics/EventsTable.js         | 3 ++-
 components/metrics/EventsTable.module.css | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 components/metrics/EventsTable.module.css

diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 2d301f8d..6b476605 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -9,6 +9,7 @@ import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
 import { TOKEN_HEADER } from 'lib/constants';
+import styles from './EventsTable.module.css';
 
 const EVENT_FILTER_DEFAULT = {
   value: 'EVENT_FILTER_DEFAULT',
@@ -45,7 +46,7 @@ export default function EventsTable({ websiteId, ...props }) {
   return (
     <>
       {!loading && !error && eventTypes.length > 1 && (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div className={styles.filter}>
           <DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
         </div>
       )}
diff --git a/components/metrics/EventsTable.module.css b/components/metrics/EventsTable.module.css
new file mode 100644
index 00000000..259a4bbb
--- /dev/null
+++ b/components/metrics/EventsTable.module.css
@@ -0,0 +1,6 @@
+.filter {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 15px;
+}