blur bg on err pages (#1829)

* blur bg on err pages * add logo to err page * pushing error for reproducing the bug * added footer, remove noScroll in view * rm error Co-authored-by: Maria Yablonskaya <[email protected]>
gnosis · Jan 27, 2022 · c6a0d65 · c6a0d65
1 parent d797d68
commit c6a0d65
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx b/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
@@ -10,13 +10,29 @@ import { userAgent } from '@src/utils/userAgent'
 import { AutoRow } from 'components/Row'
 import { MEDIA_WIDTHS } from '@src/theme'
 import CowError from 'assets/cow-swap/CowError.png'
+import { UniIcon, LogoImage } from '../Header'
+import { HeaderRow } from 'components/Header/HeaderMod'
+import Footer from 'components/Footer'
 
 const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
   align-items: center;
   min-height: 100vh;
   overflow-x: hidden;
+  &:after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background-image: ${({ theme }) => theme.body.background};
+    transition: 0.5s;
+    z-index: -1;
+  }
 `
 
 const Wrapper = styled(Page)`
@@ -56,33 +72,19 @@ const HeaderWrapper = styled.div`
   position: fixed;
   top: 0;
   z-index: 2;
+  padding: 16px;
   @media screen and (max-width: ${MEDIA_WIDTHS.upToSmall}px) {
     position: relative;
   }
 `
-
-export const LogoImage = styled.img.attrs((props) => ({
-  src: props.theme.logo.src,
-  // alt: props.theme.logo.alt,
-  // width: props.theme.logo.width,
-  // height: props.theme.logo.height,
-}))`
-  object-fit: contain;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    width: 150px;
-  `};
+const FooterWrapper = styled(HeaderWrapper)`
+  z-index: 1;
+  flex-grow: 1;
+  width: 100%;
+  position: relative;
+  top: auto;
 `
 
-const CowLogo = styled.div`
-  display: flex;
-  margin: 1rem;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: rotate(-5deg);
-  }
-`
 const CodeBlockWrapper = styled.div`
   background: ${({ theme }) => theme.bg4};
   overflow: auto;
@@ -135,17 +137,20 @@ export default class ErrorBoundary extends Component<unknown, ErrorBoundaryState
   }
 
   render() {
+    document.body.classList.remove('noScroll')
     const { error } = this.state
     if (error !== null) {
       const encodedBody = encodeURIComponent(issueBody(error))
       return (
         <AppWrapper>
           <HeaderWrapper>
-            <a href=".">
-              <CowLogo>
-                <LogoImage />
-              </CowLogo>
-            </a>
+            <HeaderRow marginRight="0">
+              <a href=".">
+                <UniIcon>
+                  <LogoImage />
+                </UniIcon>
+              </a>
+            </HeaderRow>
           </HeaderWrapper>
           <Wrapper>
             <FlexContainer>
@@ -187,6 +192,9 @@ export default class ErrorBoundary extends Component<unknown, ErrorBoundaryState
               </AutoRow>
             </AutoColumn>
           </Wrapper>
+          <FooterWrapper>
+            <Footer />
+          </FooterWrapper>
         </AppWrapper>
       )
     }

diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -188,7 +188,7 @@ export const LogoImage = styled.div`
   }
 `
 
-const UniIcon = styled.div`
+export const UniIcon = styled.div`
   display: flex;
   position: relative;
   transition: transform 0.3s ease;