From a989e283ddd4ade0be92ded1f7aef55667029f11 Mon Sep 17 00:00:00 2001
From: Shotaro Nakamura <syoutarou1103@outlook.jp>
Date: Tue, 6 Feb 2024 12:52:49 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20ImageNote=E5=91=A8=E8=BE=BA=E3=81=AE?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2=E3=83=BC=E3=83=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/islands/note/components/note-components/Controller.tsx  | 6 +++---
 src/islands/note/components/notes/ImageNote/ImageNote.tsx   | 2 +-
 .../components/notes/ImageNote/components/EditorCoreX.tsx   | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/islands/note/components/note-components/Controller.tsx b/src/islands/note/components/note-components/Controller.tsx
index 6eea876e..4124e7c6 100644
--- 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
index 386daf3f..d21de131 100644
--- 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
index 89a0bc51..07086346 100644
--- 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')
             }}