fix few small issues, improve logo, add favicon

Author: riofriz

app/_components/FeatureComponents/Cronjobs/CronJobList.tsx

@@ -236,7 +236,7 @@ export const CronJobList = ({ cronJobs, scripts }: CronJobListProps) => {
         <CardHeader>
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-primary/10 rounded-lg">
+              <div className="p-2 bg-primary/10 ascii-border">
                 <ClockIcon className="h-5 w-5 text-primary" />
               </div>
               <div>
@@ -301,7 +301,7 @@ export const CronJobList = ({ cronJobs, scripts }: CronJobListProps) => {
               onNewTaskClick={() => setIsNewCronModalOpen(true)}
             />
           ) : (
-            <div className="space-y-4 max-h-[55vh] min-h-[55vh] overflow-y-auto tui-scrollbar pr-2">
+            <div className="space-y-4 max-h-[55vh] min-h-[55vh] overflow-y-auto tui-scrollbar pr-1">
               {loadedSettings ? (
                 filteredJobs.map((job) =>
                   minimalMode ? (

app/_components/FeatureComponents/Cronjobs/Parts/CronJobItem.tsx

@@ -148,7 +148,7 @@ export const CronJobItem = ({
   return (
     <div
       key={job.id}
-      className={`tui-card p-4 terminal-font transition-colors ${isDropdownOpen ? "relative z-10" : ""
+      className={`border border-border lg:tui-card p-4 terminal-font transition-colors ${isDropdownOpen ? "relative z-10" : ""
         }`}
     >
       <div className="flex flex-col sm:flex-row sm:items-start gap-4">

app/_components/FeatureComponents/Cronjobs/Parts/MinimalCronJobItem.tsx

@@ -139,7 +139,7 @@ export const MinimalCronJobItem = ({
   return (
     <div
       key={job.id}
-      className={`tui-card p-3 terminal-font transition-colors ${isDropdownOpen ? "relative z-10" : ""
+      className={`border border-border lg:tui-card p-3 terminal-font transition-colors ${isDropdownOpen ? "relative z-10" : ""
         }`}
     >
       <div className="flex items-center gap-3">

app/_components/FeatureComponents/Layout/Sidebar.tsx

@@ -101,29 +101,11 @@ export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
             )}
           </button>
 
-          <div className="p-4 ascii-border !border-t-0 border-l-0 !border-r-0 bg-background0">
-            <div
-              className={cn(
-                "flex items-center gap-3",
-                isCollapsed && "lg:justify-center"
-              )}
-            >
-              <div className="p-2 bg-background0 ascii-border flex-shrink-0">
-                <HardDrivesIcon className="h-4 w-4" />
-              </div>
-              {(!isCollapsed || !isCollapsed) && (
-                <h2 className="text-sm font-semibold truncate terminal-font">
-                  {t("sidebar.systemOverview")}
-                </h2>
-              )}
-            </div>
-          </div>
-
           <div
             className={cn(
               "overflow-y-auto tui-scrollbar",
               isCollapsed ? "lg:p-2" : "p-4",
-              "h-full lg:h-[calc(100vh-88px-80px)]"
+              "h-full lg:h-[calc(100vh-88px)]"
             )}
           >
             {isCollapsed ? (

app/_components/FeatureComponents/PWA/PWAInstallPrompt.tsx

@@ -16,7 +16,6 @@ export const PWAInstallPrompt = (): JSX.Element | null => {
   useEffect(() => {
     if (typeof window === "undefined") return;
     const onBeforeInstallPrompt = (e: Event) => {
-      e.preventDefault();
       setDeferred(e as BeforeInstallPromptEvent);
     };
     const onAppInstalled = () => {
@@ -49,10 +48,10 @@ export const PWAInstallPrompt = (): JSX.Element | null => {
 
   return (
     <button
-      className="px-3 py-1 rounded-md border border-border bg-background/80 hover:bg-background/60"
+      className="px-3 py-2 ascii-border bg-background0 hover:bg-background1 transition-colors terminal-font text-sm"
       onClick={onInstall}
     >
-      Install App
+      Install
     </button>
   );
 };

app/_components/FeatureComponents/Theme/ThemeToggle.tsx

@@ -2,6 +2,7 @@
 
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
+import { SunIcon, MoonIcon } from '@phosphor-icons/react';
 
 export const ThemeToggle = () => {
   const [mounted, setMounted] = useState(false);
@@ -18,9 +19,15 @@ export const ThemeToggle = () => {
   return (
     <button
       onClick={() => setTheme(isDark ? 'light' : 'dark')}
-      className="px-3 py-2 ascii-border terminal-font text-sm bg-background0"
+      className="p-2 ascii-border bg-background0 hover:bg-background1 transition-colors"
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
     >
-      {isDark ? 'LIGHT' : 'DARK'}
+      {isDark ? (
+        <SunIcon size={20} weight="regular" className="text-foreground" />
+      ) : (
+        <MoonIcon size={20} weight="regular" className="text-foreground" />
+      )}
     </button>
   );
 };

app/globals.css

@@ -31,17 +31,30 @@
 }
 
 body {
-  font-family: 'IBM Plex Mono', monospace!important;
-  font-weight: 500!important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 500 !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Azeret Mono Variable', monospace!important;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Azeret Mono Variable', monospace !important;
 }
 
-p, span, a, label, input, textarea, button, select, option {
-  font-family: 'IBM Plex Mono', monospace!important;
-  font-weight: 500!important;
+p,
+span,
+a,
+label,
+input,
+textarea,
+button,
+select,
+option {
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 500 !important;
 }
 
 @layer utilities {
@@ -51,12 +64,18 @@ p, span, a, label, input, textarea, button, select, option {
   }
 
   .border-border {
-    border-color: var(--box-border-color, var(--foreground2))!important;
+    border-color: var(--box-border-color, var(--foreground2)) !important;
   }
 
   .tui-scrollbar {
     scrollbar-width: auto !important;
-    padding-right: 15px;
+    padding-right: 5px;
+  }
+
+  @media (min-width: 992px) {
+    .tui-scrollbar {
+      padding-right: 15px;
+    }
   }
 
   .tui-scrollbar::-webkit-scrollbar {
@@ -217,4 +236,4 @@ p, span, a, label, input, textarea, button, select, option {
       margin-left: 0 !important;
     }
   }
-}
+}

app/layout.tsx

@@ -31,7 +31,7 @@ export const metadata: Metadata = {
     telephone: false,
   },
   icons: {
-    icon: "/logo.png",
+    icon: "/favicon.png",
     shortcut: "/logo.png",
     apple: "/logo.png",
   },

app/page.tsx

@@ -78,7 +78,7 @@ export default async function Home() {
                 <Logo size={48} showGlow={true} />
                 <div>
                   <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold terminal-font uppercase">
-                    Cr*nMaster
+                    Cr<span className="text-status-error">*</span>nMaster
                   </h1>
                   <p className="text-xs terminal-font flex items-center gap-2">
                     {t("common.version").replace("{version}", version)}

package.json

@@ -44,7 +44,6 @@
     "proper-lockfile": "^4.1.2",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.5.0",
     "react-syntax-highlighter": "^15.6.1",
     "systeminformation": "^5.27.11",
     "tailwind-merge": "^2.0.0",