fix(BuilderPage): use css variables for background and icon border co…

…lor (#1110)
react-hook-form · Jan 4, 2025 · b5de4a5 · b5de4a5
1 parent 5f84956
commit b5de4a5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/components/BuilderPage.module.css b/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));

diff --git a/src/components/BuilderPage.tsx b/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"

diff --git a/src/components/Popup.module.css b/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;
 }