refactor: change text component to allow unselected option

striker-ui/components/Text/BodyText.tsx

@@ -1,15 +1,36 @@
 import { Typography } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import { TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { makeStyles } from '@material-ui/core/styles';
+import { TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
-const WhiteTypography = withStyles({
-  root: {
+interface TextProps {
+  text: string;
+  selected?: boolean;
+}
+
+const useStyles = makeStyles(() => ({
+  selected: {
     color: TEXT,
   },
-})(Typography);
+  unselected: {
+    color: UNSELECTED,
+  },
+}));
+
+const BodyText = ({ text, selected }: TextProps): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Typography
+      variant="subtitle1"
+      className={selected ? classes.selected : classes.unselected}
+    >
+      {text}
+    </Typography>
+  );
+};
 
-const BodyText = ({ text }: { text: string }): JSX.Element => {
-  return <WhiteTypography variant="subtitle1">{text}</WhiteTypography>;
+BodyText.defaultProps = {
+  selected: true,
 };
 
 export default BodyText;

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -9,3 +9,4 @@ export const PURPLE_OFF = '#7353BA';
 export const BLUE = '#4785FF';
 export const GREY = '#E5E5E5';
 export const HOVER = '#444';
+export const UNSELECTED = '#888';