All files / src/componentsV2/Table/components TechnicalErrorState.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
 
 
 
8x
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Stack } from "@mui/material";
import { GlobeIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import React from "react";
 
function TechnicalErrorState() {
  const { palette } = useAppTheme();
  return (
    <Stack height="100dvh" alignItems="center" justifyContent="center">
      <Stack>
        <Stack
          alignSelf="center"
          mb="24px"
          borderRadius="50%"
          width="68px"
          height="68px"
          bgcolor={palette.primitive?.transparent["darken-5"]}
          alignItems="center"
          justifyContent="center"
        >
          <GlobeIcon fill={palette.text.secondary} size="28px" />
        </Stack>
        <GiveText
          textAlign="center"
          fontWeight={400}
          fontSize="18px"
          color="primary"
        >
          Technical Difficulties
        </GiveText>
        <GiveText
          mt="4px"
          mb="24px"
          fontWeight={400}
          fontSize="14px"
          color="secondary"
          textAlign="center"
          px="16px"
        >
          There seems to be a temporary network issue. We’re working on
          resolving it.
        </GiveText>
        <Stack alignItems="center" width="100%">
          <GiveButton
            size="large"
            sx={{
              borderRadius: "40px",
              width: "fit-content !important",
            }}
            onClick={() => window.location.reload()}
            variant="outline"
            label="Reload page"
          />
        </Stack>
      </Stack>
    </Stack>
  );
}
 
export default TechnicalErrorState;