Fix extension buttons spacing, add extension example (#229)

* Fix extension buttons spacing & styles
* Refactor extension button styles
* Clean up extension prism

theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx

@@ -14,7 +14,7 @@ const Container = styled.div`
   /* pointer-events: none; */
 
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
   justify-content: center;
 `
 
@@ -34,6 +34,14 @@ const Bg = styled.div`
   }
 `
 
+const GroupDivider = styled.div`
+  position: abolute;
+  height: 32px;
+  width: 1px;
+  background: #373b40;
+  opacity: 0.4;
+`
+
 const ExtensionToolsetRender: React.FC<{
   extension: IExtension
   toolbarId: string
@@ -60,16 +68,22 @@ export const ExtensionToolbar: React.FC<{toolbarId: string}> = ({
   const groups: Array<React.ReactNode> = []
   const extensionsById = useVal(getStudio().atomP.ephemeral.extensions.byId)
 
+  let isAfterFirstGroup = false
   for (const [, extension] of Object.entries(extensionsById)) {
     if (!extension || !extension.toolbars?.[toolbarId]) continue
 
     groups.push(
-      <ExtensionToolsetRender
-        extension={extension}
-        key={'extensionToolbar-' + extension.id}
-        toolbarId={toolbarId}
-      />,
+      <>
+        {isAfterFirstGroup ? <GroupDivider></GroupDivider> : undefined}
+        <ExtensionToolsetRender
+          extension={extension}
+          key={'extensionToolbar-' + extension.id}
+          toolbarId={toolbarId}
+        />
+      </>,
     )
+
+    isAfterFirstGroup = true
   }
 
   if (groups.length === 0) return null

theatre/studio/src/toolbars/GlobalToolbar.tsx

@@ -57,6 +57,14 @@ const HasUpdatesBadge = styled.div`
   top: -2px;
 `
 
+const GroupDivider = styled.div`
+  position: abolute;
+  height: 32px;
+  width: 1px;
+  background: #373b40;
+  opacity: 0.4;
+`
+
 const GlobalToolbar: React.FC = () => {
   const conflicts = usePrism(() => {
     const ephemeralStateOfAllProjects = val(
@@ -126,6 +134,7 @@ const GlobalToolbar: React.FC = () => {
           unpinHintIcon={<DoubleChevronLeft />}
           pinned={outlinePinned}
         />
+        <GroupDivider />
         {conflicts.length > 0 ? (
           <NumberOfConflictsIndicator>
             {conflicts.length}
@@ -144,7 +153,6 @@ const GlobalToolbar: React.FC = () => {
           <Ellipsis />
           {hasUpdates && <HasUpdatesBadge />}
         </ToolbarIconButton>
-
         <PinButton
           ref={triggerButtonRef as $IntentionalAny}
           onClick={() => {

theatre/studio/src/toolbars/PinButton.tsx

@@ -1,45 +1,14 @@
 import styled from 'styled-components'
-import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
 import type {ComponentPropsWithRef, ReactNode} from 'react'
 import React, {forwardRef, useState} from 'react'
+import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton'
 
-const Container = styled.button<{pinned?: boolean}>`
-  ${pointerEventsAutoInNormalMode};
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
-  width: 32px;
-  height: 32px;
-  outline: none;
-
+const Container = styled(ToolbarIconButton)<{pinned?: boolean}>`
   color: ${({pinned}) => (pinned ? 'rgba(255, 255, 255, 0.8)' : '#A8A8A9')};
 
-  background: rgba(40, 43, 47, 0.8);
-  backdrop-filter: blur(14px);
-  border: none;
   border-bottom: 1px solid
     ${({pinned}) =>
       pinned ? 'rgba(255, 255, 255, 0.7)' : 'rgba(255, 255, 255, 0.08)'};
-  border-radius: 2px;
-
-  &:hover {
-    background: rgba(59, 63, 69, 0.8);
-  }
-
-  &:active {
-    background: rgba(82, 88, 96, 0.8);
-  }
-
-  svg {
-    display: block;
-  }
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
 `
 
 interface PinButtonProps extends ComponentPropsWithRef<'button'> {

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -27,8 +27,9 @@ export const Container = styled.button`
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 2px;
 
-  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25))
-    drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));
+  svg {
+    display: block;
+  }
 
   &:hover {
     background: rgba(59, 63, 69, 0.8);

theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts

@@ -6,8 +6,6 @@ const Container = styled(Group)`
   height: fit-content;
   backdrop-filter: blur(14px);
   border-radius: 2px;
-  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25))
-    drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));
 `
 
 export default Container