11import CircularProgress from "@mui/material/CircularProgress" ;
22import Link from "@mui/material/Link" ;
3- import { makeStyles } from "@mui/styles" ;
43import Tooltip from "@mui/material/Tooltip" ;
54import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline" ;
5+ import { type FC , useState } from "react" ;
6+ import { useTheme } from "@emotion/react" ;
7+ import { getApiKey } from "api/api" ;
8+ import type * as TypesGen from "api/typesGenerated" ;
9+ import { useProxy } from "contexts/ProxyContext" ;
610import { PrimaryAgentButton } from "components/Resources/AgentButton" ;
7- import { FC , useState } from "react" ;
8- import { combineClasses } from "utils/combineClasses" ;
9- import * as TypesGen from "api/typesGenerated" ;
11+ import { createAppLinkHref } from "utils/apps" ;
1012import { generateRandomString } from "utils/random" ;
1113import { BaseIcon } from "./BaseIcon" ;
1214import { ShareIcon } from "./ShareIcon" ;
13- import { useProxy } from "contexts/ProxyContext" ;
14- import { createAppLinkHref } from "utils/apps" ;
15- import { getApiKey } from "api/api" ;
1615
1716const Language = {
1817appTitle :( appName :string , identifier :string ) :string =>
@@ -31,7 +30,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
3130const appsHost = proxy . preferredWildcardHostname ;
3231const [ fetchingSessionToken , setFetchingSessionToken ] = useState ( false ) ;
3332
34- const styles = useStyles ( ) ;
33+ const theme = useTheme ( ) ;
3534const username = workspace . owner_name ;
3635
3736let appSlug = app . slug ;
@@ -65,12 +64,18 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
6564}
6665if ( app . health === "unhealthy" ) {
6766canClick = false ;
68- icon = < ErrorOutlineIcon className = { styles . unhealthyIcon } /> ;
67+ icon = < ErrorOutlineIcon css = { { color : theme . palette . warning . light } } /> ;
6968primaryTooltip = "Unhealthy" ;
7069}
7170if ( ! appsHost && app . subdomain ) {
7271canClick = false ;
73- icon = < ErrorOutlineIcon className = { styles . notConfiguredIcon } /> ;
72+ icon = (
73+ < ErrorOutlineIcon
74+ css = { {
75+ color :theme . palette . grey [ 300 ] ,
76+ } }
77+ />
78+ ) ;
7479primaryTooltip =
7580"Your admin has not configured subdomain application access" ;
7681}
@@ -86,7 +91,13 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
8691endIcon = { isPrivateApp ?undefined :< ShareIcon app = { app } /> }
8792disabled = { ! canClick }
8893>
89- < span className = { combineClasses ( { [ styles . appName ] :! isPrivateApp } ) } >
94+ < span
95+ css = {
96+ ! isPrivateApp && {
97+ marginRight :theme . spacing ( 1 ) ,
98+ }
99+ }
100+ >
90101{ appDisplayName }
91102</ span >
92103</ PrimaryAgentButton >
@@ -98,7 +109,10 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
98109< Link
99110href = { href }
100111target = "_blank"
101- className = { canClick ?styles . link :styles . disabledLink }
112+ css = { {
113+ pointerEvents :canClick ?"none" :undefined ,
114+ textDecoration :"none !important" ,
115+ } }
102116onClick = {
103117canClick
104118 ?async ( event ) => {
@@ -143,26 +157,3 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
143157</ Tooltip >
144158) ;
145159} ;
146-
147- const useStyles = makeStyles ( ( theme ) => ( {
148- link :{
149- textDecoration :"none !important" ,
150- } ,
151-
152- disabledLink :{
153- pointerEvents :"none" ,
154- textDecoration :"none !important" ,
155- } ,
156-
157- unhealthyIcon :{
158- color :theme . palette . warning . light ,
159- } ,
160-
161- notConfiguredIcon :{
162- color :theme . palette . grey [ 300 ] ,
163- } ,
164-
165- appName :{
166- marginRight :theme . spacing ( 1 ) ,
167- } ,
168- } ) ) ;