fix: NoInternet popup

WDY-412

frontend/package.json

@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "@binarycapsule/editor": "^1.1.1",
-    "@binarycapsule/ui-capsules": "^4.1.3",
+    "@binarycapsule/ui-capsules": "^4.1.4",
     "@emotion/react": "^11.1.2",
     "@emotion/styled": "^11.0.0",
     "@nivo/core": "^0.67.0",

frontend/src/App.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { Splash, theme } from '@binarycapsule/ui-capsules';
-import NoInternet from './components/NoInternet/NoInternet';
+import { NoInternet } from './components/NoInternet/NoInternet';
 import Routes from './router/routes';
 import { version } from '../package.json';
 import { IconWidyText } from './icons/widy';

frontend/src/components/NoInternet/NoInternet.jsx

@@ -1,48 +1,31 @@
 import React from 'react';
-import styled from '@emotion/styled/macro';
-import { IllustratedIcon, Modal, ModalBody, theme } from '@binarycapsule/ui-capsules';
 import { Offline } from 'react-detect-offline';
+import { Flex, IllustratedIcon, Modal, Text } from '@binarycapsule/ui-capsules';
+import { useTheme } from '@emotion/react';
 
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 28px;
-`;
+export const NoInternet = () => {
+  const theme = useTheme();
 
-const Title = styled.h1`
-  font-size: 24px;
-  color: ${props => props.theme.colors.neutral['600']};
-  text-align: center;
-`;
-
-const SubTitle = styled.h2`
-  font-size: 14px;
-  color: ${props => props.theme.colors.neutral['400']};
-  text-align: center;
-  margin-top: 12px;
-  line-height: 20px;
-`;
-
-const NoInternet = () => (
-  <Offline>
-    <Modal contentLabel="Offline-modal" isOpen width="340px">
-      <ModalBody>
-        <Content>
+  return (
+    <Offline>
+      <Modal contentLabel="Offline-modal" isOpen size="small">
+        <Flex flexDirection="column" alignItems="center" p="24" pt="12">
           <IllustratedIcon
             icon="wifi_off"
             primaryColor={theme.colors.neutral['300']}
-            secondaryColor={theme.colors.red['500']}
+            secondaryColor={theme.colors.error['500']}
             size="138px"
           />
-          <Title>No internet connection</Title>
-          <SubTitle>
-            Please, make sure you have an internet connection to continue using Widy
-          </SubTitle>
-        </Content>
-      </ModalBody>
-    </Modal>
-  </Offline>
-);
 
-export default NoInternet;
+          <Text fontWeight={500} fontSize="h5">
+            No internet connection!
+          </Text>
+
+          <Text variant="helper" textAlign="center" mt="8" px="32">
+            Please, make sure you have an internet connection to continue using Widy
+          </Text>
+        </Flex>
+      </Modal>
+    </Offline>
+  );
+};