No commit message

Zipper-Inc · Jan 17, 2024 · 91e619b · 91e619b
1 parent c6d71f0
commit 91e619b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 63 deletions.
diff --git a/apps/zipper.dev/src/components/context/help-mode-context.tsx b/apps/zipper.dev/src/components/context/help-mode-context.tsx
@@ -96,7 +96,7 @@ export const useHelpBorder = () => {
       border:
         helpModeEnabled && hoveredElement === componentName
           ? '4px solid #E5BEEB'
-          : 'none',
+          : '4px solid transparent',
       boxSizing: 'border-box', // to prevent resizing of the elements when border is applied
     }),
     onMouseEnter: (componentName: string) => () => {

diff --git a/apps/zipper.dev/src/components/playground/app-edit-sidebar.tsx b/apps/zipper.dev/src/components/playground/app-edit-sidebar.tsx
@@ -80,7 +80,6 @@ export const AppEditSidebar: React.FC<AppEditSidebarProps> = ({
   const mode = useAppEditSidebarMode();
 
   const { style, onMouseEnter, onMouseLeave } = useHelpBorder();
-  const { hoveredElement } = useHelpMode();
 
   return (
     <VStack
@@ -92,11 +91,7 @@ export const AppEditSidebar: React.FC<AppEditSidebarProps> = ({
       w="full"
       onMouseEnter={onMouseEnter('PreviewPanel')}
       onMouseLeave={onMouseLeave()}
-      border={
-        hoveredElement === 'PreviewPanel'
-          ? style('PreviewPanel').border
-          : '4px solid transparent'
-      }
+      border={style('PreviewPanel').border}
       data-app-edit-sidebar
     >
       {mode === AppEditSidebarMode.Markdown && canUserEdit && (

diff --git a/apps/zipper.dev/src/components/playground/playground.tsx b/apps/zipper.dev/src/components/playground/playground.tsx
@@ -355,7 +355,9 @@ export function Playground({
                 </Tooltip>
 
                 <MenuList pt={0}>
-                  {!helpModeEnabled ? (
+                  {helpModeEnabled ? (
+                    <InspectUiHelpMode onClose={onClose} />
+                  ) : (
                     <>
                       <Box
                         display={'flex'}
@@ -437,55 +439,6 @@ export function Playground({
                         Contact support
                       </MenuItem>
                     </>
-                  ) : (
-                    <>
-                      <Box
-                        display={'flex'}
-                        flexDirection={'column'}
-                        pt={2}
-                        px={2}
-                        maxW={237}
-                        minH={'200px'}
-                      >
-                        <Flex
-                          alignItems={'center'}
-                          justifyContent={'space-between'}
-                          mb={4}
-                        >
-                          <FiChevronLeft
-                            size={20}
-                            color="gray"
-                            onClick={toggleHelpMode}
-                            cursor="pointer"
-                          />
-
-                          <Heading color="purple.600" size="sm" flex="1" ml={2}>
-                            Inspect UI
-                          </Heading>
-                          <FiX
-                            size={20}
-                            color="gray"
-                            onClick={onClose}
-                            cursor="pointer"
-                          />
-                        </Flex>
-                        <Text
-                          color={'fg.900'}
-                          fontSize="md"
-                          fontWeight="bold"
-                          mb={2}
-                        >
-                          {hoveredElement
-                            ? inspectableComponents[hoveredElement]?.name
-                            : ''}
-                        </Text>
-                        <Text color={'fg.600'} fontSize="sm">
-                          {elementDescription
-                            ? elementDescription
-                            : 'Hover over the interface to learn more about what it does.'}
-                        </Text>
-                      </Box>
-                    </>
                   )}
                 </MenuList>
               </>
@@ -520,3 +473,38 @@ export function Playground({
     </RunAppProvider>
   );
 }
+function InspectUiHelpMode(props: { onClose: () => void }) {
+  const { toggleHelpMode, elementDescription, hoveredElement } = useHelpMode();
+  return (
+    <Box
+      display={'flex'}
+      flexDirection={'column'}
+      pt={2}
+      px={2}
+      maxW={237}
+      minH={'200px'}
+    >
+      <Flex alignItems={'center'} justifyContent={'space-between'} mb={4}>
+        <FiChevronLeft
+          size={20}
+          color="gray"
+          onClick={toggleHelpMode}
+          cursor="pointer"
+        />
+
+        <Heading color="purple.600" size="sm" flex="1" ml={2}>
+          Inspect UI
+        </Heading>
+        <FiX size={20} color="gray" onClick={props.onClose} cursor="pointer" />
+      </Flex>
+      <Text color={'fg.900'} fontSize="md" fontWeight="bold" mb={2}>
+        {hoveredElement ? inspectableComponents[hoveredElement]?.name : ''}
+      </Text>
+      <Text color={'fg.600'} fontSize="sm">
+        {elementDescription
+          ? elementDescription
+          : 'Hover over the interface to learn more about what it does.'}
+      </Text>
+    </Box>
+  );
+}
diff --git a/apps/zipper.dev/src/components/playground/tab-code.tsx b/apps/zipper.dev/src/components/playground/tab-code.tsx
@@ -72,7 +72,6 @@ export const CodeTab: React.FC<CodeTabProps> = ({ app, mainScript }) => {
   const [isMarkdownEditable, setIsMarkdownEditable] = useState(false);
   const toast = useToast();
 
-  const { hoveredElement } = useHelpMode();
   const { style, onMouseEnter, onMouseLeave } = useHelpBorder();
   const { user } = useUser();
 
@@ -223,11 +222,7 @@ export const CodeTab: React.FC<CodeTabProps> = ({ app, mainScript }) => {
           spacing={0}
           onMouseEnter={onMouseEnter('PlaygroundCode')}
           onMouseLeave={onMouseLeave}
-          border={
-            hoveredElement === 'PlaygroundCode'
-              ? style('PlaygroundCode').border
-              : 'none'
-          }
+          border={style('PlaygroundCode').border}
         >
           {isMarkdown && !isMarkdownEditable && (
             <VStack