Fix centering of settings panel and toolbar icons (#354)

seek-oss · May 22, 2024 · 92a0039 · 92a0039
1 parent 934a017
commit 92a0039
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/.changeset/strange-zoos-compare.md b/.changeset/strange-zoos-compare.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Fix Playroom UI icon centering
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.css.ts b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
@@ -53,12 +53,6 @@ export const realRadio = style([
   },
 ]);
 
-export const labelText = sprinkles({
-  display: 'block',
-  position: 'relative',
-  zIndex: 1,
-});
-
 export const label = style([
   sprinkles({
     position: 'relative',

diff --git a/src/Playroom/SettingsPanel/SettingsPanel.tsx b/src/Playroom/SettingsPanel/SettingsPanel.tsx
@@ -117,9 +117,7 @@ export default React.memo(() => {
                   className={styles.label}
                   title={option}
                 >
-                  <span className={styles.labelText}>
-                    {positionIcon[option.toLowerCase() as EditorPosition]}
-                  </span>
+                  {positionIcon[option.toLowerCase() as EditorPosition]}
                 </label>
               </div>
             ))}
@@ -155,9 +153,7 @@ export default React.memo(() => {
                   className={styles.label}
                   title={option}
                 >
-                  <span className={styles.labelText}>
-                    {colorModeIcon[option.toLowerCase() as ColorScheme]}
-                  </span>
+                  {colorModeIcon[option.toLowerCase() as ColorScheme]}
                 </label>
               </div>
             ))}

diff --git a/src/Playroom/ToolbarItem/ToolbarItem.tsx b/src/Playroom/ToolbarItem/ToolbarItem.tsx
@@ -40,7 +40,7 @@ export default ({
       onClick();
     }}
   >
-    <span style={{ display: 'block', position: 'relative' }}>{children}</span>
+    {children}
     <span
       className={classnames(styles.indicator, {
         [styles.show]: showIndicator && !success,