diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx index b4bb8aa71d..d4976d0e2a 100644 --- a/site/src/components/BuildsTable/BuildAvatar.tsx +++ b/site/src/components/BuildsTable/BuildAvatar.tsx @@ -27,13 +27,13 @@ const StyledBadge = withStyles((theme) => ({ const StyledAvatar = withStyles((theme) => ({ root: { - background: theme.palette.background.paperLight, + background: theme.palette.divider, color: theme.palette.text.primary, border: `2px solid ${theme.palette.divider}`, "& svg": { - width: 24, - height: 24, + width: 18, + height: 18, }, }, }))(Avatar) diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index 1a55f2255b..1f1d38f95c 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -75,6 +75,7 @@ const useStyles = makeStyles((theme) => ({ connected: { backgroundColor: theme.palette.success.light, + boxShadow: `0 0 12px 0 ${theme.palette.success.light}`, }, disconnected: { diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx index 5180ce5b5d..db01c7e00e 100644 --- a/site/src/components/Resources/ResourceAvatar.tsx +++ b/site/src/components/Resources/ResourceAvatar.tsx @@ -42,12 +42,11 @@ export const ResourceAvatar: React.FC = ({ resource }) => { const useStyles = makeStyles((theme) => ({ resourceAvatar: { - color: theme.palette.info.contrastText, - backgroundColor: theme.palette.info.main, + backgroundColor: theme.palette.divider, "& img": { - width: 20, - height: 20, + width: 18, + height: 18, }, }, })) diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index e8721e9f0d..d351822e21 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -124,7 +124,9 @@ export const ResourceCard: FC = ({ className={styles.agentRow} > - +
+ +
{agent.name}
= ({ > {showApps && agent.status === "connected" && ( <> - {applicationsHost !== undefined && ( - - )} - {!hideSSHButton && ( - - )} - {agent.apps.map((app) => ( = ({ appSharingLevel={app.sharing_level} /> ))} + + + {!hideSSHButton && ( + + )} + {applicationsHost !== undefined && ( + + )} )} {showApps && agent.status === "connecting" && ( @@ -278,6 +281,12 @@ const useStyles = makeStyles((theme) => ({ }, }, + agentStatusWrapper: { + width: theme.spacing(4.5), + display: "flex", + justifyContent: "center", + }, + agentName: { fontWeight: 600, }, diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index 51d03888e5..ce24a9c628 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -58,15 +58,21 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => { }, }, sizeSmall: { - padding: `0 12px`, + padding: `0 16px`, fontSize: 14, minHeight: 36, + borderRadius: 6, }, iconSizeSmall: { - width: 16, - height: 16, + width: 14, + height: 14, marginLeft: "0 !important", - marginRight: 12, + marginRight: 8, + + "& svg": { + width: 14, + height: 14, + }, }, outlined: { border: `1px solid ${palette.divider}`,