refactor: use stylex in support_box and network_diagnostics

project-slippi · Jan 24, 2024 · f94340e · f94340e
1 parent 9a08952
commit f94340e
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 79 deletions.
diff --git a/src/renderer/pages/settings/help_page/network_diagnostics/cgnat_command_section.tsx b/src/renderer/pages/settings/help_page/network_diagnostics/cgnat_command_section.tsx
@@ -1,29 +1,31 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
 import Button from "@mui/material/Button";
 import InputBase from "@mui/material/InputBase";
 import Typography from "@mui/material/Typography";
+import * as stylex from "@stylexjs/stylex";
 import React from "react";
 
-const buttonStyle = { marginLeft: "8px", width: "96px" };
 const hiddenIpAddress = "···.···.···.···";
-const inputBaseCss = css`
-  padding: 4px 8px;
-  border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.4);
-  font-size: 1em;
-  margin: 8px 0;
-`;
 
-// This is used to correct an observed 1px vertical misalignment
-const AlignCenterDiv = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const DialogBody = styled.div`
-  margin-bottom: 1em;
-`;
+const styles = stylex.create({
+  button: {
+    marginLeft: "8px",
+    width: "96px",
+  },
+  cgnatCmd: {
+    padding: "4px 8px",
+    borderRadius: "10px",
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    fontSize: "1em",
+    margin: "8px 0",
+  },
+  body: {
+    marginBottom: "1em",
+  },
+  alignCenterDiv: {
+    display: "flex",
+    alignItems: "center",
+  },
+});
 
 type CgnatCommandSectionProps = {
   address: string;
@@ -46,16 +48,18 @@ export const CgnatCommandSection = ({ address }: CgnatCommandSectionProps) => {
   return (
     <div>
       <Typography variant="subtitle2">Run this command</Typography>
-      <AlignCenterDiv>
-        <InputBase css={inputBaseCss} disabled={true} value={displayedCgnatCommand} />
-        <Button variant="contained" color="secondary" onClick={onCgnatCommandShowHide} style={buttonStyle}>
+      <div {...stylex.props(styles.alignCenterDiv)}>
+        <InputBase disabled={true} value={displayedCgnatCommand} {...stylex.props(styles.cgnatCmd)} />
+        <Button variant="contained" color="secondary" onClick={onCgnatCommandShowHide} {...stylex.props(styles.button)}>
           {cgnatCommandHidden ? "Reveal" : "Hide"}
         </Button>
-        <Button variant="contained" color="secondary" onClick={onCgnatCommandCopy} style={buttonStyle}>
+        <Button variant="contained" color="secondary" onClick={onCgnatCommandCopy} {...stylex.props(styles.button)}>
           {cgnatCommandCopied ? "Copied!" : "Copy"}
         </Button>
-      </AlignCenterDiv>
-      <DialogBody>More than one hop to your external IP address indicates CGNAT or Double NAT (or VPN).</DialogBody>
+      </div>
+      <div {...stylex.props(styles.body)}>
+        More than one hop to your external IP address indicates CGNAT or Double NAT (or VPN).
+      </div>
     </div>
   );
 };
diff --git a/src/renderer/pages/settings/help_page/network_diagnostics/nat_type_section.tsx b/src/renderer/pages/settings/help_page/network_diagnostics/nat_type_section.tsx
@@ -1,24 +1,28 @@
 import { NatType } from "@common/types";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
 import Button from "@mui/material/Button";
 import InputBase from "@mui/material/InputBase";
 import Typography from "@mui/material/Typography";
+import * as stylex from "@stylexjs/stylex";
 import React from "react";
 
-const buttonStyle = { marginLeft: "8px", width: "96px" };
 const hiddenIpAddress = "···.···.···.···";
-const inputBaseCss = css`
-  padding: 4px 8px;
-  border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.4);
-  font-size: 1em;
-  margin: 8px 0;
-`;
 
-const DialogBody = styled.div`
-  margin-bottom: 1em;
-`;
+const styles = stylex.create({
+  button: {
+    marginLeft: "8px",
+    width: "96px",
+  },
+  ipAddress: {
+    padding: "4px 8px",
+    borderRadius: "10px",
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    fontSize: "1em",
+    margin: "8px 0",
+  },
+  body: {
+    marginBottom: "1em",
+  },
+});
 
 const getIpAddressTitle = (natType: NatType) => {
   if (natType === NatType.FAILED) {
@@ -49,18 +53,22 @@ export const NatTypeSection = ({ address, description, natType, title }: NatType
     <div>
       <Typography variant="subtitle2">{ipAddressTitle}</Typography>
       {natType !== NatType.FAILED && (
-        <DialogBody>
-          <InputBase css={inputBaseCss} disabled={true} value={ipAddressHidden ? hiddenIpAddress : address} />
-          <Button variant="contained" color="secondary" onClick={onIpAddressShowHide} style={buttonStyle}>
+        <div {...stylex.props(styles.body)}>
+          <InputBase
+            disabled={true}
+            value={ipAddressHidden ? hiddenIpAddress : address}
+            {...stylex.props(styles.ipAddress)}
+          />
+          <Button variant="contained" color="secondary" onClick={onIpAddressShowHide} {...stylex.props(styles.button)}>
             {ipAddressHidden ? "Reveal" : "Hide"}
           </Button>
-          <Button variant="contained" color="secondary" onClick={onIpAddressCopy} style={buttonStyle}>
+          <Button variant="contained" color="secondary" onClick={onIpAddressCopy} {...stylex.props(styles.button)}>
             {ipAddressCopied ? "Copied!" : "Copy"}
           </Button>
-        </DialogBody>
+        </div>
       )}
       <Typography variant="subtitle2">{title}</Typography>
-      <DialogBody>{description}</DialogBody>
+      <div {...stylex.props(styles.body)}>{description}</div>
     </div>
   );
 };
diff --git a/src/renderer/pages/settings/help_page/network_diagnostics/network_diagnostics_button.tsx b/src/renderer/pages/settings/help_page/network_diagnostics/network_diagnostics_button.tsx
@@ -6,6 +6,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
+import * as stylex from "@stylexjs/stylex";
 import React from "react";
 
 import { Button as ActionButton } from "@/components/form/button";
@@ -19,6 +20,19 @@ type NetworkInformation = {
   portMapping: PortMapping;
 };
 
+const styles = stylex.create({
+  container: {
+    textAlign: "center",
+  },
+  text: {
+    marginTop: 20,
+  },
+  icon: {
+    height: 18,
+    width: 18,
+  },
+});
+
 export const NetworkDiagnosticsButton = React.memo(() => {
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -45,9 +59,9 @@ export const NetworkDiagnosticsButton = React.memo(() => {
   const networkDiagnosticsContent = React.useMemo(() => {
     if (isLoading) {
       return (
-        <div style={{ textAlign: "center" }}>
+        <div {...stylex.props(styles.container)}>
           <CircularProgress color="inherit" />
-          <div style={{ marginTop: 20 }}>Running network diagnostics...</div>
+          <div {...stylex.props(styles.text)}>Running network diagnostics...</div>
         </div>
       );
     }
@@ -63,7 +77,7 @@ export const NetworkDiagnosticsButton = React.memo(() => {
   return (
     <div>
       <ActionButton
-        startIcon={<NetworkCheckIcon fill={colors.purpleLighter} style={{ height: 18, width: 18 }} />}
+        startIcon={<NetworkCheckIcon fill={colors.purpleLighter} {...stylex.props(styles.icon)} />}
         color="secondary"
         variant="contained"
         onClick={openDialog}

diff --git a/src/renderer/pages/settings/help_page/network_diagnostics/network_diagnostics_result.tsx b/src/renderer/pages/settings/help_page/network_diagnostics/network_diagnostics_result.tsx
@@ -1,17 +1,19 @@
 import type { PortMapping } from "@common/types";
 import { NatType, Presence } from "@common/types";
-import styled from "@emotion/styled";
 import Button from "@mui/material/Button";
 import DialogActions from "@mui/material/DialogActions";
 import Typography from "@mui/material/Typography";
+import * as stylex from "@stylexjs/stylex";
 import React from "react";
 
 import { CgnatCommandSection } from "./cgnat_command_section";
 import { NatTypeSection } from "./nat_type_section";
 
-const ContentBody = styled.div`
-  margin-bottom: 1em;
-`;
+const styles = stylex.create({
+  contentBody: {
+    marginBottom: "1em",
+  },
+});
 
 const getNatTypeTitle = (natType: NatType) => {
   if (natType === NatType.FAILED) {
@@ -117,9 +119,9 @@ export const NetworkDiagnosticsResult = React.memo(
         <div>
           <NatTypeSection address={ipAddress} description={natTypeDescription} natType={natType} title={natTypeTitle} />
           <Typography variant="subtitle2">{portMappingTitle}</Typography>
-          <ContentBody>{portMappingDescription}</ContentBody>
+          <div {...stylex.props(styles.contentBody)}>{portMappingDescription}</div>
           <Typography variant="subtitle2">{cgnatTitle}</Typography>
-          <ContentBody>{cgnatDescription}</ContentBody>
+          <div {...stylex.props(styles.contentBody)}>{cgnatDescription}</div>
           {cgnat === Presence.FAILED && ipAddress && <CgnatCommandSection address={ipAddress} />}
         </div>
         <DialogActions>

diff --git a/src/renderer/pages/settings/help_page/support_box.tsx b/src/renderer/pages/settings/help_page/support_box.tsx
@@ -1,9 +1,9 @@
 import { colors } from "@common/colors";
 import { socials } from "@common/constants";
 import { css } from "@emotion/react";
-import styled from "@emotion/styled";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import LiveHelpIcon from "@mui/icons-material/LiveHelp";
+import * as stylex from "@stylexjs/stylex";
 import log from "electron-log";
 
 import { ExternalLink as A } from "@/components/external_link";
@@ -13,6 +13,27 @@ import { ReactComponent as DiscordIcon } from "@/styles/images/discord.svg";
 
 import { NetworkDiagnosticsButton } from "./network_diagnostics/network_diagnostics_button";
 
+const styles = stylex.create({
+  container: (backgroundColor: string, color: string) => ({
+    backgroundColor,
+    color,
+    borderRadius: "10px",
+    padding: "15px",
+  }),
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+    margin: 0,
+    marginBottom: "10px",
+  },
+  helpIcon: {
+    marginRight: 8,
+  },
+  link: {
+    textDecoration: "underline",
+  },
+});
+
 export const SupportBox = () => {
   const { showError, showSuccess } = useToasts();
 
@@ -30,27 +51,14 @@ export const SupportBox = () => {
   };
 
   return (
-    <Outer>
-      <h2
-        css={css`
-          display: flex;
-          align-items: center;
-          margin: 0;
-          margin-bottom: 10px;
-        `}
-      >
-        <LiveHelpIcon style={{ marginRight: 8 }} />
+    <div {...stylex.props(styles.container(colors.purpleLight, colors.offWhite))}>
+      <h2 {...stylex.props(styles.iconContainer)}>
+        <LiveHelpIcon {...stylex.props(styles.helpIcon)} />
         Need help?
       </h2>
       <div>
         The best way to get support is to first{" "}
-        <A
-          title={socials.discordUrl}
-          href={socials.discordUrl}
-          css={css`
-            text-decoration: underline;
-          `}
-        >
+        <A title={socials.discordUrl} href={socials.discordUrl} {...stylex.props(styles.link)}>
           join the Slippi Discord
         </A>
         , then read the information in the <b>#support-portal</b> channel before posting your issue in the appropriate
@@ -86,13 +94,6 @@ export const SupportBox = () => {
           <NetworkDiagnosticsButton />
         </div>
       </div>
-    </Outer>
+    </div>
   );
 };
-
-const Outer = styled.div`
-  background-color: ${colors.purpleLight};
-  color: ${colors.offWhite};
-  border-radius: 10px;
-  padding: 15px;
-`;