feat/add-me-to-bookmark-reminder

src/components/common/FooterMenu.js

@@ -33,6 +33,7 @@ import { SvgIcon } from "@mui/material";
 import KeyboardAltOutlinedIcon from '@mui/icons-material/KeyboardAltOutlined';
 import SchoolIcon from '@mui/icons-material/School';
 import { SOUND_MODE_TOOLTIP } from "../features/sound/sound";
+import CollectMe from "../features/CollectMe";
 
 const FooterMenu = ({
   themesOptions,
@@ -183,6 +184,7 @@ const FooterMenu = ({
         {!isSiteInfoDisabled && (
           <Box display="block" flexDirection="row">
             <SupportMe></SupportMe>
+            <CollectMe></CollectMe>
             <Tooltip
               title={
                 <span style={{ whiteSpace: "pre-line", fontSize:"12px" }}>

src/components/features/CollectMe.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { COLLECT_TOOLTIP_TITLE } from "../../constants/Constants";
+import { Tooltip } from "@mui/material";
+import IconButton from "../utils/IconButton";
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+
+const CollectMe = () => {
+  return (
+    <Tooltip
+      title={
+        <div>
+          <span style={{ whiteSpace: "pre-line", fontSize:"12px"}}>
+            {COLLECT_TOOLTIP_TITLE}
+          </span>
+        </div>
+      }
+      placement="top"
+    >
+      <IconButton color="inherit">
+        <AutoAwesomeIcon className="collect-me"></AutoAwesomeIcon>
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default CollectMe;

src/constants/Constants.js

@@ -30,6 +30,8 @@ const GITHUB_TOOLTIP_TITLE =
   "Dear visitors: \n For feature requests or bug reports, please submit an issue to the github repo. \n Welcome contributing with a fork. \n If you like my works, please star the project. \n Thanks! \n";
 const SUPPORT_TOOLTIP_TITLE =
   "Help me keep the site live with your support : D \n Appreciate with love! \n";
+const COLLECT_TOOLTIP_TITLE =
+  "Ctrl + D / Cmd + D \n add me to bookmark \n";
 const AUTHOR = "author: @Muyang Guo\n";
 const GITHUB_REPO_LINK = "project: @Github\n";
 
@@ -111,5 +113,6 @@ export {
   PACING_CARET,
   PACING_PULSE,
   PACING_CARET_TOOLTIP,
-  PACING_PULSE_TOOLTIP
+  PACING_PULSE_TOOLTIP,
+  COLLECT_TOOLTIP_TITLE
 };

src/style/global.js

@@ -308,6 +308,9 @@ export const GlobalStyles = createGlobalStyle`
       100%	 {color: #F48FB1;}
     }
   }
+  .collect-me{
+    color : ${({ theme }) => theme.text};
+  }
   .support-me-image{
     height: 75%;
     width: 75%;