[Front] Banner Background (#79)

* Update banner image and backdrop filter in Gallery page * Update @fluentui/react-components imports and add useMask styles
opentelekomcloud · Jan 29, 2024 · a30c201 · a30c201
1 parent 727ecea
commit a30c201
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/public/banner.jpg b/public/banner.jpg
diff --git a/public/banner.webp b/public/banner.webp
diff --git a/src/Pages/Gallery/Banner.tsx b/src/Pages/Gallery/Banner.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Divider, Image, LargeTitle, Text, makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Divider, Image, LargeTitle, Text, makeResetStyles, makeStyles, mergeClasses, shorthands, tokens } from "@fluentui/react-components";
 import { useRefEffect } from "@fluentui/react-hooks";
 import Typed from "typed.js";
 import { ColFlex, Cover, Flex } from "~/Helpers/Styles";
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     right: 0,
     bottom: "4px",
     ...shorthands.borderRadius(tokens.borderRadiusXLarge),
-    backdropFilter: "blur(1px) brightness(105%)",
+    backdropFilter: "brightness(110%)",
   },
   info: {
     ...Flex,
@@ -55,13 +55,21 @@ const useStyles = makeStyles({
   }
 });
 
+const useMaskStyle = makeResetStyles({
+  background: "linear-gradient(to right, transparent, var(--colorScrollbarOverlay))",
+  "@media screen and (max-width: 1024px)": {
+    background: tokens.colorBackgroundOverlay
+  }
+})
+
 /**
  * @author Aloento
  * @since 1.3.5
- * @version 1.5.0
+ * @version 1.5.1
  */
 export function Banner() {
   const style = useStyles();
+  const mask = useMaskStyle();
 
   const ref = useRefEffect<HTMLSpanElement>((el) => {
     const typed = new Typed(el, {
@@ -78,10 +86,8 @@ export function Banner() {
 
   return <>
     <div className={style.main}>
-      <Image className={style.img} src="/banner.jpg" />
-      <div className={style.mask} style={{
-        background: 'linear-gradient(to right, transparent, var(--colorBackgroundOverlay))',
-      }} />
+      <Image className={style.img} src="/banner.webp" />
+      <div className={mergeClasses(style.mask, mask)} />
 
       <div className={style.info}>
         <div className={style.space} />