diff --git a/site/src/components/AvatarData/AvatarData.stories.tsx b/site/src/components/AvatarData/AvatarData.stories.tsx index 1f41e07a7d841..29ba74f0bbbf9 100644 --- a/site/src/components/AvatarData/AvatarData.stories.tsx +++ b/site/src/components/AvatarData/AvatarData.stories.tsx @@ -14,6 +14,13 @@ Example.args = { subtitle: "coder@coder.com", } +export const WithHighlightTitle = Template.bind({}) +WithHighlightTitle.args = { + title: "coder", + subtitle: "coder@coder.com", + highlightTitle: true, +} + export const WithLink = Template.bind({}) WithLink.args = { title: "coder", diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index ecad62bad1ced..ad531b039ba61 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -3,16 +3,21 @@ import Link from "@material-ui/core/Link" import { makeStyles } from "@material-ui/core/styles" import { FC } from "react" import { Link as RouterLink } from "react-router-dom" -import { combineClasses } from "../../util/combineClasses" import { firstLetter } from "../../util/firstLetter" +import { + TableCellData, + TableCellDataPrimary, + TableCellDataSecondary, +} from "../TableCellData/TableCellData" export interface AvatarDataProps { title: string subtitle: string + highlightTitle?: boolean link?: string } -export const AvatarData: FC = ({ title, subtitle, link }) => { +export const AvatarData: FC = ({ title, subtitle, link, highlightTitle }) => { const styles = useStyles() return ( @@ -20,19 +25,17 @@ export const AvatarData: FC = ({ title, subtitle, link }) => { {firstLetter(title)} {link ? ( - - {title} - {subtitle} + + + {title} + {subtitle} + ) : ( -
- {title} - {subtitle} -
+ + {title} + {subtitle} + )} ) @@ -46,20 +49,4 @@ const useStyles = makeStyles((theme) => ({ avatar: { marginRight: theme.spacing(1.5), }, - info: { - display: "flex", - flexDirection: "column", - color: theme.palette.text.primary, - - "& span": { - fontSize: 12, - color: theme.palette.text.secondary, - }, - }, - link: { - textDecoration: "none", - "&:hover": { - textDecoration: "underline", - }, - }, })) diff --git a/site/src/components/TableCellData/TableCellData.tsx b/site/src/components/TableCellData/TableCellData.tsx new file mode 100644 index 0000000000000..86fff0fbd6322 --- /dev/null +++ b/site/src/components/TableCellData/TableCellData.tsx @@ -0,0 +1,39 @@ +import { makeStyles } from "@material-ui/core/styles" +import React from "react" +import { Stack } from "../Stack/Stack" + +interface StyleProps { + highlight?: boolean +} + +export const TableCellData: React.FC = ({ children }) => { + return {children} +} + +export const TableCellDataPrimary: React.FC<{ highlight?: boolean }> = ({ + children, + highlight, +}) => { + const styles = useStyles({ highlight }) + + return {children} +} + +export const TableCellDataSecondary: React.FC = ({ children }) => { + const styles = useStyles() + + return {children} +} + +const useStyles = makeStyles((theme) => ({ + primary: { + color: ({ highlight }: StyleProps) => + highlight ? theme.palette.text.primary : theme.palette.text.secondary, + fontWeight: ({ highlight }: StyleProps) => (highlight ? 600 : undefined), + }, + + secondary: { + fontSize: 12, + color: theme.palette.text.secondary, + }, +})) diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx index 32e549bb326a0..3e021e6f7c79d 100644 --- a/site/src/components/UsersTable/UsersTableBody.tsx +++ b/site/src/components/UsersTable/UsersTableBody.tsx @@ -72,7 +72,7 @@ export const UsersTableBody: FC = ({ return ( - + = ({ w className={styles.clickableTableRow} > - + + {workspace.name} + {workspace.owner_name} + + + {workspace.template_name} - {workspace.template_name} {workspace.outdated ? ( diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx index a512e3b65d5fc..c99559d2c6219 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx @@ -27,9 +27,9 @@ export const WorkspacesTable: FC = ({ isLoading, workspace {Language.name} - {Language.lastBuiltBy} {Language.template} - {Language.version} + {Language.lastBuiltBy} + {Language.version} {Language.status} diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 9a309954732c2..074208f2d3747 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -139,7 +139,11 @@ export const TemplatesPageView: FC = (props) => { className={styles.clickableTableRow} > - +