refactor: Logs Page colors.

fezcode · fezcode · commit fdf196841696 · 2025-11-26T21:26:33.000+03:00
diff --git a/src/components/LogCard.js b/src/components/LogCard.js
@@ -81,8 +81,10 @@ const LogCard = ({log, index, totalLogs}) => {
   const MetadataItem = ({label, value}) => (
     value ? (
       <div
-        className="flex items-center gap-1 text-xs text-gray-400 bg-gray-800/50 px-2 py-1 rounded-md border border-gray-700/50">
-        <span className="font-semibold text-gray-500">{label}:</span>
+        className="flex items-center gap-1 text-xs text-gray-300 px-2 py-1 rounded-md border border-gray-500/50"
+        style={{backgroundColor: `${accentColor}20`}}
+      >
+        <span className="font-semibold text-gray-400">{label}:</span>
         <span className="truncate max-w-[150px]">{value}</span>
       </div>
     ) : null
@@ -101,7 +103,7 @@ const LogCard = ({log, index, totalLogs}) => {
         />
         {/* Dotted Background */}
         <div
-          className="absolute inset-0 opacity-15 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
+          className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity duration-300 pointer-events-none"
           style={{
             backgroundImage: `radial-gradient(circle, ${accentColor} 1px, transparent 1px)`,
             backgroundSize: '15px 15px', // Adjust size for desired density
diff --git a/src/config/colors.js b/src/config/colors.js
@@ -8,25 +8,25 @@ module.exports = {
     400: '#fb923c', // orange-400
   },
   tb: '#00000033',
-  book: '#9EC5AB',
-  movie: '#c75146',
-  game: '#80ed99',
+  book: '#00BFFF',
+  movie: '#DC143C',
+  game: '#00C9A7',
   article: '#FA8072', // Salmon
   app: '#fb8476', // Duplicated from article-ish
-  music: '#A07B90',
+  music: '#F3E5AB',
   series: '#edc531',
   food: '#F4A259',
-  websites: '#f5dd90',
+  websites: '#00FF7F',
   tools: '#e0aaff',
-  'book-light': '#FFF8F00',
-  'movie-light': '#E08070',
-  'game-light': '#B2F5C2',
+  'book-light': '#4dcdff',
+  'movie-light': '#e84f6d',
+  'game-light': '#00e6bf',
   'article-light': '#FFB6C1', // Light Pink
   'app-light': '#FFF8F00', // Duplicated from book-light
-  'music-light': '#C0A0B0',
+  'music-light': '#fcf2cf',
   'series-light': '#F5E080',
   'food-light': '#FFC780',
-  'websites-light': '#FFF8DC',
+  'websites-light': '#4dff99',
   'tools-light': '#F0DFFF',
   'newspaper-background': '#fdfdf5',
   'sidebar-highlight': '#FA8072', // Duplicated from article
@@ -46,24 +46,24 @@ module.exports = {
   'dnd-card-bg-hover': 'var(--bg-dnd-card-hover)',
   'gist-card-bg': 'var(--bg-gist-card)',
   'gist-card-bg-hover': 'var(--bg-gist-card-hover)',
-  'book-alpha-10': 'rgba(158, 197, 171, 0.1)',
-  'book-alpha-50': 'rgba(158, 197, 171, 0.5)',
-  'movie-alpha-10': 'rgba(199, 81, 70, 0.1)',
-  'movie-alpha-50': 'rgba(199, 81, 70, 0.5)',
-  'game-alpha-10': 'rgba(0, 255, 127, 0.1)',
-  'game-alpha-50': 'rgba(0, 255, 127, 0.5)',
+  'book-alpha-10': 'rgba(0, 191, 255, 0.1)',
+  'book-alpha-50': 'rgba(0, 191, 255, 0.5)',
+  'movie-alpha-10': 'rgba(220, 20, 60, 0.1)',
+  'movie-alpha-50': 'rgba(220, 20, 60, 0.5)',
+  'game-alpha-10': 'rgba(0, 201, 167, 0.1)',
+  'game-alpha-50': 'rgba(0, 201, 167, 0.5)',
   'article-alpha-10': 'rgba(250, 128, 114, 0.1)',
   'article-alpha-50': 'rgba(250, 128, 114, 0.5)',
   'app-alpha-10': 'rgba(160, 123, 144, 0.1)', // Duplicated from music
   'app-alpha-50': 'rgba(160, 123, 144, 0.5)', // Duplicated from music
-  'music-alpha-10': 'rgba(160, 123, 144, 0.1)',
-  'music-alpha-50': 'rgba(160, 123, 144, 0.5)',
+  'music-alpha-10': 'rgba(243, 229, 171, 0.1)',
+  'music-alpha-50': 'rgba(243, 229, 171, 0.5)',
   'series-alpha-10': 'rgba(237, 197, 49, 0.1)',
   'series-alpha-50': 'rgba(237, 197, 49, 0.5)',
   'food-alpha-10': 'rgba(244, 162, 89, 0.1)',
   'food-alpha-50': 'rgba(244, 162, 89, 0.5)',
-  'websites-alpha-10': 'rgba(245, 221, 144, 0.1)',
-  'websites-alpha-50': 'rgba(245, 221, 144, 0.5)',
+  'websites-alpha-10': 'rgba(0, 255, 127, 0.1)',
+  'websites-alpha-50': 'rgba(0, 255, 127, 0.5)',
   'tools-alpha-10': 'rgba(224, 170, 255, 0.1)',
   'tools-alpha-50': 'rgba(224, 170, 255, 0.5)',
 
