refactor ThemeIsland

packages/app/src/components/Theme/ThemeIsland.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 import { Themes } from '~/stores/use-next-themes';
 
 import { ThemeInjector } from './utils/ThemeInjector';
@@ -11,7 +13,23 @@ export const getBackgroundImageSrc = (colorScheme: Themes): string => {
   }
 };
 
-const ThemeIsland = ({ children }: { children: JSX.Element }): JSX.Element => {
-  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+type Props = {
+  children: JSX.Element,
+  colorScheme?: Themes,
+}
+
+const ThemeIsland = ({ children, colorScheme }: Props): JSX.Element => {
+  const newChildren = (
+    <>
+      {colorScheme != null && (
+        <div className='grw-bg-image-wrapper'>
+          <Image className='grw-bg-image' alt='background-image' src={getBackgroundImageSrc(colorScheme)} layout='fill' quality="100" />
+        </div>
+      )}
+      {children}
+    </>
+  );
+  return <ThemeInjector className={styles.theme}>{newChildren}</ThemeInjector>;
 };
+
 export default ThemeIsland;

packages/app/src/components/Theme/utils/ThemeImageProvider.tsx

@@ -1,7 +1,6 @@
 import { GrowiThemes } from '~/interfaces/theme';
 import { Themes } from '~/stores/use-next-themes';
 
-import { getBackgroundImageSrc as getIslandBackgroundImageSrc } from '../ThemeIsland';
 import { getBackgroundImageSrc as getSpringBackgroundImageSrc } from '../ThemeSpring';
 import { getBackgroundImageSrc as getWoodBackgroundImageSrc } from '../ThemeWood';
 
@@ -10,8 +9,6 @@ export const getBackgroundImageSrc = (theme: GrowiThemes | undefined, colorSchem
     return undefined;
   }
   switch (theme) {
-    case GrowiThemes.ISLAND:
-      return getIslandBackgroundImageSrc(colorScheme);
     case GrowiThemes.SPRING:
       return getSpringBackgroundImageSrc(colorScheme);
     case GrowiThemes.WOOD:

packages/app/src/components/Theme/utils/ThemeProvider.tsx

@@ -47,7 +47,7 @@ export const ThemeProvider = ({ theme, children, colorScheme }: Props): JSX.Elem
     case GrowiThemes.HUFFLEPUFF:
       return <ThemeHufflepuff colorScheme={colorScheme}>{children}</ThemeHufflepuff>;
     case GrowiThemes.ISLAND:
-      return <ThemeIsland>{children}</ThemeIsland>;
+      return <ThemeIsland colorScheme={colorScheme}>{children}</ThemeIsland>;
     case GrowiThemes.JADE_GREEN:
       return <ThemeJadeGreen>{children}</ThemeJadeGreen>;
     case GrowiThemes.KIBELA: