diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js index 8606d84c..3c4a7fde 100644 --- a/src/components/expandGrid/ExpandGrid.js +++ b/src/components/expandGrid/ExpandGrid.js @@ -1,4 +1,4 @@ -import React, { Component, useRef, useState } from "react" +import React, { useRef, useState } from "react" import { Flipper, Flipped } from "react-flip-toolkit" import "./expandGrid.scss" diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss index e114ccce..2efa2ee9 100644 --- a/src/components/expandGrid/expandGrid.scss +++ b/src/components/expandGrid/expandGrid.scss @@ -93,9 +93,6 @@ flex-grow: 0; margin-right: 0; width: auto; - - @media screen and (max-width: 890px) { - } } } diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js index 1bb67f07..4f3919fc 100644 --- a/src/components/videoBackground/VideoBackground.js +++ b/src/components/videoBackground/VideoBackground.js @@ -13,10 +13,11 @@ const VideoBackground = ({ data: { video, description, button } }) => { setIsVideoPause(prev => !prev) } - useEffect(() => { - - const isVideoPauseLocal = typeof window !== 'undefined' ? localStorage.getItem('videoPaused') : undefined + const isVideoPauseLocal = + typeof window !== "undefined" + ? localStorage.getItem("videoPaused") + : undefined if (isVideoPauseLocal === "true") { console.log(isVideoPauseLocal) @@ -27,10 +28,9 @@ const VideoBackground = ({ data: { video, description, button } }) => { }, []) useEffect(() => { - localStorage.setItem('videoPaused', isVideoPause) + localStorage.setItem("videoPaused", isVideoPause) }, [isVideoPause]) - return (
diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss index aa61f43a..349d89dc 100644 --- a/src/components/videoBackground/videoBackground.scss +++ b/src/components/videoBackground/videoBackground.scss @@ -1,9 +1,10 @@ .videoBackground { - width: 100%; - height: 90vh; + width: calc(100% - 6em); + height: 80vh; position: relative; z-index: 3; display: flex; + margin: 3em; video { top: 0; position: absolute; @@ -12,26 +13,34 @@ object-fit: cover; z-index: -1; cursor: pointer; + border-radius: 20px; } - &-card { z-index: 4; align-self: flex-end; flex-basis: 1; max-width: 600px; backdrop-filter: blur(14px); - color: white; - border-radius: 5px; - background: #ffffff4f; + color: #545468; + border-radius: 16px; + background: #e8e8e8b3; box-shadow: 0px 0px 3px #00000044; - margin: 1em; - padding: 1em; + margin: 3em; + padding: 2em; + p { + font-style: normal; + font-weight: bold; + font-size: 31px; + line-height: 46px; + /* Gray 600 */ + color: #545468; + } button { - background: none; - border: 1px solid white; + background: #545468; + border: none; color: white; border-radius: 3px; - padding: 0.3em; + padding: .6em 3em; } } }