Added backdrop blur to popup windows

src/components/AppLayout.tsx

@@ -174,18 +174,26 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
         {/* Background when navbar is opened */}
         <div
-          className={`fixed bg-shade inset-0 transition-opacity duration-500 
+          className={`fixed inset-0 transition-[backdrop-filter] duration-500 ${
+            (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
+              ? "[backdrop-filter:blur(2px)]"
+              : "pointer-events-none touch-none "
+          }`}
+        >
+          <div
+            className={`fixed bg-shade inset-0 transition-opacity duration-500 
         ${turnSubIntoContent ? "z-10" : ""}
         ${
           (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
             ? "opacity-60"
-            : "opacity-0 pointer-events-none touch-none"
+            : "opacity-0"
         }`}
-          onClick={() => {
+            onClick={() => {
-            appLayout.setMainPanelOpen(false);
+              appLayout.setMainPanelOpen(false);
-            appLayout.setSubPanelOpen(false);
+              appLayout.setSubPanelOpen(false);
-          }}
+            }}
-        ></div>
+          ></div>
+        </div>
 
         {/* Sub panel */}
         {props.subPanel ? (
@@ -261,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           setState={appLayout.setLanguagePanelOpen}
         >
           <h2 className="text-2xl">{props.langui.select_language}</h2>
-          <div className="flex flex-wrap flex-row gap-2">
+          <div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
             {router.locales?.sort().map((locale) => (
               <Button
                 key={locale}

src/components/Panels/MainPanel.tsx

@@ -77,6 +77,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
                 {router.locale.toUpperCase()}
               </Button>
             )}
+
+            <Button
+              className={
+                appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
+              }
+            >
+              <span
+                className={`material-icons ${
+                  !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
+                } `}
+              >
+                search
+              </span>
+            </Button>
           </div>
         </div>
       </div>

src/components/Popup.tsx

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
+import Button from "./Button";
 
 export type PopupProps = {
   setState: Dispatch<SetStateAction<boolean | undefined>>;
@@ -9,23 +10,29 @@ export type PopupProps = {
 export default function Popup(props: PopupProps): JSX.Element {
   return (
     <div
-      className={`fixed inset-0 z-20 grid place-content-center ${
+      className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${
-        props.state ? "" : "pointer-events-none touch-none"
+        props.state ? "[backdrop-filter:blur(2px)]" : "pointer-events-none touch-none"
       }`}
     >
       <div
         className={`fixed bg-shade inset-0 transition-all duration-500 ${
-          props.state ? "bg-opacity-60" : "bg-opacity-0"
+          props.state ? "bg-opacity-50" : "bg-opacity-0"
         }`}
         onClick={() => {
           props.setState(false);
         }}
       />
       <div
-        className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
+        className={`relative p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
           props.state ? "scale-100" : "scale-0"
         }`}
       >
+        <Button
+          className="!p-1 absolute -top-16 bg-light border-light border-4"
+          onClick={() => props.setState(false)}
+        >
+          <span className="material-icons p-1">close</span>
+        </Button>
         {props.children}
       </div>
     </div>

src/pages/library/[slug].tsx

@@ -204,7 +204,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
             <h2 className="text-2xl text-center">{langui.details}</h2>
             <div className="grid grid-flow-col w-full place-content-between">
               {item.metadata.length > 0 ? (
-                <div className="grid place-items-center">
+                <div className="grid place-items-center place-content-start">
                   <h3 className="text-xl">{langui.type}</h3>
                   <div className="grid grid-flow-col gap-1">
                     <Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
@@ -217,7 +217,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               )}
 
               {item.release_date ? (
-                <div className="grid place-items-center">
+                <div className="grid place-items-center place-content-start">
                   <h3 className="text-xl">{langui.release_date}</h3>
                   <p>{prettyDate(item.release_date)}</p>
                 </div>
@@ -226,11 +226,23 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               )}
 
               {item.price ? (
-                <div className="grid place-items-center">
+                <div className="grid place-items-center text-center place-content-start">
                   <h3 className="text-xl">{langui.price}</h3>
                   <p>
-                    {prettyPrice(item.price, currencies, appLayout.currency)}
+                    {prettyPrice(
+                      item.price,
+                      currencies,
+                      item.price.currency.data.attributes.code
+                    )}
                   </p>
+                  {item.price.currency.data.attributes.code !==
+                    appLayout.currency && (
+                    <p>
+                      {prettyPrice(item.price, currencies, appLayout.currency)}{" "}
+                      <br />
+                      (calculated)
+                    </p>
+                  )}
                 </div>
               ) : (
                 ""