style: icons

fezcode · fezcode · commit 6d26fc4f5c7a · 2025-11-26T12:32:20.000+03:00
diff --git a/src/components/CommandPalette.js b/src/components/CommandPalette.js
@@ -10,7 +10,8 @@ import LiveClock from './LiveClock'; // Import LiveClock
 import GenerativeArt from './GenerativeArt'; // Import GenerativeArt
 import TextTransformer from './TextTransformer'; // Import TextTransformer
 import Stopwatch from './Stopwatch'; // Import Stopwatch
-import { filterItems } from '../utils/search'; // Import the search utility
+import { filterItems } from '../utils/search';
+import {TerminalWindowIcon} from "@phosphor-icons/react"; // Import the search utility
 
 const CommandPalette = ({ isOpen, setIsOpen, openGenericModal, toggleDigitalRain }) => {
     const [searchTerm, setSearchTerm] = useState('');
@@ -262,16 +263,17 @@ const CommandPalette = ({ isOpen, setIsOpen, openGenericModal, toggleDigitalRain
                         className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-2xl w-full max-w-xl mx-4"
                         onClick={e => e.stopPropagation()}
                     >
-                        <div className="p-3">
-                            <input
-                                ref={inputRef}
-                                type="text"
-                                placeholder={isLoading ? "Loading data..." : "Search or type a command..."}
-                                className="w-full bg-transparent text-lg placeholder-gray-500 focus:outline-none"
-                                value={searchTerm}
-                                onChange={e => setSearchTerm(e.target.value)}
-                                disabled={isLoading}
-                            />
+                        <div className="p-3 flex items-center justify-center">
+                          <TerminalWindowIcon size={36} weight="duotone" className="mr-2 text-gray-200 "/>
+                          <input
+                              ref={inputRef}
+                              type="text"
+                              placeholder={isLoading ? "Loading data..." : "Search or type a command..."}
+                              className="w-full bg-transparent text-lg placeholder-gray-500 focus:outline-none"
+                              value={searchTerm}
+                              onChange={e => setSearchTerm(e.target.value)}
+                              disabled={isLoading}
+                          />
                         </div>
                         <div ref={resultsRef} className="border-t border-gray-200 dark:border-gray-700 p-2 max-h-[50vh] overflow-y-auto">
                             {filteredItems.length > 0 ? (
diff --git a/src/index.css b/src/index.css
@@ -136,7 +136,7 @@ code {
 }
 
 .single-app-color {
-  color: #e88211 !important; /* Placeholder color for 'single-app' */
+  color: #1167e8 !important; /* Placeholder color for 'single-app' */
   /*color: #A07B90 !important; !* Placeholder color for 'single-app' *!*/
 }
 
diff --git a/src/pages/AppPage.js b/src/pages/AppPage.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import {
+  AxeIcon,
   ArrowLeftIcon,
   CaretDown,
   CaretRight,
@@ -113,6 +114,7 @@ function AppPage() {
           <ArrowLeftIcon size={24} /> Back to Home
         </Link>
         <h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
+          <AxeIcon size={48} weight="fill" className="mr-4 mt-2 text-gray-100 "/>
           <span className="codex-color">fc</span>
           <span className="separator-color">::</span>
           <span className="apps-color">apps</span>
diff --git a/src/pages/CommandsPage.js b/src/pages/CommandsPage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {
-  ArrowLeftIcon
+  ArrowLeftIcon, TerminalWindowIcon
 } from '@phosphor-icons/react';
 
 import useSeo from '../hooks/useSeo';
@@ -41,8 +41,9 @@ function CommandsPage() {
           <ArrowLeftIcon size={24} /> Back to Home
         </Link>
         <div className="mx-auto max-w-2xl text-center">
-          <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
-            <span className="text-orange-300">Command</span> Palette
+          <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl flex items-center justify-center">
+            <TerminalWindowIcon size={48} weight="fill" className="mr-4 mt-1 text-gray-100 "/>
+            <span className="text-orange-300">Command</span>&nbsp;Palette
           </h1>
           <p className="mt-6 text-lg leading-8 text-gray-300">
             See all available commands in Command Palette.
diff --git a/src/pages/LogsPage.js b/src/pages/LogsPage.js
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import {Link} from 'react-router-dom';
-import {ArrowLeftIcon, CaretDown, CaretUp, X} from '@phosphor-icons/react';
+import {ArrowLeftIcon, LogIcon, CaretDown, CaretUp, X} from '@phosphor-icons/react';
 import LogCard from '../components/LogCard';
 import ColorLegends, {categoryStyles} from '../components/ColorLegends';
 import useSeo from '../hooks/useSeo';
@@ -123,6 +123,7 @@ const LogsPage = () => {
           <ArrowLeftIcon size={24}/> Back to Home
         </Link>
         <h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
+          <LogIcon size={48} weight="fill" className="mr-4 mt-2 text-gray-100 "/>
           <span className="codex-color">fc</span>
           <span className="separator-color">::</span>
           <span className="logs-color">logs</span>

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ code {`
`136`	`136`	`}`
`137`	`137`
`138`	`138`	`.single-app-color {`
`139`		`- color: #e88211 !important; /* Placeholder color for 'single-app' */`
	`139`	`+ color: #1167e8 !important; /* Placeholder color for 'single-app' */`
`140`	`140`	`/color: #A07B90 !important; ! Placeholder color for 'single-app' !/`
`141`	`141`	`}`
`142`	`142`