fix(BuilderPage): use css variables for background and icon text

Author: marcalexiei

src/components/BuilderPage.module.css

@@ -9,6 +9,12 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.builder {
+  overflow: auto;
+  height: 100vh;
+  background: var(--color-background);
+}
+
 .pageWrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

src/components/BuilderPage.tsx

@@ -433,14 +433,7 @@ function BuilderPage({
       }}
       render={({ style }) => (
         <main className={styles.root} style={style}>
-          <div
-            id="builder"
-            style={{
-              overflow: "auto",
-              height: "100vh",
-              background: colors.primary,
-            }}
-          >
+          <div id="builder" className={styles.builder}>
             <button
               className={styles.closeButton}
               aria-label="close builder"

src/components/Popup.module.css

@@ -14,7 +14,7 @@
 }
 
 .icon {
-  border: 1px solid white;
+  border: 1px solid var(--color-text);
   margin-left: 0;
   margin-right: 5px;
 }