JS-3473: dark mode colors

anyproto · Dec 6, 2023 · bd2e2c0 · bd2e2c0
1 parent 34d9518
commit bd2e2c0
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 4 deletions.
diff --git a/src/img/theme/dark/icon/block/embed/chart.svg b/src/img/theme/dark/icon/block/embed/chart.svg
diff --git a/src/img/theme/dark/icon/block/embed/figma.svg b/src/img/theme/dark/icon/block/embed/figma.svg
diff --git a/src/img/theme/dark/icon/block/embed/googleMaps.svg b/src/img/theme/dark/icon/block/embed/googleMaps.svg
diff --git a/src/img/theme/dark/icon/block/embed/latex.svg b/src/img/theme/dark/icon/block/embed/latex.svg
diff --git a/src/img/theme/dark/icon/block/embed/mermaid.svg b/src/img/theme/dark/icon/block/embed/mermaid.svg
diff --git a/src/img/theme/dark/icon/block/embed/miro.svg b/src/img/theme/dark/icon/block/embed/miro.svg
diff --git a/src/img/theme/dark/icon/block/embed/soundcloud.svg b/src/img/theme/dark/icon/block/embed/soundcloud.svg
diff --git a/src/img/theme/dark/icon/block/embed/vimeo.svg b/src/img/theme/dark/icon/block/embed/vimeo.svg
diff --git a/src/img/theme/dark/icon/block/embed/youtube.svg b/src/img/theme/dark/icon/block/embed/youtube.svg
diff --git a/src/scss/block/embed.scss b/src/scss/block/embed.scss
@@ -10,7 +10,7 @@
 			#input { display: block; }
 		}
 
-		.preview { position: relative; z-index: 99; height: 240px; background-color: $colorShapeHighlightLight; display: none; }
+		.preview { display: none; position: relative; z-index: 99; height: 240px; background-color: $colorShapeHighlightLight; border-radius: 4px; }
 		.preview {
 			.icon { width: 60px; height: 60px; background-size: 60px 60px; position: absolute; left: 50%; top: 50%; margin: -30px 0px 0px -30px; }
 			.icon.embedLatex { background-image: url('~img/icon/block/embed/latex.svg'); }

diff --git a/src/scss/theme/dark/block.scss b/src/scss/theme/dark/block.scss
@@ -296,9 +296,22 @@
     /* BlockEmbed */
 
     .block.blockEmbed {
+		.preview { background-color: $colorShapeHighlightLight; }
+		.preview {
+			.icon.embedLatex { background-image: url('#{$themePath}/icon/block/embed/latex.svg'); }
+			.icon.embedMermaid { background-image: url('#{$themePath}/icon/block/embed/mermaid.svg'); }
+			.icon.embedYoutube { background-image: url('#{$themePath}/icon/block/embed/youtube.svg'); }
+			.icon.embedVimeo { background-image: url('#{$themePath}/icon/block/embed/vimeo.svg'); }
+			.icon.embedGoogleMaps { background-image: url('#{$themePath}/icon/block/embed/googleMaps.svg'); }
+			.icon.embedSoundcloud { background-image: url('#{$themePath}/icon/block/embed/soundcloud.svg'); }
+			.icon.embedChart { background-image: url('#{$themePath}/icon/block/embed/chart.svg'); }
+			.icon.embedMiro { background-image: url('#{$themePath}/icon/block/embed/miro.svg'); }
+			.icon.embedFigma { background-image: url('#{$themePath}/icon/block/embed/figma.svg'); }
+		}
+
         .select { color: $colorTextPrimary; }
-        .wrap.isEditing { box-shadow: 0px 0px 0px 1px $colorShapePrimary; }
-        #input { background: $colorShapeSecondary; }
+        .wrap.isEditing { background-color: $colorShapeHighlightLight; }
+        #input { background: $colorShapeSecondary; border-color: $colorShapeHighlightLight; }
     }
 
     /* BlockBookmark */

diff --git a/src/ts/component/block/embed.tsx b/src/ts/component/block/embed.tsx
@@ -563,7 +563,7 @@ const BlockEmbed = observer(class BlockEmbedIndex extends React.Component<I.Bloc
 		};
 
 		this.placeholderCheck(this.text);
-		
+
 		if (withPreview) {
 			this.setState({ withPreview: false });
 		};
-Original file line number
+Diff line change
@@ Expand Up @@
     		};
     		this.placeholderCheck(this.text);
     		if (withPreview) {
     			this.setState({ withPreview: false });
     		};
@@ Expand Down @@