Fix styling and move styles panel

patheticGeek · patheticGeek · commit 586d8f2ce574 · 2022-06-13T18:48:55.000+05:30
Fix outline none problems
Change colors to twind colors
Move styles panel down
diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@modfy/tldraw",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "A tiny little drawing app (editor)",
   "author": "@steveruizok",
   "repository": {
diff --git a/packages/tldraw/src/Tldraw.tsx b/packages/tldraw/src/Tldraw.tsx
@@ -6,7 +6,6 @@ import { TldrawApp, TDCallbacks } from '~state'
 import { TldrawContext, useStylesheet, useKeyboardShortcuts, useTldrawApp } from '~hooks'
 import { shapeUtils } from '~state/shapes'
 import { ToolsPanel } from '~components/ToolsPanel'
-import { TopPanel } from '~components/TopPanel'
 import { ContextMenu } from '~components/ContextMenu'
 import { FocusButton } from '~components/FocusButton'
 import { TLDR } from '~state/TLDR'
@@ -311,13 +310,7 @@ interface InnerTldrawProps {
 const InnerTldraw = React.memo(function InnerTldraw({
   id,
   autofocus,
-  showPages,
-  showMenu,
-  showMultiplayerMenu,
-  showZoom,
-  showStyles,
   showTools,
-  showSponsorLink,
   readOnly,
   showUI,
   theme: userTheme = {}
@@ -493,15 +486,15 @@ const InnerTldraw = React.memo(function InnerTldraw({
             <FocusButton onSelect={app.toggleFocusMode} />
           ) : (
             <>
-              <TopPanel
+              {/* <TopPanel
                 readOnly={readOnly}
                 showPages={showPages}
                 showMenu={showMenu}
                 showMultiplayerMenu={showMultiplayerMenu}
                 showStyles={showStyles}
                 showZoom={showZoom}
                 showSponsorLink={showSponsorLink}
-              />
+              /> */}
               <StyledSpacer />
               {showTools && !readOnly && <ToolsPanel />}
             </>
@@ -543,6 +536,10 @@ const StyledLayout = styled('div', {
   boxSizing: 'border-box',
   outline: 'none',
 
+  '&:focus': {
+    outline: 'none !important',
+  },
+
   '& .tl-container': {
     position: 'absolute',
     top: 0,
@@ -577,7 +574,7 @@ const StyledUI = styled('div', {
     outline: 'none'
   },
   '& > *:focus': {
-    outline: 'none'
+    outline: 'none !important',
   },
 })
 
diff --git a/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx b/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx
@@ -38,7 +38,7 @@ export const StyledContent = styled(MenuContent, {
   height: 'fit-content',
   minWidth: 0,
   maxHeight: '75vh',
-  overflowY: 'scroll',
+  overflowY: 'auto',
   '& *': {
     boxSizing: 'border-box',
   },
diff --git a/packages/tldraw/src/components/Primitives/DropdownMenu/DMRadioItem.tsx b/packages/tldraw/src/components/Primitives/DropdownMenu/DMRadioItem.tsx
@@ -16,6 +16,10 @@ export const DMRadioItem = styled(RadioItem, {
   pointerEvents: 'all',
   cursor: 'pointer',
 
+  '&:focus': {
+    outline: 'none !important'
+  },
+
   variants: {
     isActive: {
       true: {
diff --git a/packages/tldraw/src/components/Primitives/IconButton/IconButton.tsx b/packages/tldraw/src/components/Primitives/IconButton/IconButton.tsx
@@ -17,6 +17,10 @@ export const IconButton = styled('button', {
   display: 'grid',
   alignItems: 'center',
   justifyContent: 'center',
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
 
   '& > *': {
     gridRow: 1,
diff --git a/packages/tldraw/src/components/Primitives/Panel/Panel.tsx b/packages/tldraw/src/components/Primitives/Panel/Panel.tsx
@@ -4,6 +4,7 @@ export const Panel = styled('div', {
   backgroundColor: '$panel',
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
   boxShadow: '$panel',
   padding: '$2',
   gap: 0,
diff --git a/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx b/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx
@@ -107,6 +107,10 @@ export const StyledRowButton = styled('button', {
   userSelect: 'none',
   margin: 0,
   padding: '0 0',
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
 
   '&[data-disabled]': {
     opacity: 0.3,
diff --git a/packages/tldraw/src/components/Primitives/SmallIcon/SmallIcon.tsx b/packages/tldraw/src/components/Primitives/SmallIcon/SmallIcon.tsx
@@ -13,7 +13,11 @@ export const SmallIcon = styled('div', {
   pointerEvents: 'all',
   cursor: 'pointer',
   color: 'currentColor',
-
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
+  
   '& svg': {
     height: 16,
     width: 16,
diff --git a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
@@ -130,6 +130,10 @@ export const StyledToolButton = styled('button', {
   border: 'none',
   height: '40px',
   width: '40px',
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
 
   [`&:disabled ${StyledToolButtonInner}`]: {
     opacity: 0.618,
diff --git a/packages/tldraw/src/components/Primitives/Tooltip/Tooltip.tsx b/packages/tldraw/src/components/Primitives/Tooltip/Tooltip.tsx
@@ -39,8 +39,8 @@ export function Tooltip({
 }
 
 const StyledContent = styled(RadixTooltip.Content, {
-  borderRadius: 3,
-  padding: '$3 $3 $3 $3',
+  borderRadius: '$2',
+  padding: '$3 $4 $3 $4',
   fontSize: '$1',
   backgroundColor: '$tooltip',
   color: '$tooltipContrast',
diff --git a/packages/tldraw/src/components/ToolsPanel/ActionButton.tsx b/packages/tldraw/src/components/ToolsPanel/ActionButton.tsx
@@ -320,4 +320,8 @@ export const ButtonsRow = styled('div', {
   alignItems: 'center',
   justifyContent: 'flex-start',
   padding: 0,
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
 })
diff --git a/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx b/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx
@@ -10,6 +10,7 @@ import { ToolButtonWithTooltip } from '~components/Primitives/ToolButton'
 import { Panel } from '~components/Primitives/Panel'
 import { ShapesMenu } from './ShapesMenu'
 import { EraserIcon } from '~components/Primitives/icons'
+import { StyleMenu } from '~components/TopPanel/StyleMenu'
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool
 const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked
@@ -77,6 +78,8 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
       >
         <ArrowTopRightIcon />
       </ToolButtonWithTooltip>
+
+      <StyleMenu />
     </Panel>
   )
 })
diff --git a/packages/tldraw/src/components/TopPanel/PageOptionsDialog/PageOptionsDialog.tsx b/packages/tldraw/src/components/TopPanel/PageOptionsDialog/PageOptionsDialog.tsx
@@ -126,7 +126,7 @@ export const StyledDialogContent = styled(Dialog.Content, {
   borderRadius: '$2',
   font: '$ui',
   '&:focus': {
-    outline: 'none',
+    outline: 'none !important',
   },
 })
 
diff --git a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx b/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
@@ -343,6 +343,10 @@ export const StyledRow = styled('div', {
       },
     },
   },
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
 })
 
 const StyledGroup = styled(DropdownMenu.DropdownMenuRadioGroup, {
diff --git a/packages/tldraw/src/components/TopPanel/TopPanel.tsx b/packages/tldraw/src/components/TopPanel/TopPanel.tsx
@@ -63,8 +63,8 @@ export function TopPanel({
 const StyledTopPanel = styled('div', {
   width: '100%',
   position: 'absolute',
-  top: 0,
-  left: 0,
+  bottom: 0,
+  left: 'auto',
   right: 0,
   display: 'flex',
   flexDirection: 'row',
diff --git a/packages/tldraw/src/state/shapes/StickyUtil/StickyUtil.tsx b/packages/tldraw/src/state/shapes/StickyUtil/StickyUtil.tsx
@@ -384,6 +384,11 @@ const StyledTextArea = styled('textarea', {
   overflow: 'hidden',
   background: 'none',
   outline: 'none',
+  
+  '&:focus': {
+    outline: 'none !important'
+  },
+
   textAlign: 'left',
   font: 'inherit',
   padding: 0,
diff --git a/packages/tldraw/src/styles/stitches.config.ts b/packages/tldraw/src/styles/stitches.config.ts
@@ -2,27 +2,28 @@ import { createStitches, defaultThemeMap } from '@stitches/react'
 
 import * as colors from 'twind/colors'
 
+
 const { styled, createTheme } = createStitches({
   themeMap: {
     ...defaultThemeMap,
   },
   theme: {
     colors: {
-      bounds: 'rgba(65, 132, 244, 1.000)',
-      boundsBg: 'rgba(65, 132, 244, 0.05)',
-      hover: colors.blueGray[800],
+      bounds: 'rgba(65, 132, 244, 1.000)', // slightly darker blue
+      boundsBg: 'rgba(65, 132, 244, 0.05)', // slightly darker blue 5% opacity
+      hover: colors.blueGray[700],
       overlay: colors.blueGray[800],
       overlayContrast: 'rgba(255, 255, 255, 0.15)',
-      panel: colors.blueGray[900],
+      panel: colors.blueGray[800],
       panelContrast: '#ffffff',
-      selected: 'rgba(66, 133, 244, 1.000)',
-      selectedContrast: '#fefefe',
-      sponsor: '#ec6cb9',
-      sponsorContrast: '#ec6cb944',
+      selected: colors.blue[500],
+      selectedContrast: colors.white,
       text: colors.gray['300'],
       tooltip: colors.black,
       tooltipContrast: colors.gray[300],
-      warn: 'rgba(255, 100, 100, 1)',
+      warn: colors.rose[500],
+      sponsor: '#ec6cb9', // pink
+      sponsorContrast: '#ec6cb944', // pink 68% opacity
     },
     shadows: {
       2: '0px 1px 1px rgba(0, 0, 0, 0.14)',
@@ -98,18 +99,18 @@ const { styled, createTheme } = createStitches({
 
 export const dark = createTheme({
   colors: {
-    bounds: 'rgba(38, 150, 255, 1.000)',
-    boundsBg: 'rgba(38, 150, 255, 0.05)',
-    hover: colors.blueGray[800],
+    bounds: 'rgba(38, 150, 255, 1.000)', // blue
+    boundsBg: 'rgba(38, 150, 255, 0.05)', // blue 5% opacity
+    hover: colors.blueGray[700],
     overlay: 'rgba(0, 0, 0, 0.15)',
     overlayContrast: 'rgba(255, 255, 255, 0.15)',
-    panel: colors.blueGray[900],
-    panelContrast: '#49555f',
-    selected: 'rgba(38, 150, 255, 1.000)',
-    selectedContrast: '#fefefe',
+    panel: colors.blueGray[800],
+    panelContrast: colors.gray[600],
+    selected: colors.blue[500],
+    selectedContrast: colors.white,
     text: colors.gray[100],
     tooltip: colors.black,
-    tooltipContrast: '#ffffff',
+    tooltipContrast: colors.white,
   },
   shadows: {
     2: '0px 1px 1px rgba(0, 0, 0, 0.24)',

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@modfy/tldraw",`
`3`		`- "version": "1.9.5",`
	`3`	`+ "version": "1.9.6",`
`4`	`4`	`"description": "A tiny little drawing app (editor)",`
`5`	`5`	`"author": "@steveruizok",`
`6`	`6`	`"repository": {`