Merge pull request #5 from junhoyeo/junhoyeo/fix-dock-blur

[iphone] Fix dock blur styles
junhoyeo · Dec 31, 2022 · 43c6488 · 43c6488 · vercel · Dec 31, 2022
2 parents 4387fbb + 7131096
commit 43c6488
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/iphone/src/phone/Device.tsx b/iphone/src/phone/Device.tsx
@@ -121,18 +121,21 @@ export const Device: React.FC<DeviceProps> = ({
                     ))}
                   </div>
                 </div>
-                <div className={classes.bottomWrapper}>
+                <div className={classes.dockWrapper}>
                   <Pagination />
                   <div
-                    className={classes.bottomContainer}
+                    className={classes.dockContainer}
                     style={{
                       height: DEVICE_HEIGHT * 0.11,
                       padding: `${0.045 * DEVICE_WIDTH}px ${
                         0.047 * DEVICE_WIDTH
                       }px`,
-                      backgroundImage: `url(${backgroundImage})`,
                     }}
                   >
+                    <div
+                      className={classes.dockBlur}
+                      style={{ backgroundImage: `url(${backgroundImage})` }}
+                    />
                     {dock.slice(0, 4).map((appItem, appIndex) => (
                       <GridItem dock key={appIndex} {...appItem} />
                     ))}

diff --git a/iphone/src/phone/device.module.scss b/iphone/src/phone/device.module.scss
@@ -42,7 +42,7 @@
   display: grid;
 }
 
-.bottomWrapper {
+.dockWrapper {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -53,7 +53,7 @@
   right: 0;
 }
 
-.bottomContainer {
+.dockContainer {
   width: 94.6%;
   display: flex;
   align-items: center;
@@ -66,23 +66,24 @@
   z-index: 1;
   background: inherit;
   overflow: hidden;
+}
+
+.dockBlur {
+  position: absolute;
+  background: inherit;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 
-  &::before {
-    content: '';
-    position: absolute;
-    background: inherit;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
-    filter: blur(24px);
-    margin: -20px;
-    background-size: cover;
-    opacity: 0.5;
-    background-position-y: bottom;
-  }
+  box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
+  filter: blur(18px);
+  margin: -20px;
+  background-size: cover;
+  opacity: 6.5;
+  background-position-y: bottom;
+  background-image: attr(data-bg-image);
 }
 
 .clock {