Matheus/playground visuals

apps/zipper.dev/src/components/playground/playground-sidebar-script-item.tsx

@@ -10,6 +10,8 @@ import {
   Link,
   Icon,
   useColorModeValue,
+  Box,
+  IconButton,
 } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { Script } from '@prisma/client';
@@ -31,6 +33,7 @@ import {
   isReadme,
 } from '~/utils/playground.utils';
 import { useEditorContext } from '../context/editor-context';
+import { brandColors, theme } from '@zipper/ui';
 
 export type ScriptItemProps = {
   script: Script;
@@ -46,7 +49,10 @@ export type ScriptItemProps = {
 };
 
 const ScriptIcon = ({ script, ...propsPassedIn }: { script: Script } & any) => {
-  const props = { ...propsPassedIn, size: '14px' };
+  const props = {
+    ...propsPassedIn,
+    size: '14px',
+  };
   if (isReadme(script)) return <PiNote {...props} />;
   else if (isMain(script)) return <PiCode {...props} size="16px" />;
   else if (isHandler(script)) return <PiCodeSimpleDuotone {...props} />;
@@ -79,18 +85,19 @@ export const ScriptItem: React.FC<ScriptItemProps> = ({
   const isDirty = isModelDirty(script.filename);
   const hasErrors = modelHasErrors(script.filename);
 
-  const highlightColor = useColorModeValue('blackAlpha.400', 'whiteAlpha.400');
+  const highlightColor = useColorModeValue('primary.50', 'purple.900');
   const errorColor = useColorModeValue('red.400', 'red.600');
 
+  const isSelected = currentScript?.id === script.id;
+
   return (
     <HStack
       px={3}
       py={isRenaming ? 0 : 1}
-      background={
-        currentScript?.id === script.id ? highlightColor : 'transparent'
-      }
+      rounded="2px"
+      background={isSelected ? highlightColor : 'transparent'}
       _hover={{
-        background: highlightColor,
+        background: isSelected ? highlightColor : 'fg.50',
       }}
       role="group"
     >
@@ -132,21 +139,17 @@ export const ScriptItem: React.FC<ScriptItemProps> = ({
             setCurrentScript(script);
           }}
         >
-          <Flex
-            cursor="pointer"
-            gap={2}
-            alignItems="center"
-            alignContent="center"
-            align="center"
-          >
-            <Flex justify="center" align="center" w="4">
-              <ScriptIcon script={script} />
-            </Flex>
+          <Flex cursor="pointer" gap={2} alignItems="center">
+            <Box as="figure" color={isSelected ? 'primary.600' : undefined}>
+              <ScriptIcon isSelected={isSelected} script={script} />
+            </Box>
             <Text
               fontWeight={isDirty || hasErrors ? 900 : 'normal'}
-              fontSize="xs"
-              fontFamily="mono"
-              color={hasErrors ? errorColor : 'inherit'}
+              fontSize="sm"
+              // fontFamily="mono"
+              color={
+                hasErrors ? errorColor : isSelected ? 'primary.600' : 'inherit'
+              }
             >
               {script.filename === 'readme.md' ? 'README.md' : script.filename}
             </Text>
@@ -155,7 +158,12 @@ export const ScriptItem: React.FC<ScriptItemProps> = ({
       )}
       {canUserEdit && (
         <Menu>
-          <MenuButton as={Text}>
+          <MenuButton
+            as={IconButton}
+            size="xs"
+            colorScheme={isSelected ? 'purple' : 'fg'}
+            variant="link"
+          >
             <Icon
               as={PiDotsThreeVerticalBold}
               fontSize="xs"
@@ -168,7 +176,7 @@ export const ScriptItem: React.FC<ScriptItemProps> = ({
               }}
             />
           </MenuButton>
-          <MenuList color="chakra-body-text">
+          <MenuList color="chakra-body-text" fontSize="14px" rounded="2px">
             <MenuItem onClick={() => onDuplicate(script.id)}>
               Duplicate
             </MenuItem>

apps/zipper.dev/src/components/playground/playground-sidebar.tsx

@@ -165,20 +165,23 @@ export function PlaygroundSidebar({
     <>
       <VStack
         alignItems="stretch"
-        background={bgGradient}
-        color="bgColor"
         flex={1}
-        paddingX={2}
-        paddingY={4}
+        // paddingX={2}
         spacing={4}
-        boxShadow="lg"
         mr={{ base: '0', xl: 2 }}
         onMouseEnter={onMouseEnter('PlaygroundSidebar')}
         onMouseLeave={onMouseLeave()}
         outline={style('PlaygroundSidebar').border}
       >
-        <HStack px={3}>
-          <Text size="sm" flexGrow={1} fontWeight="medium">
+        <HStack
+          px={3}
+          color="fg.600"
+          bg="fg.100"
+          h={9}
+          width="full"
+          rounded="2px"
+        >
+          <Text fontSize="14px" flexGrow={1} fontWeight="medium">
             Files
           </Text>
           {app.canUserEdit && (
@@ -230,21 +233,31 @@ export function PlaygroundSidebar({
       </VStack>
       <VStack mr={{ base: '0', xl: 2 }} overflowY="auto" h="full" paddingY={4}>
         <Show when={!!tutorials[0]?.startLine}>
-          <Accordion defaultIndex={[0]} allowMultiple width="100%">
+          <Accordion
+            defaultIndex={[0]}
+            allowMultiple
+            border="transparent"
+            width="100%"
+          >
             <AccordionItem>
               <h2>
-                <AccordionButton bg="fg.100" _hover={{ bg: 'fg.200' }} h={6}>
+                <AccordionButton
+                  color="fg.600"
+                  px={3}
+                  bg="fg.100"
+                  h={9}
+                  rounded="2px"
+                >
                   <Box
                     as="span"
                     flex="1"
                     textAlign="left"
-                    fontSize="sm"
-                    color="fg.600"
-                    fontWeight="bold"
-                    textTransform="uppercase"
+                    fontWeight="medium"
+                    fontSize="14px"
                   >
                     Guide
                   </Box>
+
                   <AccordionIcon />
                 </AccordionButton>
               </h2>
@@ -255,6 +268,8 @@ export function PlaygroundSidebar({
                     p={3}
                     gap={3}
                     color="fg.400"
+                    borderBottom="1px solid"
+                    borderColor="fg.200"
                     bg={
                       doc.index === selectedTutorial.index
                         ? colorMode === 'dark'

apps/zipper.dev/src/components/playground/playground.tsx

@@ -264,7 +264,7 @@ export function Playground({
             )}
           </TabList>
           {/* TAB PANELS */}
-          <TabPanels as={VStack} alignItems="stretch" h="full" spacing={0}>
+          <TabPanels as={VStack} alignItems="stretch" spacing={0}>
             {/* CODE */}
             <TabPanel
               position="relative"

packages/@zipper-ui/src/components/tab-button.tsx

@@ -33,10 +33,22 @@ export const TabButton: React.FC<TabButtonProps> = ({
     <Tab
       px={4}
       py={2}
+      fontWeight="medium"
+      position="relative"
+      rounded="2px"
       _selected={{
         backgroundColor,
-        fontWeight: 'bold',
         textColor,
+        _after: {
+          position: 'absolute',
+          height: '1px',
+          content: "''",
+          width: '100%',
+          bottom: '-1rem',
+          left: 0,
+          background: 'primary',
+          zIndex: 20,
+        },
       }}
       _hover={{
         backgroundColor,