use appbar to replace footer

README.md

@@ -133,18 +133,21 @@ Regular Mode and Recite Mode
 <img width="800" alt="Screen Shot 2022-08-23 at 12 52 17 AM" src="https://user-images.githubusercontent.com/39578778/186102830-4c664e9a-adfa-48dc-ba8c-e03df4e22ade.png">
 
 
+## For Devs
 
 ### `npm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-
 ### `npm run build`
 
-
 Builds the app for production to the `build` folder.\
 
+### Pull Requests
+
+Create a branch with proper name example 'feat/your-cool-feature', create the pull request and add authors for reviews. Please include description with details.
+
 
 ## Sponsors
 

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.3.0",
+    "react-toastify": "^10.0.4",
     "styled-components": "^5.3.5",
     "use-sound": "^4.0.1",
     "web-vitals": "^2.1.4"

src/components/common/FooterMenu.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { Grid } from "@mui/material";
+import { Grid, AppBar } from "@mui/material";
 import { Box } from "@mui/system";
 import { Tooltip } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import SelfImprovementIcon from "@mui/icons-material/SelfImprovement";
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import Select from "../utils/Select";
 import {
   FOCUS_MODE,
@@ -15,7 +15,7 @@ import {
   GAME_MODE_DEFAULT,
   GAME_MODE_SENTENCE,
   TRAINER_MODE,
-  WORDS_CARD_MODE
+  WORDS_CARD_MODE,
 } from "../../constants/Constants";
 import { Link } from "@mui/material";
 import SupportMe from "../features/SupportMe";
@@ -30,8 +30,8 @@ import MusicNoteIcon from "@mui/icons-material/MusicNote";
 import EmojiFoodBeverageIcon from "@mui/icons-material/EmojiFoodBeverage";
 import { ReactComponent as DiscordIcon } from "../../assets/Icons/discord.svg";
 import { SvgIcon } from "@mui/material";
-import KeyboardAltOutlinedIcon from '@mui/icons-material/KeyboardAltOutlined';
-import SchoolIcon from '@mui/icons-material/School';
+import KeyboardAltOutlinedIcon from "@mui/icons-material/KeyboardAltOutlined";
+import SchoolIcon from "@mui/icons-material/School";
 import { SOUND_MODE_TOOLTIP } from "../features/sound/sound";
 
 const FooterMenu = ({
@@ -54,7 +54,7 @@ const FooterMenu = ({
   isTrainerMode,
   toggleTrainerMode,
   isWordsCardMode,
-  toggleWordsCardMode
+  toggleWordsCardMode,
 }) => {
   const isSiteInfoDisabled = isMusicMode || isFocusedMode;
   const isBottomLogoEnabled = isFocusedMode && !isMusicMode;
@@ -75,7 +75,7 @@ const FooterMenu = ({
   };
 
   return (
-    <div className="footer">
+    <AppBar position="static" color="transparent">
       <Grid container justifyContent="space-between" alignItems="center">
         <Box display="flex" flexDirection="row">
           <Select
@@ -102,19 +102,23 @@ const FooterMenu = ({
               </span>
             </Tooltip>
           </IconButton>
-          {soundMode && (<Select
-            classNamePrefix="Select"
-            value={soundOptions.find((e) => e.label === soundType)}
-            options={soundOptions}
-            isSearchable={false}
-            isSelected={false}
-            onChange={handleSoundTypeChange}
-            menuPlacement="top"
-          ></Select>)}
+          {soundMode && (
+            <Select
+              classNamePrefix="Select"
+              value={soundOptions.find((e) => e.label === soundType)}
+              options={soundOptions}
+              isSearchable={false}
+              isSelected={false}
+              onChange={handleSoundTypeChange}
+              menuPlacement="top"
+            ></Select>
+          )}
           <IconButton onClick={toggleWordsCardMode}>
             <Tooltip
               title={
-                <span style={{ whiteSpace: "pre-line" }}>{WORDS_CARD_MODE}</span>
+                <span style={{ whiteSpace: "pre-line" }}>
+                  {WORDS_CARD_MODE}
+                </span>
               }
             >
               <span className={getModeButtonClassName(isWordsCardMode)}>
@@ -185,20 +189,17 @@ const FooterMenu = ({
             <SupportMe></SupportMe>
             <Tooltip
               title={
-                <span style={{ whiteSpace: "pre-line", fontSize:"12px" }}>
+                <span style={{ whiteSpace: "pre-line", fontSize: "12px" }}>
                   {GITHUB_TOOLTIP_TITLE}
-                    <Link
-                      margin="inherit"
-                      href="https://muyangguo.xyz"
-                    >
-                      {AUTHOR}
-                    </Link>
-                    <Link
-                      margin="inherit"
-                      href="https://github.com/gamer-ai/eletype-frontend/"
-                    >
-                      {GITHUB_REPO_LINK}
-                    </Link>
+                  <Link margin="inherit" href="https://muyangguo.xyz">
+                    {AUTHOR}
+                  </Link>
+                  <Link
+                    margin="inherit"
+                    href="https://github.com/gamer-ai/eletype-frontend/"
+                  >
+                    {GITHUB_REPO_LINK}
+                  </Link>
                 </span>
               }
               placement="top-start"
@@ -214,7 +215,7 @@ const FooterMenu = ({
               title={
                 <span style={{ whiteSpace: "pre-line" }}>
                   <iframe
-                  title="discord-widget"
+                    title="discord-widget"
                     src="https://discord.com/widget?id=993567075589181621&theme=dark"
                     width="100%"
                     height="300"
@@ -247,7 +248,7 @@ const FooterMenu = ({
           </Box>
         )}
       </Grid>
-    </div>
+    </AppBar>
   );
 };
 

src/components/common/Logo.js

@@ -1,7 +1,8 @@
 import React from "react";
 import KeyboardAltIcon from "@mui/icons-material/KeyboardAlt";
 
-const Logo = ({ isFocusedMode, isMusicMode }) => {
+const Logo = ({ isFocusedMode }) => {
+
   return (
     <div className="header" style={{visibility: isFocusedMode ? 'hidden' : 'visible' }}>
       <h1>

src/components/features/SupportMe.js

@@ -10,7 +10,7 @@ const SupportMe = () => {
     <Tooltip
       title={
         <div>
-          <span style={{ whiteSpace: "pre-line", fontSize:"12px"}}>
+          <span style={{ whiteSpace: "pre-line", fontSize: "12px" }}>
             {SUPPORT_TOOLTIP_TITLE}
           </span>
           <img

src/components/utils/Select.js

@@ -9,7 +9,7 @@ export default styled(Select)`
     border-radius: 4px;
     cursor: pointer;
     color: ${({ theme }) => theme.text};
-    background: ${({ theme }) => theme.background}
+    background: transparent;
   }
   .Select__single-value {
     font-size: 12px;

src/style/global.js

@@ -43,13 +43,6 @@ export const GlobalStyles = createGlobalStyle`
     width: 100%;
     text-align: center;
   }
-  .footer {
-    font-size: .75rem;
-    line-height: 1rem;
-    padding: 0;
-    position: relative;
-    text-align: center;
-  }
   .bottom-info {
     color: ${({ theme }) => theme.title};
     margin: 4px;