style(#281): change network popup

src/features/NoNetworkPopup/index.tsx

@@ -1,32 +1,36 @@
+import { useState } from 'react'
+
 import { useNoNetworkPopupStore } from 'features/NoNetworkPopup'
-import { Background } from 'features/Background'
 
 import {
   ArrowLoader,
-  Container,
-  Logo,
   SubTitle,
   Title,
-  Wrapper,
+  ScModalContainer,
+  ScBody,
+  ScButton,
 } from './styled'
 
 export * from './store'
 
 export const NoNetworkPopup = () => {
+  const [isClose, setIsClose] = useState(false)
   const { isOnline } = useNoNetworkPopupStore()
 
   if (isOnline) return null
 
   return (
-    <Wrapper>
+    <ScModalContainer
-      <Background>
+      isOpen={!isOnline && !isClose}
-        <Container>
+      withCloseButton={false}
-          <Logo />
+      close={() => setIsClose(true)}
+    >
+      <ScBody>
         <ArrowLoader />
         <Title t='lost_connection' />
         <SubTitle t='check_connection' />
-        </Container>
+        <ScButton onClick={() => setIsClose(true)}>Ok</ScButton>
-      </Background>
+      </ScBody>
-    </Wrapper>
+    </ScModalContainer>
   )
 }

src/features/NoNetworkPopup/styled.tsx

@@ -1,74 +1,93 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { Arrows } from 'features/ArrowLoader/Icon'
 import { T9n } from 'features/T9n'
+import { ButtonSolid } from 'features/Common'
 
-export const Wrapper = styled.div`
+import { Modal as BaseModal } from '../Modal'
-  position: absolute;
+import { ModalWindow } from '../Modal/styled'
-  left: 0;
+import { isMobileDevice } from '../../config'
-  top: 0;
+
-  width: 100vw;
+export const ScModalContainer = styled(BaseModal)`
-  height: 100vh;
+  ${ModalWindow} {
-  z-index: 1000;
+    width: 577px;
+    height: 367px;
+    border-radius: 5px;
+    background-color: #333333;
+    padding: 50px 0;
+
+    ${isMobileDevice
+    ? css`
+          padding: 20px 0;
+          width: 332px;
+          height: 210px;
+       `
+    : ''};
+  }
 `
 
-export const Container = styled.div`
+export const ScBody = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  color: #FFFFFF;
-`
-
-export const Logo = styled.div`
-  width: 234px;
-  height: 54px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url(/images/logo.svg);
-  margin-bottom: 87px;
-
-  @media (max-width: 850px) {
-    width: 144px;
-    height: 33px;
-    margin-bottom: 54px;
-  }
 `
 
 export const ArrowLoader = styled(Arrows)`
-  width: 94px;
+  width: 101px;
-  height: 87px;
+  height: 94px;
 
   @media (max-width: 850px) {
-    width: 58px;
+    width: 48px;
-    height: 54px;
+    height: 45px;
   }
 `
 
 export const Title = styled(T9n)`
-  font-weight: bold;
+  font-weight: 700;
   font-size: 24px;
   line-height: 24px;
-  margin-top: 87px;
+  margin-top: 37px;
 
   @media (max-width: 850px) {
-    font-size: 14px;
+    font-size: 19px;
-    line-height: 15px;
+    line-height: 26px;
-    margin-top: 54px;
+    margin-top: 9px;
   }
 `
 
 export const SubTitle = styled(T9n)`
-  font-weight: 500;
+  font-weight: 400;
-  font-size: 16px;
+  font-size: 20px;
-  line-height: 20px;
+  line-height: 28px;
-  letter-spacing: 0.03em;
+  margin-top: 11px;
-  opacity: 0.8;
-  margin-top: 12px;
 
   @media (max-width: 850px) {
-    font-size: 10px;
+    font-size: 14px;
-    line-height: 12px;
+    line-height: 28px;
-    margin-top: 7px;
+    margin-top: 9px;
   }
 `
+
+export const ScButton = styled(ButtonSolid)`
+  color: white;
+  width: 134px;
+  height: 50px;
+  margin-top: 37px;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 50px;
+
+  ${isMobileDevice
+    ? css`
+          margin-top: 9px;
+          border-radius: 2px;
+          width: 156px;
+          height: 44px;
+          font-weight: 600;
+          font-size: 15px;
+          line-height: 22px;
+          letter-spacing: -0.408px;
+       `
+    : ''};
+`