diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 109020a002907..feb752e2e4113 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -58,7 +58,10 @@ export const Resources: React.FC = ({ resources, getResourcesErr if (!agent) { return ( - {resource.name} + + {resource.name} + {resource.type} + ) @@ -71,6 +74,7 @@ export const Resources: React.FC = ({ resources, getResourcesErr {agentIndex === 0 && ( {resource.name} + {resource.type} )} @@ -85,6 +89,7 @@ export const Resources: React.FC = ({ resources, getResourcesErr {agent.status === "connected" && ( ({ borderRight: `1px solid ${theme.palette.divider}`, }, + resourceType: { + fontSize: 14, + color: theme.palette.text.secondary, + marginTop: theme.spacing(0.5), + display: "block", + }, + // Adds some left spacing agentColumn: { paddingLeft: `${theme.spacing(2)}px !important`, }, + + accessLink: { + color: theme.palette.text.secondary, + display: "flex", + alignItems: "center", + + "& svg": { + width: 16, + height: 16, + marginRight: theme.spacing(1.5), + }, + }, })) diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx index f8c93212103c7..0160e30910e58 100644 --- a/site/src/components/TerminalLink/TerminalLink.tsx +++ b/site/src/components/TerminalLink/TerminalLink.tsx @@ -1,15 +1,19 @@ import Link from "@material-ui/core/Link" +import { makeStyles } from "@material-ui/core/styles" +import ComputerIcon from "@material-ui/icons/Computer" import React from "react" import * as TypesGen from "../../api/typesGenerated" +import { combineClasses } from "../../util/combineClasses" export const Language = { - linkText: "Open in terminal", + linkText: "Open terminal", } export interface TerminalLinkProps { agentName?: TypesGen.WorkspaceAgent["name"] userName?: TypesGen.User["username"] workspaceName: TypesGen.Workspace["name"] + className?: string } /** @@ -19,10 +23,34 @@ export interface TerminalLinkProps { * If no user name is provided "me" is used however it makes the link not * shareable. */ -export const TerminalLink: React.FC = ({ agentName, userName = "me", workspaceName }) => { +export const TerminalLink: React.FC = ({ agentName, userName = "me", workspaceName, className }) => { + const styles = useStyles() + return ( - + + {Language.linkText} ) } + +// Replicating these from accessLink style from Resources component until we +// define if we want these styles coming from the parent or having a +// ResourceLink component for that +const useStyles = makeStyles((theme) => ({ + link: { + color: theme.palette.text.secondary, + display: "flex", + alignItems: "center", + }, + + icon: { + width: 16, + height: 16, + marginRight: theme.spacing(1.5), + }, +}))