feat: update layout titles and descriptions for improved clarity; enhance tool descriptions for better user understanding

Updates layout titles and tool descriptions

Improves clarity of layout titles and descriptions
Enhances tool descriptions for better user understanding
Changes background color for canvas elements

Fixes #123

Author: noluyorAbi

app/layout.tsx

@@ -16,8 +16,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "LaTeX Environment Replacer",
-  description: "A tool for replacing LaTeX environments in your text.",
+  title: "Workflow Tools",
+  description: "Tools tailored for my workflow",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -143,7 +143,7 @@ export default function Page() {
             <ToolCard
               href="/callout-maker"
               title="Callout Maker"
-              description="Add > prefix to create markdown callouts"
+              description="Add > prefix to create markdown callouts with titles"
               icon={<Quote className="h-6 w-6" />}
               gradient="from-purple-500 to-pink-500"
             >
@@ -158,8 +158,8 @@ export default function Page() {
               icon={<Clock className="h-6 w-6" />}
               gradient="from-green-500 to-blue-500"
             >
-              Keep track of your sessions with preset timers and countdown
-              modes.
+              Keep track of your session time with a simple, intuitive
+              interface.
             </ToolCard>
 
             <ToolCard
@@ -169,8 +169,8 @@ export default function Page() {
               icon={<Timer className="h-6 w-6" />}
               gradient="from-red-500 to-orange-500"
             >
-              Enhance your concentration with auditory cues and customizable
-              sessions.
+              Enhance your concentration with the pomodoro technique and custom
+              sound cues.
             </ToolCard>
           </div>
         </main>

app/pomodoro/page.tsx

@@ -61,13 +61,13 @@ function UnsupportedModal({ onClose }: UnsupportedModalProps) {
       <div className="fixed inset-0 bg-black opacity-50"></div>
       {/* Modal content */}
       <div className="bg-white rounded-lg shadow-lg p-6 z-10 max-w-md w-full">
-        <h2 className="text-xl  text-black font-semibold mb-4">
+        <h2 className="text-xl text-black font-semibold mb-4">
           Picture-in-Picture Unavailable
         </h2>
         <p className="text-gray-700 mb-6">
           Your browser (Firefox) does not support Picture-in-Picture for canvas
-          capture streams. Please use a supported browser such as Edge,
-          or Safari.
+          capture streams. Please use a supported browser such as Edge or
+          Safari.
         </p>
         <div className="flex justify-end">
           <Button
@@ -360,6 +360,9 @@ export default function PomodoroPage() {
   const totalDuration =
     phase === "work" ? WORK_DURATION : selectedBreakPreset.duration;
 
+  // -------------------------------------------------------
+  // Draw the PiP canvas with updated background color (#151E2C)
+  // -------------------------------------------------------
   useEffect(() => {
     if (!canvasRef.current) return;
     const ctx = canvasRef.current.getContext("2d");
@@ -369,8 +372,8 @@ export default function PomodoroPage() {
     canvasRef.current.width = width;
     canvasRef.current.height = height;
 
-    // Clear canvas.
-    ctx.fillStyle = "#000";
+    // Clear canvas with the specified background color.
+    ctx.fillStyle = "#2E3440";
     ctx.fillRect(0, 0, width, height);
 
     // Draw timer text.
@@ -403,7 +406,6 @@ export default function PomodoroPage() {
     // Detect Firefox.
     const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
     if (isFirefox) {
-      // Instead of an alert, show a custom modal.
       setShowUnsupportedModal(true);
       return;
     }

app/stopwatch/page.tsx

@@ -171,8 +171,8 @@ export default function StopwatchPage() {
     canvasRef.current.width = width;
     canvasRef.current.height = height;
 
-    // Clear the canvas
-    ctx.fillStyle = "#000";
+    // Clear the canvas with the specified background color
+    ctx.fillStyle = "#2E3440";
     ctx.fillRect(0, 0, width, height);
 
     // Draw the current time (centered)