feat: add inspirational phrases

vraja-nayaka · Feb 7, 2021 · 2d09f67 · 2d09f67
1 parent 455e619
commit 2d09f67
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 44 deletions.
diff --git a/src/features/components/LoadingScreen/index.tsx b/src/features/components/LoadingScreen/index.tsx
@@ -1,65 +1,77 @@
-import React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import CircularProgress, { CircularProgressProps } from '@material-ui/core/CircularProgress';
+import React from "react";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import CircularProgress, {
+  CircularProgressProps,
+} from "@material-ui/core/CircularProgress";
+import { Box, Typography } from "@material-ui/core";
+import { footerHeight, headerHeight } from "helpers/constatnts";
+import { getRandom, inspirationalPhrases } from "helpers/phrases";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      position: 'relative',
-      height: "100vh",
-      backgroundColor: '#ffe',
+      height: `calc(100vh - ${headerHeight + footerHeight}px)`,
+      backgroundColor: "#ffe",
     },
     bottom: {
-      color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: '50%',
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      width: '100px',
+      color: theme.palette.grey[theme.palette.type === "light" ? 400 : 700],
+      position: "absolute",
+      animationDuration: "800ms",
+      top: 0,
+      left: -40,
     },
     top: {
-      color: 'primary',
-      animationDuration: '600ms',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: '50%',
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      width: '100px',
+      color: "primary",
+      animationDuration: "600ms",
+      position: "absolute",
+      top: 0,
+      left: -40,
     },
     circle: {
-      strokeLinecap: 'round',
+      strokeLinecap: "round",
     },
-  }),
+  })
 );
 
 const LoadingScreen = (props: CircularProgressProps) => {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <CircularProgress
-        variant="determinate"
-        className={classes.bottom}
-        size={80}
-        thickness={4}
-        {...props}
-        value={100}
-      />
-      <CircularProgress
-        variant="indeterminate"
-        disableShrink
-        className={classes.top}
-        classes={{
-          circle: classes.circle,
-        }}
-        size={80}
-        thickness={4}
-        {...props}
-      />
+      <Box
+        height={`calc(100vh - ${headerHeight + footerHeight}px)`}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+      >
+        <Box marginBottom={5}>
+          <Typography variant="h6" align="center" color="textSecondary">
+            {getRandom(inspirationalPhrases)}
+          </Typography>
+        </Box>
+        <Box position="relative">
+          <CircularProgress
+            variant="indeterminate"
+            disableShrink
+            className={classes.bottom}
+            size={80}
+            thickness={6}
+            {...props}
+            value={30}
+          />
+          <CircularProgress
+            variant="indeterminate"
+            className={classes.top}
+            classes={{
+              circle: classes.circle,
+            }}
+            size={80}
+            thickness={2}
+            {...props}
+          />
+        </Box>
+      </Box>
     </div>
   );
 };

diff --git a/src/helpers/phrases.ts b/src/helpers/phrases.ts
@@ -0,0 +1,11 @@
+export const inspirationalPhrases = [
+  "Начните с малого - достигните невероятного.",
+  "Обещайте делать лишь чуть больше, чем вы уже делаете сейчас.",
+  "Если вы встаёте в 6:00, теперь вы можете начать вставать в 5:45.",
+  "Огромная движущая сила – это наше желание быть счастливым.",
+  "Похоже вы готовы осознанно работать над собой!",
+  "Найдите друзей своих друзей. Вместе веселее",
+];
+
+export const getRandom = (list: string[]) =>
+  list[Math.floor(Math.random() * Math.floor(list.length))];