feat: improve UI visibility and styling

kaic · kaic · commit b435afdd6a5f · 2025-12-01T18:37:33.000-03:00
- Added Windows 98 style favicon
- Increased category description text size (10px -&gt; 11px) and made it darker for better visibility
- Added white text color on hover for category descriptions
- Increased header description text size (11px -&gt; 12px)
- Made Download Script and Clear All buttons larger (13px font, 36px min-height)
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Win Post Install</title>
   </head>
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,22 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- Windows 98 style icon -->
+  <defs>
+    <linearGradient id="winGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0080FF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0040A0;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Outer border -->
+  <rect x="2" y="2" width="28" height="28" fill="url(#winGrad)" stroke="#000080" stroke-width="1"/>
+
+  <!-- Window panes (4 quadrants) -->
+  <rect x="6" y="6" width="9" height="9" fill="#87CEEB" opacity="0.8"/>
+  <rect x="17" y="6" width="9" height="9" fill="#87CEEB" opacity="0.8"/>
+  <rect x="6" y="17" width="9" height="9" fill="#87CEEB" opacity="0.8"/>
+  <rect x="17" y="17" width="9" height="9" fill="#87CEEB" opacity="0.8"/>
+
+  <!-- Window cross dividers -->
+  <rect x="15" y="6" width="2" height="20" fill="#FFFFFF"/>
+  <rect x="6" y="15" width="20" height="2" fill="#FFFFFF"/>
+</svg>
diff --git a/src/components/ConfigurationSelector/ConfigSection.jsx b/src/components/ConfigurationSelector/ConfigSection.jsx
@@ -25,7 +25,7 @@ const ConfigSection = ({ category, configs }) => {
             <div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '3px', lineHeight: '1.2' }}>
               {category.name}
             </div>
-            <div style={{ fontSize: '10px', fontWeight: 'normal', color: 'var(--win98-gray-dark)', lineHeight: '1.3' }}>
+            <div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
               {category.description}
             </div>
           </div>
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
@@ -11,7 +11,7 @@ const Header = () => {
             <h1 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '4px' }}>
               Windows Post-Install Generator
             </h1>
-            <p style={{ fontSize: '11px', color: 'var(--win98-gray-dark)', lineHeight: '1.5' }}>
+            <p style={{ fontSize: '12px', color: 'var(--win98-gray-dark)', lineHeight: '1.5' }}>
               Create custom installation script that:<br />
               • automatically installs selected programs<br />
               • adjusts selected settings<br />
diff --git a/src/components/SoftwareSelector/CategorySection.jsx b/src/components/SoftwareSelector/CategorySection.jsx
@@ -40,7 +40,7 @@ const CategorySection = ({ category, software }) => {
               <div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '3px', lineHeight: '1.2' }}>
                 {category.name}
               </div>
-              <div style={{ fontSize: '10px', fontWeight: 'normal', color: 'var(--win98-gray-dark)', lineHeight: '1.3' }}>
+              <div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
                 {category.description}
               </div>
             </div>
diff --git a/src/index.css b/src/index.css
@@ -557,3 +557,16 @@ body {
   color: var(--win95-white);
   border-color: var(--win95-black);
 }
+
+/* Category description hover effect */
+.win98-button:hover .category-description {
+  color: #fff !important;
+}
+
+/* Larger action buttons */
+.win98-button-primary,
+.win98-button-danger {
+  font-size: 13px;
+  padding: 8px 16px;
+  min-height: 36px;
+}
