fix(ui): typings for iconts, fix for widget name field

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" />

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`;
   }
 

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;
 }