feat/ focus mode

package.json

@@ -65,6 +65,7 @@
     "react-i18next": "^11.7.3",
     "react-if": "^4.0.1",
     "react-joyride": "^2.1.1",
+    "react-kawaii": "^0.16.0",
     "react-mailto.js": "^2.1.0",
     "react-redux": "^7.2.2",
     "react-redux-firebase": "^3.0.5",

src/@types/libraries.d.ts

@@ -1,2 +1,3 @@
 declare module 'react-use-toggle';
+declare module 'react-kawaii';
 declare module 'react-firebaseui-localized';

src/RouterAndDataLoader.tsx

@@ -44,7 +44,6 @@ export default memo((props: { children?: JSX.Element }) => {
   const [today, setToday] = useState(Date.now());
   const yesterday = subHours(today, getHours(today)).getTime();
 
-  // Refetch data every hour.
   useInterval(() => {
     console.log('Refetching data every hour...');
     setToday(Date.now());

src/components/ui/EmotionIconButton/EmotionIconButton.tsx

@@ -1,24 +1,47 @@
-import { Fab } from '@material-ui/core';
+import { IconButton, useTheme } from '@material-ui/core';
 import React, { memo } from 'react';
-import { Icon } from '../../ui/Icon';
+import { Planet } from 'react-kawaii';
+
+type EmotionTypes = 'happy_face' | 'sad_face';
 
 export interface EmotionIconButtonProps {
-  type: 'happy_face' | 'sad_face';
-  color?: 'primary' | 'secondary';
+  type: EmotionTypes;
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => void;
 }
-
 const EmotionIconButton = memo(function EmotionIconButton({
   type,
-  color = 'secondary',
   onClick,
 }: EmotionIconButtonProps) {
+  const theme = useTheme();
+
+  function geticon() {
+    const kawaiiIconSize = 75;
+    switch (type) {
+      case 'happy_face':
+        return (
+          <Planet
+            mood="happy"
+            size={kawaiiIconSize}
+            color={theme.palette.primary.main}
+          />
+        );
+      case 'sad_face':
+        return (
+          <Planet
+            mood="sad"
+            size={kawaiiIconSize}
+            color={theme.palette.secondary.main}
+          />
+        );
+    }
+  }
+
   return (
-    <Fab color={color} onClick={onClick}>
-      <Icon code={type} size="large" />
-    </Fab>
+    <IconButton style={{ padding: 0 }} onClick={onClick}>
+      {geticon()}
+    </IconButton>
   );
 });
 

src/components/unsorted/Autocomplete/Autocomplete.tsx

@@ -35,7 +35,7 @@ const Autocomplete = memo(function Autocomplete(
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
 
-          // Suggest the creation of a new value
+          // Suggest the creation of a new value.
           if (params.inputValue !== '') {
             filtered.push({
               // TODO this.

src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx

@@ -33,7 +33,7 @@ const WhatDoYouFeelAboutTheTask = memo((props: Props) => {
             </Grid>
             <Grid item xs>
               <Link to={`${url}/isTroublesome`}>
-                <EmotionIconButton type="sad_face" color="primary" />
+                <EmotionIconButton type="sad_face" />
               </Link>
             </Grid>
           </Grid>

src/components/unsorted/WhatDoYouFeelSlider.tsx

@@ -14,7 +14,7 @@ const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
       <Grid item container justify="space-between">
         <Grid item xs={2}>
           <Box textAlign="center">
-            <EmotionIconButton color="primary" type="sad_face" />
+            <EmotionIconButton type="sad_face" />
           </Box>
         </Grid>
         <Grid item xs>