fix: demo styles

src/main/frontend/components/settings.css

@@ -116,7 +116,7 @@
 
         &.app-updater {
           padding-top: 15px;
-          align-items: start;
+          align-items: flex-start;
 
 
           > .wrap {

tldraw/apps/tldraw-logseq/src/index.ts

@@ -5,6 +5,4 @@
 // export { AppCanvas, AppProvider } from '@tldraw/react'
 // export { useFileDrop } from '~hooks/useFileDrop'
 
-import './styles.css';
-
 export * from './app'

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -110,6 +110,10 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
   canActivate = true
   canEdit = true
 
+  ReactContextBar = observer(() => {
+    return <>123</>
+  })
+
   ReactComponent = observer(({ events, isErasing, isActivated }: TLComponentProps) => {
     const {
       props: { opacity, pageId, strokeWidth, stroke, fill },
@@ -167,14 +171,8 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
             <LogseqQuickSearch onChange={commitChange} />
           ) : (
             <div
+              className="shadow-xl tl-logseq-portal-container"
               style={{
-                width: '100%',
-                overflow: 'auto',
-                borderRadius: '8px',
-                overscrollBehavior: 'none',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
                 background: fill,
                 boxShadow: isActivated
                   ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'

tldraw/apps/tldraw-logseq/src/styles.css

@@ -456,6 +456,18 @@
   background-color: var(--ls-menu-hover-color, #f4f5f7);
 }
 
+.logseq-tldraw .tl-logseq-portal-container {
+  width: 100%;
+  overflow: auto;
+  border-radius: 8px;
+  overscroll-behavior: none;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--ls-secondary-background-color);
+  opacity: 1;
+}
+
 .logseq-tldraw .tl-logseq-portal-header {
   height: 40px;
   width: 100%;

tldraw/demo/postcss.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'postcss-nested': {},
+    'postcss-import-ext-glob': {},
     tailwindcss: {},
     autoprefixer: {},
   },

tldraw/demo/src/App.jsx

@@ -96,7 +96,7 @@ const ThemeSwitcher = ({ theme, setTheme }) => {
 }
 
 export default function App() {
-  const [theme, setTheme] = React.useState('dark')
+  const [theme, setTheme] = React.useState('light')
 
   return (
     <div className={`h-screen w-screen`}>

tldraw/demo/src/main.jsx

@@ -1,7 +1,6 @@
+import '../../../tailwind.all.css'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import 'tldraw-logseq/styles.css'
-import '../../../public/static/css/style.css'
 
 import App from './App'
 

tldraw/demo/tailwind.config.js

@@ -1,8 +1,6 @@
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
+  // just import everything for ease of dev 
+  safelist: [{ pattern: /.*/ }],
   theme: {
     extend: {},
   },