From 2e51918cc74ea225b02def98749834260b8ebfde Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 23 Jun 2022 14:36:32 +0200
Subject: [PATCH] fix(ui): typings for iconts, fix for widget name field

---
 .../components/WidgetView/WidgetView.tsx          |  7 +++----
 .../app/components/ui/Icon/{Icon.js => Icon.tsx}  | 15 ++++++++++++++-
 frontend/app/components/ui/SVG.tsx                |  6 +++---
 3 files changed, 20 insertions(+), 8 deletions(-)
 rename frontend/app/components/ui/Icon/{Icon.js => Icon.tsx} (76%)

diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 48b78d415..807f0f8ff 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -65,17 +65,16 @@ function WidgetView(props: Props) {
                         )}
                         onClick={openEdit}
                     >
-                        <h1 className="mb-0 text-2xl">
+                        <h1 className="mb-0 text-2xl mr-4 min-w-fit">
                             <WidgetName
                                 name={widget.name}
                                 onUpdate={(name) => metricStore.merge({ name })}
                                 canEdit={expanded}
                             />
                         </h1>
-                        <div className="text-gray-600">
+                        <div className="text-gray-600 w-full cursor-pointer" onClick={() => setExpanded(!expanded)}>
                             <div
-                                onClick={() => setExpanded(!expanded)}
-                                className="flex items-center cursor-pointer select-none"
+                                className="flex items-center select-none w-fit ml-auto"
                             >
                                 <span className="mr-2 color-teal">{expanded ? 'Close' : 'Edit'}</span>
                                 <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size="16" color="teal" />
diff --git a/frontend/app/components/ui/Icon/Icon.js b/frontend/app/components/ui/Icon/Icon.tsx
similarity index 76%
rename from frontend/app/components/ui/Icon/Icon.js
rename to frontend/app/components/ui/Icon/Icon.tsx
index 0ed03acaa..745d6412d 100644
--- a/frontend/app/components/ui/Icon/Icon.js
+++ b/frontend/app/components/ui/Icon/Icon.tsx
@@ -3,7 +3,19 @@ import cn from 'classnames';
 import SVG from 'UI/SVG';
 import styles from './icon.module.css';
 
-const Icon = ({
+interface IProps {
+  name: string
+  size?: number | string
+  height?: number
+  width?: number
+  color?: string
+  className?: string
+  style?: object
+  marginRight?: number
+  inline?: boolean
+}
+
+const Icon: React.FunctionComponent<IProps> = ({
   name,
   size = 12,
   height = size,
@@ -21,6 +33,7 @@ const Icon = ({
     ...style,
   };
   if (marginRight){
+    // @ts-ignore
     _style.marginRight = `${ marginRight }px`;
   }
 
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index b489a90c6..8f7bab660 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 interface Props {
     name: string;
-    size?: number;
-    width?: number;
-    height?: number;
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
     fill?: string;
 }