Use numeric value for font size instead of static class

Feature #14425

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 1061a2ecb12db81cbc404ca0d41ab4428e3f78ce..a0fbd6ef970b46eb016d6e44599207be2c7c5bd8 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -50,7 +50,7 @@ import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import Warning from '@material-ui/icons/Warning';
 
-export type IconType = React.SFC<{ className?: string }>;
+export type IconType = React.SFC<{ className?: string, style?: object }>;
 
 export const AddIcon: IconType = (props) => <Add {...props} />;
 export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;

diff --git a/src/components/list-item-text-icon/list-item-text-icon.tsx b/src/components/list-item-text-icon/list-item-text-icon.tsx
index e18e9cccf5ccc3157a3ed4df6d9ed9ec114a2e55..29768c050f797974bd4e33815ce5d41d6ae6dc2c 100644 (file)
--- a/src/components/list-item-text-icon/list-item-text-icon.tsx
+++ b/src/components/list-item-text-icon/list-item-text-icon.tsx
@@ -9,7 +9,7 @@ import { ListItemIcon, ListItemText, Typography } from '@material-ui/core';
 import { IconType } from '../icon/icon';
 import * as classnames from "classnames";
 
-type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active' | 'fixFontSize';
+type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -24,9 +24,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     hasMargin: {
         marginLeft: `${theme.spacing.unit}px`,
-    },
-    fixFontSize: {
-        fontSize: '1.25rem'
     }
 });
 
@@ -35,7 +32,7 @@ export interface ListItemTextIconDataProps {
     name: string;
     isActive?: boolean;
     hasMargin?: boolean;
-    fixFontSize?: boolean;
+    iconSize?: number;
 }
 
 type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
@@ -43,16 +40,15 @@ type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
 export const ListItemTextIcon = withStyles(styles)(
     class extends React.Component<ListItemTextIconProps, {}> {
         render() {
-            const { classes, isActive, hasMargin, name, icon: Icon, fixFontSize } = this.props;
+            const { classes, isActive, hasMargin, name, icon: Icon, iconSize } = this.props;
             return (
                 <Typography component='span' className={classes.root}>
                     <ListItemIcon className={classnames({
                             [classes.hasMargin]: hasMargin,
                             [classes.active]: isActive
                         })}>
-                        <Icon className={classnames({
-                            [classes.fixFontSize]: fixFontSize
-                        })}/>
+
+                        <Icon style={{ fontSize: `${iconSize}rem` }} />
                     </ListItemIcon>
                     <ListItemText primary={
                         <Typography variant='body1' className={classnames(classes.listItemText, {

diff --git a/src/views-components/side-panel-tree/side-panel-tree.tsx b/src/views-components/side-panel-tree/side-panel-tree.tsx
index fc80332b54bd9b3a0d036c18db6002207166472e..33ee97f95fd7e99bc5b79ba93d23ef2f7f989b2e 100644 (file)
--- a/src/views-components/side-panel-tree/side-panel-tree.tsx
+++ b/src/views-components/side-panel-tree/side-panel-tree.tsx
@@ -45,7 +45,7 @@ const renderSidePanelItem = (item: TreeItem<ProjectResource>) =>
         name={typeof item.data === 'string' ? item.data : item.data.name}
         isActive={item.active}
         hasMargin={true}
-        fixFontSize={true}
+        iconSize={1.25}
     />;
 
 const getProjectPickerIcon = (item: TreeItem<ProjectResource | string>) =>