fix: ImageNote周辺のダークモード

nakasyou · Feb 6, 2024 · a989e28 · a989e28
1 parent 8e45f96
commit a989e28
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/islands/note/components/note-components/Controller.tsx b/src/islands/note/components/note-components/Controller.tsx
@@ -12,16 +12,16 @@ export const Controller = (props: {
   notesLength: number
 }) => {
   return <div class="flex justify-center gap-1 bg-surface text-on-surface">
-    <button class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-outline rounded-full p-1 border" onClick={props.onRemove}>
+    <button class="grid hover:drop-shadow drop-shadow-none disabled:opacity-40 rounded-full p-1 border" onClick={props.onRemove}>
       <div innerHTML={removeIconSize(IconX)} class="w-8 h-8" />
     </button>
-    <button class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-outline rounded-full p-1 border"
+    <button class="grid hover:drop-shadow drop-shadow-none disabled:opacity-40 rounded-full p-1 border"
       onClick={props.onUpNote}
       disabled={props.noteIndex === 0}>
       <div innerHTML={removeIconSize(IconArrowNarrowUp)} class="w-8 h-8" />
     </button>
     <button
-      class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-outline rounded-full p-1 border"
+      class="grid hover:drop-shadow drop-shadow-none disabled:opacity-40 rounded-full p-1 border"
       onClick={props.onDownNote}
       disabled={props.noteIndex === props.notesLength - 1}>
       <div innerHTML={removeIconSize(IconArrowNarrowDown)} class="w-8 h-8" />

diff --git a/src/islands/note/components/notes/ImageNote/ImageNote.tsx b/src/islands/note/components/notes/ImageNote/ImageNote.tsx
@@ -51,7 +51,7 @@ export const ImageNote = ((props: Props) => {
     </Show>
 
     {/* 本体 */}
-    <div class="p-2 rounded border my-2 bg-white" onClick={() => {
+    <div class="p-2 rounded border my-2 bg-surface" onClick={() => {
       props.focus()
       if (noteBookState.isEditMode) {
         setIsShowEditor(true)

diff --git a/src/islands/note/components/notes/ImageNote/components/EditorCoreX.tsx b/src/islands/note/components/notes/ImageNote/components/EditorCoreX.tsx
@@ -325,7 +325,7 @@ export default (props: Props) => {
       <div class="flex my-2 justify-center gap-5">
         <div class="flex gap-2">
           <button
-            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-gray-100 rounded-full p-1 bg-white border"
+            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none bg-secondary text-on-secondary disabled:bg-secondary-container disabled:text-on-secondary-container rounded-full p-1 border"
             onClick={() => {
               setEditMode('move')
             }}
@@ -334,7 +334,7 @@ export default (props: Props) => {
             <div innerHTML={removeIconSize(IconArrowsMove)} class="w-8 h-8" />
           </button>
           <button
-            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-gray-100 rounded-full p-1 bg-white border"
+            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none bg-secondary text-on-secondary disabled:bg-secondary-container disabled:text-on-secondary-container rounded-full p-1 border"
             onClick={() => {
               setEditMode('paint')
             }}
@@ -343,7 +343,7 @@ export default (props: Props) => {
             <div innerHTML={IconHighlight} class="w-8 h-8" />
           </button>
           <button
-            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none disabled:bg-gray-100 rounded-full p-1 bg-white border"
+            class="grid hover:drop-shadow drop-shadow-none disabled:drop-shadow-none bg-secondary text-on-secondary disabled:bg-secondary-container disabled:text-on-secondary-container rounded-full p-1 border"
             onClick={() => {
               setEditMode('clear')
             }}