Merge pull request #134 from the-programmers-hangout/ui-fix-header-waves-being-cut

ui: fix header waves being cut

src/components/Header/styles.tsx

@@ -11,10 +11,10 @@ export const HeaderWrapper = styled.header`
   position: relative;
   min-height: auto;
   background: #121240;
-  overflow: hidden;
 
   &.is-home {
     min-height: 100vh;
+    overflow: hidden;
   }
 `
 
@@ -60,6 +60,7 @@ export const FadedBottomWave = styled.div`
   right: 0;
   transition: opacity 0.5s, transform 0.5s;
   opacity: 0;
+  pointer-events: none;
 
   svg {
     position: static;

src/components/Waves/styles.tsx

@@ -1,19 +1,21 @@
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 import WavesBottom from "../../images/waves-bot.svg"
 import WavesTop from "../../images/waves-top.svg"
 
-export const StyledWavesTop = styled(WavesTop)`
+const waves = css`
   opacity: 0.5;
   width: 100vw;
   max-width: 100%;
   position: absolute;
+  pointer-events: none;
+`
+
+export const StyledWavesTop = styled(WavesTop)`
+  ${waves};
   top: 0;
 `
 
 export const StyledWavesBottom = styled(WavesBottom)`
-  opacity: 0.5;
-  width: 100vw;
-  max-width: 100%;
-  position: absolute;
+  ${waves};
   bottom: 0;
 `