diff --git a/assets/icons/icon/tool-note.svg b/assets/icons/icon/tool-note.svg index 2e588e96f..66b6d448a 100644 --- a/assets/icons/icon/tool-note.svg +++ b/assets/icons/icon/tool-note.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/editor/editor.css b/packages/editor/editor.css index d2626a3a6..249a73b00 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1195,18 +1195,27 @@ input, position: relative; width: 100%; height: 100%; - border-radius: var(--radius-2); - box-shadow: var(--shadow-1); + border-radius: 1px; overflow: hidden; - border-color: currentColor; - border-style: solid; - border-width: 1px; + box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.2); } .tl-note__container .tl-text-label { text-shadow: none; } +.tl-note__shadow { + background-color: none; + width: 100%; + position: absolute; + bottom: 4px; + left: 0px; + transform-origin: bottom center; + box-shadow: + 0 0 32px 0px rgba(0, 0, 0, 0.4), + 0 0 24px 0px rgba(0, 0, 0, 0.3); +} + .tl-note__scrim { position: absolute; z-index: 1; @@ -1214,7 +1223,7 @@ input, height: 100%; width: 100%; background-color: var(--color-background); - opacity: 0.28; + opacity: 0.2; } .tl-loading { diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index 7607e3942..2d0462c69 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -10,6 +10,7 @@ import { getDefaultColorTheme, noteShapeMigrations, noteShapeProps, + rng, toDomPrecision, } from '@tldraw/editor' import { HyperlinkButton } from '../shared/HyperlinkButton' @@ -93,18 +94,33 @@ export class NoteShapeUtil extends ShapeUtil { const theme = useDefaultColorTheme() const adjustedColor = color === 'black' ? 'yellow' : color + const noteHeight = this.getHeight(shape) + const shadowHeight = Math.max(this.getHeight(shape) * 0.618, 200) + const ratio = noteHeight / shadowHeight + const random = rng(shape.id) + const noteRotation = random() * 4 + return ( <>
+
+
{ indicator(shape: TLNoteShape) { return (