From 1b318386a8709521e93f660bd3e80cb86dfed53e Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Fri, 10 May 2024 11:35:57 +1000
Subject: [PATCH] Refactor

---
 src/Playroom/Toolbar/Toolbar.tsx | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index 0e652650..85a39c5c 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -169,8 +169,8 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
           onExited={() => setLastActivePanel(undefined)}
         >
           <div className={styles.panel} id="custom-id">
-            {lastActivePanel === 'snippets' && (
-              <div className={styles.preference}>
+            <div className={styles.preference}>
+              {lastActivePanel === 'snippets' && (
                 <Snippets
                   snippets={snippets}
                   onHighlight={(snippet) => {
@@ -190,32 +190,24 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
                     }
                   }}
                 />
-              </div>
-            )}
+              )}
 
-            {lastActivePanel === 'frames' && (
-              <div className={styles.preference}>
+              {lastActivePanel === 'frames' && (
                 <FramesPanel
                   availableWidths={allWidths}
                   availableThemes={allThemes}
                 />
-              </div>
-            )}
+              )}
 
-            {lastActivePanel === 'preview' && (
-              <div className={styles.preference}>
+              {lastActivePanel === 'preview' && (
                 <PreviewPanel
                   themes={allThemes}
                   visibleThemes={visibleThemes}
                 />
-              </div>
-            )}
+              )}
 
-            {lastActivePanel === 'settings' && (
-              <div className={styles.preference}>
-                <SettingsPanel />
-              </div>
-            )}
+              {lastActivePanel === 'settings' && <SettingsPanel />}
+            </div>
           </div>
         </CSSTransition>
       </div>