Merge branch 'master' of https://github.com/makersmecca/PomodoroStudyApp

.github/workflows/codeql.yml

@@ -0,0 +1,92 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: '35 7 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present

README.md

@@ -1,7 +1,9 @@
 # POMODORO TIMER STUDY APP
-[![Netlify Status](https://api.netlify.com/api/v1/badges/d8fc2ebb-90ca-43f3-b061-093d64262a65/deploy-status)](https://app.netlify.com/sites/ayudhn/deploys)
+Enable users to track study sessions using a Pomodoro timer, set custom work and break periods, and integrate YT Music for focused study sessions.
 
-Enable users to track study sessions using a Pomodoro timer, set custom work and break periods, and integrate YT Music for focused study seesions.
+[![Netlify Status](https://api.netlify.com/api/v1/badges/d8fc2ebb-90ca-43f3-b061-093d64262a65/deploy-status)](https://app.netlify.com/sites/ayudhn/deploys) 
+
+![CodeQL](https://github.com/github/docs/actions/workflows/codeql.yml/badge.svg?event=push)
 
 ## FEATURES [Planned]:
 

src/App.css

@@ -1,4 +1,13 @@
 body {
   background-color: #fff4ea;
   color: #c96868;
+  will-change: background-color;
+}
+
+.main-content {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
 }

src/Components/CountdownTimer.jsx

@@ -1,18 +1,24 @@
 import React from "react";
 import DisplayTimer from "./DisplayTimer";
 import NavLinks from "./NavLinks";
+import { useState } from "react";
 
 const CountdownTimer = () => {
+  const [timerState, setTimerState] = useState(false);
+  const handleTimerState = (timerState) => {
+    setTimerState(timerState);
+  };
   return (
     <div>
       <div className="flex justify-between w-full items-center">
-        <NavLinks></NavLinks>
+        <NavLinks timerState={timerState}></NavLinks>
       </div>
       <DisplayTimer
         defaultTime={25}
         increment={5}
         decrement={5}
         componentName="Pomodoro"
+        toggleTimerState={handleTimerState}
       ></DisplayTimer>
     </div>
   );

src/Components/DisplayTimer.jsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import useTimerComp from "./useTimerComp";
 import { Link, useLocation } from "react-router-dom";
 import NavButtons from "./NavButtons";
@@ -8,9 +8,11 @@ const DisplayTimer = ({
   increment,
   decrement,
   componentName = "",
+  toggleTimerState = null,
 }) => {
   const [breatheState, setBreatheState] = useState(true);
   const [isRotating, setIsRotating] = useState(false);
+
   const handleRotate = () => {
     timer.handleCancel();
     setBreatheState(true);
@@ -56,26 +58,41 @@ const DisplayTimer = ({
     return "";
   }, [componentName, timer.isRunning]);
 
+  useEffect(() => {
+    toggleTimerState(timer.isRunning);
+    timer.isRunning && location === "/"
+      ? (document.body.style.backgroundColor = "#3c3d37")
+      : (document.body.style.backgroundColor = "#fff4ea");
+    document.body.style.transition = "background-color 0.5s ease-in-out";
+    return () => {
+      document.body.style.transition = "";
+      document.body.style.backgroundColor = "";
+    };
+  }, [timer.isRunning]);
+
   return (
     <>
-      <div className="min-h-screen flex flex-col items-center justify-center pt-0 sm:pt-20 px-4 sm:mt-10 lg:mt-0">
+      <div className="main-content min-h-screen flex flex-col items-center justify-center pt-0 sm:pt-20 px-4 sm:mt-10 lg:mt-0">
         {/* Main container */}
         <div className="relative w-full max-w-[300px] flex flex-col items-center gap-8">
           <div className="flex gap-4">
             <Link to="/">
               <NavButtons
+                timerState={timer.isRunning}
                 componentName={"Pomodoro"}
                 currentPage={location === "/"}
               ></NavButtons>
             </Link>
             <Link to="/rest">
               <NavButtons
+                timerState={timer.isRunning}
                 componentName={"Rest"}
                 currentPage={location === "/rest"}
               ></NavButtons>
             </Link>
             <Link to="/breathe">
               <NavButtons
+                timerState={timer.isRunning}
                 componentName={"Breathe"}
                 currentPage={location === "/breathe"}
               ></NavButtons>
@@ -118,8 +135,11 @@ const DisplayTimer = ({
 
             {/* Control buttons */}
             <button
+              disabled={timer.isRunning}
               onClick={timer.handleDecrease}
-              className="absolute md:left-[-20%] left-[-30%] top-1/2 -translate-y-1/2 flex items-center justify-center active:scale-95 transition-all duration-300 text-3xl xs:text-2xl pb-1"
+              className={`${
+                timer.isRunning && "cursor-not-allowed opacity-50"
+              } absolute md:left-[-20%] left-[-30%] top-1/2 -translate-y-1/2 flex items-center justify-center active:scale-95 transition-all duration-300 text-3xl xs:text-2xl pb-1`}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -134,8 +154,11 @@ const DisplayTimer = ({
             </button>
 
             <button
+              disabled={timer.isRunning}
               onClick={timer.handleIncrease}
-              className="absolute md:right-[-20%] right-[-30%] top-1/2 -translate-y-1/2 flex items-center justify-center active:scale-95 transition-all duration-300 text-3xl xs:text-2xl pb-1"
+              className={`${
+                timer.isRunning && "cursor-not-allowed opacity-50"
+              } absolute md:right-[-20%] right-[-30%] top-1/2 -translate-y-1/2 flex items-center justify-center active:scale-95 transition-all duration-300 text-3xl xs:text-2xl pb-1`}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -151,34 +174,38 @@ const DisplayTimer = ({
           </div>
 
           {/* Timer controls */}
-          <div className="flex gap-4 w-full justify-center mt-4">
+          <div className="flex gap-4 w-full justify-center items-center h-12 md:h-14">
+            {/*Start Pause Button */}
             <button
               onClick={timer.isRunning ? timer.handlePause : timer.handleStart}
               className={`px-4 py-1 ${
                 timer.isRunning
-                  ? "bg-pastelRed hover:bg-opacity-85"
-                  : "bg-buttonColor hover:bg-opacity-85"
-              } ${
-                timer.isRunning
-                  ? "text-slate-600 font-semibold"
-                  : "text-white font-normal"
-              } rounded-3xl active:scale-95 transition-all duration-300 text-xl shadow-md w-[90px]`}
+                  ? "bg-pastelRed hover:bg-opacity-85 text-slate-600 font-semibold h-14 translate-x-1/4"
+                  : "bg-buttonColor hover:bg-opacity-85 text-white font-normal h-12"
+              } rounded-3xl active:scale-95 transition-all ease-in-out duration-300 text-xl shadow-md w-[90px]`}
             >
               {timer.isRunning ? "Pause" : "Start"}
             </button>
 
+            {/*Reset Button */}
             <div
               onClick={handleRotate}
-              className={`px-4 py-2 mt-1 text-buttonColor rounded-lg active:scale-95 transition-all duration-300 text-lg w-[50px] cursor-pointer`}
+              className={`${
+                timer.isRunning
+                  ? "scale-0 cursor-none"
+                  : "text-buttonColor rounded-lg active:scale-95 transition-all ease-in-out duration-300 text-lg w-[50px] cursor-pointer"
+              } `}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="30"
                 height="30"
                 fill="currentColor"
-                className={`bi bi-arrow-clockwise stroke-current cursor-pointer ${
-                  isRotating ? "animate-spinSlow" : ""
-                }`}
+                className={`${
+                  timer.isRunning
+                    ? "scale-0 cursor-none"
+                    : "bi bi-arrow-clockwise stroke-current cursor-pointer "
+                }${isRotating ? "animate-spinSlow" : ""} `}
                 viewBox="0 0 16 16"
               >
                 <path

src/Components/NavButtons.jsx

@@ -1,16 +1,22 @@
-const NavButtons = ({ componentName = "", currentPage = false }) => {
+const NavButtons = ({
+  componentName = "",
+  currentPage = false,
+  timerState = false,
+}) => {
   const buttonName = componentName;
   return (
     <button
-      className={`py-3 
+      className={`py-3 ${timerState ? "cursor-not-allowed opacity-50" : ""} 
       ${
         currentPage
           ? "bg-backgroundColor border-2 border-buttonColor text-buttonColor font-semibold"
-          : "bg-buttonColor hover:bg-opacity-85 text-white"
-      }  rounded-3xl active:scale-95 transition-all duration-300 text-lg shadow-md w-[100px]`}
+          : "bg-buttonColor text-white"
+      }  rounded-3xl active:scale-95 transition-all duration-300 text-lg shadow-md w-[100px] hover:bg-opacity-85`}
+      disabled={timerState}
     >
       {buttonName}
     </button>
   );
 };
+
 export default NavButtons;

src/Components/NavLinks.jsx

@@ -5,7 +5,7 @@ import DisplayDateTime from "./DisplayDateTime";
 import CurrentUser from "./CurrentUser";
 import { useLocation } from "react-router-dom";
 
-const NavLinks = () => {
+const NavLinks = ({ timerState = false }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { currentUser } = useContext(UserContext);
 
@@ -43,31 +43,40 @@ const NavLinks = () => {
       {/* Hamburger Icon */}
       <div className="flex justify-between items-center fixed sm:absolute md:top-20 top-10 right-5 md:right-20 z-20 left-4 md:left-20">
         {/* Time display */}
-        <div className="md:order-first">
+        <div
+          className={`${
+            timerState
+              ? "scale-110 translate-x-1/2 md:translate-x-0"
+              : "md:order-first"
+          } transition-all duraion-500 ease-in-out `}
+        >
           <DisplayDateTime></DisplayDateTime>
         </div>
 
         {/* Hamburger button */}
-        <div className="md:order-3 flex">
+        <div
+          className={`${timerState ? "md:order-3" : ""} flex cursor-pointer`}
+        >
           <button
             ref={buttonRef}
             onClick={toggleMenu}
-            className="w-8 h-8 flex flex-col items-center justify-center focus:outline-none space-y-1"
+            className={` w-8 h-8 flex flex-col items-center justify-center focus:outline-none space-y-1`}
+            disabled={timerState}
           >
             <span
               className={`block w-8 h-1 bg-buttonColor rounded transition-transform duration-300 ${
-                isOpen ? "rotate-45 translate-y-2 w-7" : ""
-              }`}
+                timerState ? "cursor-not-allowed bg-opacity-50" : ""
+              } ${isOpen ? "rotate-45 translate-y-2 w-7" : ""}`}
             ></span>
             <span
               className={`block w-8 h-1 bg-buttonColor rounded transition-opacity duration-300 ${
-                isOpen ? "opacity-0" : ""
-              }`}
+                timerState ? "cursor-not-allowed bg-opacity-50" : ""
+              } ${isOpen ? "opacity-0" : ""}`}
             ></span>
             <span
               className={`block w-8 h-1 bg-buttonColor rounded transition-transform duration-300 ${
-                isOpen ? "-rotate-45 -translate-y-2 w-7" : ""
-              }`}
+                timerState ? "cursor-not-allowed bg-opacity-50" : ""
+              } ${isOpen ? "-rotate-45 -translate-y-2 w-7" : ""}`}
             ></span>
           </button>
         </div>