1- import { makeStyles , useTheme } from "@mui/styles" ;
2- import { FC , useCallback , useEffect , useRef , useState } from "react" ;
1+ import {
2+ type CSSObject ,
3+ type Interpolation ,
4+ type Theme ,
5+ useTheme ,
6+ } from "@emotion/react" ;
7+ import { type FC , useCallback , useEffect , useRef , useState } from "react" ;
38import { Helmet } from "react-helmet-async" ;
49import { useNavigate , useParams , useSearchParams } from "react-router-dom" ;
510import { colors } from "theme/colors" ;
@@ -16,7 +21,7 @@ import { pageTitle } from "utils/page";
1621import { useProxy } from "contexts/ProxyContext" ;
1722import Box from "@mui/material/Box" ;
1823import { useDashboard } from "components/Dashboard/DashboardProvider" ;
19- import { Region } from "api/typesGenerated" ;
24+ import type { Region } from "api/typesGenerated" ;
2025import { getLatencyColor } from "utils/latency" ;
2126import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency" ;
2227import { openMaybePortForwardedURL } from "utils/portForward" ;
@@ -45,7 +50,6 @@ export const Language = {
4550
4651const TerminalPage :FC = ( ) => {
4752const navigate = useNavigate ( ) ;
48- const styles = useStyles ( ) ;
4953const { proxy} = useProxy ( ) ;
5054const params = useParams ( ) as { username :string ; workspace :string } ;
5155const username = params . username . replace ( "@" , "" ) ;
@@ -316,11 +320,7 @@ const TerminalPage: FC = () => {
316320{ lifecycleState === "ready" &&
317321prevLifecycleState . current === "starting" && < LoadedScriptsAlert /> }
318322{ terminalState === "disconnected" && < DisconnectedAlert /> }
319- < div
320- className = { styles . terminal }
321- ref = { xtermRef }
322- data-testid = "terminal"
323- />
323+ < div css = { styles . terminal } ref = { xtermRef } data-testid = "terminal" />
324324{ dashboard . experiments . includes ( "moons" ) &&
325325selectedProxy &&
326326latency && (
@@ -426,35 +426,8 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
426426) ;
427427} ;
428428
429- const useStyles = makeStyles ( ( theme ) => ( {
430- overlay :{
431- position :"absolute" ,
432- pointerEvents :"none" ,
433- top :0 ,
434- left :0 ,
435- bottom :0 ,
436- right :0 ,
437- zIndex :1 ,
438- alignItems :"center" ,
439- justifyContent :"center" ,
440- display :"flex" ,
441- color :"white" ,
442- fontSize :16 ,
443- backgroundColor :"rgba(0, 0, 0, 0.6)" ,
444- backdropFilter :"blur(4px)" ,
445- "&.connected" :{
446- opacity :0 ,
447- } ,
448- } ,
449- overlayText :{
450- fontSize :16 ,
451- fontWeight :600 ,
452- } ,
453- overlaySubtext :{
454- fontSize :14 ,
455- color :theme . palette . text . secondary ,
456- } ,
457- terminal :{
429+ const styles = {
430+ terminal :( theme ) => ( {
458431width :"100vw" ,
459432overflow :"hidden" ,
460433backgroundColor :theme . palette . background . paper ,
@@ -480,36 +453,7 @@ const useStyles = makeStyles((theme) => ({
480453minHeight :20 ,
481454backgroundColor :"rgba(255, 255, 255, 0.18)" ,
482455} ,
483- } ,
484- alert :{
485- display :"flex" ,
486- background :theme . palette . background . paperLight ,
487- alignItems :"center" ,
488- padding :theme . spacing ( 2 ) ,
489- gap :theme . spacing ( 2 ) ,
490- borderBottom :`1px solid${ theme . palette . divider } ,
491- ...theme . typography . body2 ,
492- } ,
493- alertIcon :{
494- color :theme . palette . warning . light ,
495- fontSize :theme . spacing ( 3 ) ,
496- } ,
497- alertError :{
498- "& $alertIcon" :{
499- color :theme . palette . error . light ,
500- } ,
501- } ,
502- alertTitle :{
503- fontWeight :600 ,
504- color :theme . palette . text . primary ,
505- } ,
506- alertMessage :{
507- fontSize :14 ,
508- color :theme . palette . text . secondary ,
509- } ,
510- alertActions :{
511- marginLeft :"auto" ,
512- } ,
513- } ) ) ;
456+ } ) ,
457+ } satisfies Record < string , Interpolation < Theme > > ;
514458
515459export default TerminalPage ;