Merge pull request #2 from asherhe/dev

Add footer

README.md

@@ -11,7 +11,7 @@ Manage your time and boost your productivity with timeato!
 
 timeato is a Pomodoro timer app that enables you to work with greater focus and efficiency. Split up your work time into 25-minute work intervals, taking 5-minute breaks in between to rest and refocus. With a clean and intuitive interface, timeato is distraction-free and simple to use.
 
-<img src="screenshot.png" alt="timeato screenshot" width="80%" />
+![Screenshot](screenshot.png)
 
 ## Contributing
 

package.json

@@ -5,11 +5,13 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "babel-plugin-macros": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/components/app.jsx

@@ -1,5 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBug } from "@fortawesome/free-solid-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+
 import TimerDisplay from "./timer-display";
 import TimerControls from "./timer-controls";
 import TypeControls from "./type-controls";
@@ -138,6 +142,15 @@ function App(props) {
           active={!playing}
         />
       </div>
+      <footer>
+        <div>Copyright © 2023 asherhe</div>
+        <a href="https://github.com/asherhe/timeato" title="GitHub repository">
+          <FontAwesomeIcon icon={faGithub} />
+        </a>
+        <a href="https://github.com/asherhe/timeato/issues/new/choose" title="Report a bug">
+          <FontAwesomeIcon icon={faBug} />
+        </a>
+      </footer>
     </div>
   );
 }

src/fonts.scss

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: "Noto Sans";
+  src: url("webfonts/NotoSans-ExtraBold.ttf");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  src: url("webfonts/NotoSans-SemiBold.ttf");
+  font-weight: 600;
+}

src/index.js

@@ -4,7 +4,7 @@ import App from "./components/app";
 
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
-import "./css/index.scss";
+import "./index.scss";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/css/index.scss → src/index.scss

@@ -86,6 +86,7 @@ body {
 
 .timer-display {
   font-size: 6em;
+  font-weight: 800;
 }
 
 .timer-btn {
@@ -148,3 +149,24 @@ body {
     background-color: #fff;
   }
 }
+
+footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+
+  position: absolute;
+  bottom: 0;
+
+  margin: 1em;
+
+  & > a {
+    color: #fff;
+    transition: 0.5s ease color;
+    &:hover {
+      color: #f5b6b3;
+    }
+  }
+}