fix: launch plan icon (#777)

Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Jun 21, 2023 · 4b57956 · 4b57956
1 parent 4783c39
commit 4b57956
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 42 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@flyteorg/locale": "^0.0.2",
-    "@flyteorg/ui-atoms": "^0.0.3",
+    "@flyteorg/ui-atoms": "^0.0.4",
     "@material-ui/core": "^4.0.0",
     "@material-ui/icons": "^4.0.0",
     "classnames": "^2.3.1"

diff --git a/packages/console/package.json b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
@@ -61,7 +61,7 @@
     "@flyteorg/flyte-api": "^0.0.2",
     "@flyteorg/flyteidl-types": "^0.0.4",
     "@flyteorg/locale": "^0.0.2",
-    "@flyteorg/ui-atoms": "^0.0.3",
+    "@flyteorg/ui-atoms": "^0.0.4",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/pickers": "^3.2.2",

diff --git a/packages/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx
@@ -86,6 +86,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   searchInputContainer: {
     padding: 0,
   },
+  svgIcon: {
+    marginRight: theme.spacing(2),
+  },
 }));
 
 /**
@@ -109,7 +112,12 @@ const SearchableLaunchPlanNameItem: React.FC<SearchableLaunchPlanNameItemProps>
           className={classNames(listStyles.searchResult, styles.itemContainer)}
         >
           <div className={styles.itemName}>
-            <MuiLaunchPlanIcon width={16} height={16} />
+            <MuiLaunchPlanIcon
+              width={16}
+              height={16}
+              className={styles.svgIcon}
+              fill="#666666"
+            />
             <div>{id.name}</div>
           </div>
         </div>

diff --git a/packages/console/src/components/Navigation/ProjectNavigation.tsx b/packages/console/src/components/Navigation/ProjectNavigation.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ChevronRight from '@material-ui/icons/ChevronRight';
@@ -9,7 +10,6 @@ import { useCommonStyles } from 'components/common/styles';
 import { withRouteParams } from 'components/common/withRouteParams';
 import { useProject, useProjects } from 'components/hooks/useProjects';
 import { Project } from 'models/Project/types';
-import * as React from 'react';
 import { matchPath, NavLinkProps, RouteComponentProps } from 'react-router-dom';
 import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
@@ -126,7 +126,7 @@ const ProjectNavigationImpl: React.FC<ProjectNavigationRouteParams> = ({
       text: 'Tasks',
     },
     {
-      icon: MuiLaunchPlanIcon as any,
+      icon: MuiLaunchPlanIcon,
       isActive: (match, location) => {
         const finalMatch = match
           ? match

diff --git a/packages/ui-atoms/package.json b/packages/ui-atoms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/ui-atoms",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Flyteconsole UI atoms",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

diff --git a/packages/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx
@@ -1,39 +1,16 @@
-import { makeStyles } from '@material-ui/core/styles';
-import { SvgIconProps, Theme } from '@material-ui/core';
-import classnames from 'classnames';
 import * as React from 'react';
+import { SvgIconProps, SvgIcon } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  svg: {
-    marginTop: 0,
-    marginRight: theme.spacing(2),
-    display: 'inline-block',
-    fontSize: '1.5rem',
-    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    flexShrink: 0,
-    userSelect: 'none',
-    color: '#666666',
-  },
-}));
-
-export const MuiLaunchPlanIcon = (props: SvgIconProps): JSX.Element => {
-  const { fill, className, width = '1em', height = '1em', fontSize } = props;
-  const styles = useStyles();
+export const MuiLaunchPlanIcon = (props: SvgIconProps) => {
+  const { fill, ...rest } = props;
   return (
-    <svg
-      className={classnames(styles.svg, className)}
-      width={width}
-      height={height}
-      viewBox="0 0 16 16"
-      xmlns="http://www.w3.org/2000/svg"
-      fontSize={fontSize}
-    >
+    <SvgIcon viewBox="0 0 24 24" {...rest}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M2 15V2C2 1.44772 2.44772 1 3 1H12.7391C13.2914 1 13.7391 1.44772 13.7391 2V11.4421H9.82593H9.32593V11.9421V16H3C2.44772 16 2 15.5523 2 15ZM10.3259 12.4421H13.384L10.3259 15.5002V12.4421ZM5.1307 5.93466H11.0003V4.93466H5.1307V5.93466ZM11.0004 8.83351H5.13079V7.83351H11.0004V8.83351ZM5.13079 11.732H8.02934V10.732H5.13079V11.732Z"
+        d="M 4.963 19.792 L 4.963 4.208 C 4.963 3.545 5.5 3.009 6.162 3.009 L 17.837 3.009 C 18.501 3.009 19.037 3.545 19.037 4.208 L 19.037 15.527 L 14.345 15.527 L 13.746 15.527 L 13.746 16.126 L 13.746 20.991 L 6.162 20.991 C 5.5 20.991 4.963 20.454 4.963 19.792 Z M 14.945 16.724 L 18.612 16.724 L 14.945 20.393 L 14.945 16.724 Z M 8.717 8.924 L 15.753 8.924 L 15.753 7.725 L 8.717 7.725 L 8.717 8.924 Z M 15.753 12.4 L 8.717 12.4 L 8.717 11.201 L 15.753 11.201 L 15.753 12.4 Z M 8.717 15.873 L 12.192 15.873 L 12.192 14.676 L 8.717 14.676 L 8.717 15.873 Z"
         fill={fill || 'currentColor'}
       />
-    </svg>
+    </SvgIcon>
   );
 };
diff --git a/website/package.json b/website/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@flyteorg/common": "^0.0.4",
-    "@flyteorg/console": "^0.0.38",
+    "@flyteorg/console": "^0.0.39",
     "long": "^4.0.0",
     "protobufjs": "~6.11.3",
     "react-ga4": "^1.4.1",

diff --git a/yarn.lock b/yarn.lock
@@ -2020,7 +2020,7 @@ __metadata:
   resolution: "@flyteconsole/client-app@workspace:website"
   dependencies:
     "@flyteorg/common": ^0.0.4
-    "@flyteorg/console": ^0.0.38
+    "@flyteorg/console": ^0.0.39
     "@types/long": ^3.0.32
     long: ^4.0.0
     protobufjs: ~6.11.3
@@ -2047,7 +2047,7 @@ __metadata:
   resolution: "@flyteorg/components@workspace:packages/components"
   dependencies:
     "@flyteorg/locale": ^0.0.2
-    "@flyteorg/ui-atoms": ^0.0.3
+    "@flyteorg/ui-atoms": ^0.0.4
     "@material-ui/core": ^4.0.0
     "@material-ui/icons": ^4.0.0
     "@types/react": ^16.9.34
@@ -2059,7 +2059,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@flyteorg/console@^0.0.38, @flyteorg/console@workspace:packages/console":
+"@flyteorg/console@^0.0.39, @flyteorg/console@workspace:packages/console":
   version: 0.0.0-use.local
   resolution: "@flyteorg/console@workspace:packages/console"
   dependencies:
@@ -2070,7 +2070,7 @@ __metadata:
     "@flyteorg/flyte-api": ^0.0.2
     "@flyteorg/flyteidl-types": ^0.0.4
     "@flyteorg/locale": ^0.0.2
-    "@flyteorg/ui-atoms": ^0.0.3
+    "@flyteorg/ui-atoms": ^0.0.4
     "@material-ui/core": ^4.12.4
     "@material-ui/icons": ^4.11.3
     "@material-ui/pickers": ^3.2.2
@@ -2190,7 +2190,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@flyteorg/ui-atoms@^0.0.3, @flyteorg/ui-atoms@workspace:packages/ui-atoms":
+"@flyteorg/ui-atoms@^0.0.4, @flyteorg/ui-atoms@workspace:packages/ui-atoms":
   version: 0.0.0-use.local
   resolution: "@flyteorg/ui-atoms@workspace:packages/ui-atoms"
   dependencies: