Added texture the dark mode bg + show subitem types

src/components/AppLayout.tsx

@@ -81,7 +81,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         </Head>
 
         {/* Navbar */}
-        <div className="fixed bottom-0 left-0 right-0 h-20 border-t-[1px] border-black dark:border-dark-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
+        <div className="fixed inset-0 top-auto h-20 border-t-[1px] border-black dark:border-dark-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light dark:bg-dark-light texture-paper-dots">
           <span
             className="material-icons mt-[.1em] cursor-pointer"
             onClick={() => appLayout.setMainPanelOpen(true)}
@@ -103,7 +103,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
         {/* Content panel */}
         <div
-          className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm] ${contentPanelClass}`}
+          className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light dark:bg-dark-light texture-paper-dots ${contentPanelClass}`}
         >
           {props.contentPanel ? (
             props.contentPanel
@@ -137,7 +137,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         {/* Sub panel */}
         {props.subPanel ? (
           <div
-            className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
+            className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light dark:bg-dark-light texture-paper-dots
           ${
             turnSubIntoContent
               ? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
@@ -154,7 +154,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
         {/* Main panel */}
         <div
-          className={`${mainPanelClass} border-r-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
+          className={`${mainPanelClass} border-r-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light dark:bg-dark-light texture-paper-dots
         ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
         >
           <MainPanel langui={props.langui} />

src/components/Library/LibraryItemsPreview.tsx

@@ -39,6 +39,9 @@ export default function LibraryItemsPreview(
         <div className="linearbg-obi dark:linearbg-dark-obi fine:drop-shadow-shade-lg dark:fine:drop-shadow-dark-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
           {item.metadata && item.metadata.length > 0 ? (
             <div className="flex flex-row gap-1">
+              {item.metadata[0].__typename === "ComponentMetadataOther"
+                ? console.log(item.slug)
+                : ""}
               <Chip>{prettyItemSubType(item.metadata[0])}</Chip>
             </div>
           ) : (

src/components/Panels/MainPanel.tsx

@@ -22,7 +22,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
   return (
     <div
       className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${
-        appLayout.mainPanelReduced && "px-4"
+        appLayout.mainPanelReduced && isDesktop && "px-4"
       }`}
     >
       <div>
@@ -49,7 +49,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
 
           <div
             className={`flex ${
-              appLayout.mainPanelReduced && isDesktop ? "flex-col" : "flex-row"
+              appLayout.mainPanelReduced && isDesktop ? "mt-4 flex-col gap-3" : "flex-row"
             } flex-wrap gap-2`}
           >
             <Button

src/graphql/operation.graphql

@@ -335,7 +335,6 @@ query getLibraryItem($slug: String, $language_code: String) {
             subtype {
               data {
                 attributes {
-                  slug
                   titles(
                     filters: { language: { code: { eq: $language_code } } }
                   ) {
@@ -421,9 +420,9 @@ query getLibraryItem($slug: String, $language_code: String) {
           data {
             id
             attributes {
-              slug
               title
               subtitle
+              slug
               thumbnail {
                 data {
                   attributes {
@@ -436,6 +435,98 @@ query getLibraryItem($slug: String, $language_code: String) {
                   }
                 }
               }
+              release_date {
+                year
+                month
+                day
+              }
+              price {
+                amount
+                currency {
+                  data {
+                    attributes {
+                      symbol
+                      code
+                    }
+                  }
+                }
+              }
+              metadata {
+                __typename
+                ... on ComponentMetadataBooks {
+                  subtype {
+                    data {
+                      attributes {
+                        slug
+                        titles(
+                          filters: {
+                            language: { code: { eq: $language_code } }
+                          }
+                        ) {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+                ... on ComponentMetadataGame {
+                  platform {
+                    data {
+                      attributes {
+                        short
+                      }
+                    }
+                  }
+                }
+                ... on ComponentMetadataVideo {
+                  subtype {
+                    data {
+                      attributes {
+                        slug
+                        titles(
+                          filters: {
+                            language: { code: { eq: $language_code } }
+                          }
+                        ) {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+                ... on ComponentMetadataAudio {
+                  subtype {
+                    data {
+                      attributes {
+                        slug
+                        titles(
+                          filters: {
+                            language: { code: { eq: $language_code } }
+                          }
+                        ) {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+                ... on ComponentMetadataOther {
+                  subtype {
+                    data {
+                      attributes {
+                        slug
+                        titles(
+                          filters: {
+                            language: { code: { eq: $language_code } }
+                          }
+                        ) {
+                          title
+                        }
+                      }
+                    }
+                  }
+                }
+              }
             }
           }
         }

src/graphql/operations-types.ts

@@ -487,7 +487,6 @@ export type GetLibraryItemQuery = {
                   __typename: "VideoSubtypeEntity";
                   attributes: {
                     __typename: "VideoSubtype";
-                    slug: string;
                     titles: Array<{
                       __typename: "ComponentTranslationsSimpleTitle";
                       title: string;
@@ -598,9 +597,9 @@ export type GetLibraryItemQuery = {
             id: string;
             attributes: {
               __typename: "LibraryItem";
-              slug: string;
               title: string;
               subtitle: string;
+              slug: string;
               thumbnail: {
                 __typename: "UploadFileEntityResponse";
                 data: {
@@ -616,6 +615,111 @@ export type GetLibraryItemQuery = {
                   };
                 };
               };
+              release_date: {
+                __typename: "ComponentBasicsDatepicker";
+                year: number;
+                month: number;
+                day: number;
+              };
+              price: {
+                __typename: "ComponentBasicsPrice";
+                amount: number;
+                currency: {
+                  __typename: "CurrencyEntityResponse";
+                  data: {
+                    __typename: "CurrencyEntity";
+                    attributes: {
+                      __typename: "Currency";
+                      symbol: string;
+                      code: string;
+                    };
+                  };
+                };
+              };
+              metadata: Array<
+                | {
+                    __typename: "ComponentMetadataBooks";
+                    subtype: {
+                      __typename: "TextualSubtypeEntityResponse";
+                      data: {
+                        __typename: "TextualSubtypeEntity";
+                        attributes: {
+                          __typename: "TextualSubtype";
+                          slug: string;
+                          titles: Array<{
+                            __typename: "ComponentTranslationsSimpleTitle";
+                            title: string;
+                          }>;
+                        };
+                      };
+                    };
+                  }
+                | {
+                    __typename: "ComponentMetadataVideo";
+                    subtype: {
+                      __typename: "VideoSubtypeEntityResponse";
+                      data: {
+                        __typename: "VideoSubtypeEntity";
+                        attributes: {
+                          __typename: "VideoSubtype";
+                          slug: string;
+                          titles: Array<{
+                            __typename: "ComponentTranslationsSimpleTitle";
+                            title: string;
+                          }>;
+                        };
+                      };
+                    };
+                  }
+                | {
+                    __typename: "ComponentMetadataGame";
+                    platform: {
+                      __typename: "GamePlatformEntityResponse";
+                      data: {
+                        __typename: "GamePlatformEntity";
+                        attributes: {
+                          __typename: "GamePlatform";
+                          short: string;
+                        };
+                      };
+                    };
+                  }
+                | {
+                    __typename: "ComponentMetadataAudio";
+                    subtype: {
+                      __typename: "AudioSubtypeEntityResponse";
+                      data: {
+                        __typename: "AudioSubtypeEntity";
+                        attributes: {
+                          __typename: "AudioSubtype";
+                          slug: string;
+                          titles: Array<{
+                            __typename: "ComponentTranslationsSimpleTitle";
+                            title: string;
+                          }>;
+                        };
+                      };
+                    };
+                  }
+                | {
+                    __typename: "ComponentMetadataOther";
+                    subtype: {
+                      __typename: "OtherSubtypeEntityResponse";
+                      data: {
+                        __typename: "OtherSubtypeEntity";
+                        attributes: {
+                          __typename: "OtherSubtype";
+                          slug: string;
+                          titles: Array<{
+                            __typename: "ComponentTranslationsSimpleTitle";
+                            title: string;
+                          }>;
+                        };
+                      };
+                    };
+                  }
+                | { __typename: "Error" }
+              >;
             };
           }>;
         };

src/pages/index.tsx

@@ -13,7 +13,7 @@ export default function Home(props: HomeProps): JSX.Element {
 
   const contentPanel = (
     <ContentPanel autoformat>
-      <div className="grid place-items-center place-content-center w-full gap-5 text-center">
+      <div className="grid place-items-center place-content-center w-full gap-5 text-center colorize-black dark:colorize-dark-black">
         <SVG
           className="w-32 mobile:w-1/2"
           src={"/icons/accords.svg"}

src/tailwind.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-
   * {
     @apply box-border font-body font-medium scroll-smooth scroll-m-8;
   }
@@ -45,6 +44,19 @@
 
   /* CHANGE PROSE DEFAULTS */
 
+  .prose,
+  .prose p,
+  .prose h1,
+  .prose h2,
+  .prose h3,
+  .prose h4,
+  .prose h5,
+  .prose h6,
+  .prose a,
+  .prose strong {
+    @apply text-black dark:text-dark-black;
+  }
+
   .prose a {
     @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark dark:decoration-dark-dark hover:text-dark dark:hover:text-dark-dark;
   }
@@ -61,3 +73,9 @@
     @apply bg-mid dark:bg-dark-mid shadow-inner-sm shadow-shade dark:shadow-dark-shade;
   }
 }
+
+@layer components {
+  .texture-paper-dots {
+    @apply bg-paper-dots dark:bg-dark-paper-dots bg-blend-multiply dark:bg-blend-overlay bg-local bg-[length:10cm];
+  }
+}

tailwind.config.js

@@ -52,8 +52,8 @@ module.exports = {
       fine: { raw: "(pointer: fine)" },
     },
     backgroundImage: {
-      paper: "url('/paper.webp')",
+      "paper-dots": "url('/paper-dots.webp')",
-      "dark-paper": "url('/paper.webp')",
+      "dark-paper-dots": "url('/paper-dots-dark.webp')",
     },
     extend: {
       boxShadow: {