chore: switch to stylex

project-slippi · Feb 14, 2024 · 4aa3356 · 4aa3356
1 parent 5739452
commit 4aa3356
Showing 1 changed file with 33 additions and 34 deletions.
diff --git a/src/renderer/pages/home/sidebar/slippi_store.tsx b/src/renderer/pages/home/sidebar/slippi_store.tsx
@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
+import * as stylex from "@stylexjs/stylex";
 import React from "react";
 
 import { ExternalLink } from "@/components/external_link";
 import shopImage from "@/styles/images/shop-image.png";
 
 const SlippiStoreContainer = styled.div`
-  transition: opacity 1s ease-in-out;
   height: 100%;
   background-color: #21ba44;
   & > div {
@@ -15,40 +15,39 @@ const SlippiStoreContainer = styled.div`
   }
 `;
 
-const Outer = styled.div`
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-`;
-
-const Image = styled.img`
-  position: absolute;
-  width: 100%;
-  object-fit: cover;
-`;
-
-const ButtonContainer = styled.div`
-  position: absolute;
-  top: 160px;
-  left: 40px;
-  width: 220px !important;
-`;
-
-const CloseDateContainer = styled.div`
-  position: absolute;
-  top: 210px;
-  left: 75px;
-  width: 100%;
-  color: white;
-  font-size: 16px;
-`;
+const styles = stylex.create({
+  container: {
+    position: "relative",
+    flex: "1",
+    overflow: "hidden",
+  },
+  image: {
+    position: "absolute",
+    width: "100%",
+    objectFit: "cover",
+  },
+  buttonContainer: {
+    position: "absolute",
+    top: "160px",
+    left: "40px",
+    width: "220px !important",
+  },
+  closeDate: {
+    position: "absolute",
+    top: "210px",
+    left: "75px",
+    width: "100%",
+    color: "white",
+    fontSize: "16px",
+  },
+});
 
 export const SlippiStore = React.memo(function SlippiStore() {
   return (
-    <Outer>
+    <div {...stylex.props(styles.container)}>
       <SlippiStoreContainer>
-        <Image src={shopImage} />
-        <ButtonContainer>
+        <img src={shopImage} {...stylex.props(styles.image)} />
+        <div {...stylex.props(styles.buttonContainer)}>
           <Button
             variant="contained"
             sx={{ color: "white", textTransform: "uppercase" }}
@@ -59,9 +58,9 @@ export const SlippiStore = React.memo(function SlippiStore() {
           >
             Click to Shop
           </Button>
-        </ButtonContainer>
-        <CloseDateContainer>Store Ends: 2/27/24</CloseDateContainer>
+        </div>
+        <div {...stylex.props(styles.closeDate)}>Store Ends: 2/27/24</div>
       </SlippiStoreContainer>
-    </Outer>
+    </div>
   );
 });