emotion: CliAuthPageView

coder · aslilac · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 44ff69b6dbca3b4b33f5487cc9c9358f448eb2be
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -1,18 +1,18 @@
 import Button from "@mui/material/Button";
-import { makeStyles } from "@mui/styles";
+import { useTheme } from "@emotion/react";
+import { type FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
 import { Welcome } from "components/Welcome/Welcome";
-import { FC } from "react";
-import { Link as RouterLink } from "react-router-dom";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 
 export interface CliAuthPageViewProps {
   sessionToken: string | null;
 }
 
 export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   if (!sessionToken) {
     return <FullScreenLoader />;
@@ -22,45 +22,39 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
     <SignInLayout>
       <Welcome message="Session token" />
 
-      <p className={styles.text}>
+      <p
+        css={{
+          fontSize: 16,
+          color: theme.palette.text.secondary,
+          marginBottom: theme.spacing(4),
+          textAlign: "center",
+          lineHeight: "160%",
+        }}
+      >
         Copy the session token below and{" "}
-        <strong className={styles.lineBreak}>paste it in your terminal</strong>.
+        <strong
+          css={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          paste it in your terminal
+        </strong>
+        .
       </p>
 
       <CodeExample code={sessionToken} password />
 
-      <div className={styles.links}>
+      <div
+        css={{
+          display: "flex",
+          justifyContent: "flex-end",
+          paddingTop: theme.spacing(1),
+        }}
+      >
         <Button component={RouterLink} size="large" to="/workspaces" fullWidth>
           Go to workspaces
         </Button>
       </div>
     </SignInLayout>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  title: {
-    fontSize: theme.spacing(4),
-    fontWeight: 400,
-    lineHeight: "140%",
-    margin: 0,
-  },
-
-  text: {
-    fontSize: 16,
-    color: theme.palette.text.secondary,
-    marginBottom: theme.spacing(4),
-    textAlign: "center",
-    lineHeight: "160%",
-  },
-
-  lineBreak: {
-    whiteSpace: "nowrap",
-  },
-
-  links: {
-    display: "flex",
-    justifyContent: "flex-end",
-    paddingTop: theme.spacing(1),
-  },
-}));