From 4efe7a7843b514d5c785c618216de6202036424a Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 20 May 2022 09:18:53 +0200
Subject: [PATCH] feat(ui): add icon to metric creation box

---
 .../DashboardMetricSelection.tsx                         | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index 2833a71a6..e43dda278 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import WidgetWrapper from '../WidgetWrapper';
 import { useObserver } from 'mobx-react-lite';
+import { Icon } from 'UI';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
-import stl from '../WidgetWrapper/widgetWrapper.css'
 
 function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
     const selectedCategoryWidgetsCount = useObserver(() => {
@@ -116,13 +116,14 @@ function DashboardMetricSelection(props: IProps) {
                                 className={
                                     cn(
                                         "relative rounded border col-span-1 cursor-pointer",
-                                        "flex items-center justify-center bg-white",
-                                        "hover:bg-active-blue hover:shadow-border-main text-center h-full",
+                                        "flex flex-col items-center justify-center bg-white",
+                                        "hover:bg-active-blue hover:shadow-border-main text-center h-full py-12",
                                     )
                                 }
                                 onClick={props.handleCreateNew}
                             >
-                                Create Metric
+                                <Icon name="plus" size="16" />
+                                <span className="mt-2">Create Metric</span>
                             </div>
                         )}
                     </div>