fix: Make icon borders completely transparent in dark theme

- Changed from rgba(255,255,255,0.05) to 'transparent' - Previous attempt used WHITE transparent which was still visible - Now borders are rgba(0,0,0,0) - completely invisible - Verified with Playwright test showing transparent borders - All icons (OBS, LIV Golf, etc.) now have no visible borders
2025-11-19 15:41:36 +00:00
parent 5dc5a98269
commit df77a269c0
2 changed files with 162 additions and 2 deletions
@@ -86,7 +86,7 @@
  /* Borders & Dividers */
  --border-color: #404040;
  --border-light: #333333;
-  --icon-border: rgba(255, 255, 255, 0.05); /* Nearly transparent border for icons in dark theme */
+  --icon-border: transparent; /* Invisible border for icons in dark theme */
  --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */

  /* Shadows */
@@ -137,7 +137,7 @@
    /* Borders & Dividers */
    --border-color: #404040;
    --border-light: #333333;
-    --icon-border: rgba(255, 255, 255, 0.05); /* Nearly transparent border for icons in dark theme */
+    --icon-border: transparent; /* Invisible border for icons in dark theme */
    --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */

    /* Shadows */
@@ -0,0 +1,160 @@
+#!/usr/bin/env bun
+/**
+ * Test: Dark theme icon borders and LIV Golf logo inversion
+ *
+ * Verifies:
+ * 1. Icon borders are less visible (darker) in dark theme
+ * 2. Item separators are more subtle in dark theme
+ * 3. LIV Golf logo is inverted in dark theme for visibility
+ */
+
+import { chromium } from 'playwright';
+
+const BASE_URL = 'http://localhost:1999';
+
+async function testDarkThemeBorders() {
+  console.log('\n🎨 Dark Theme Borders & Logo Test\n');
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
+    await page.waitForSelector('.cv-container', { timeout: 5000 });
+
+    // Helper to click theme switcher
+    const clickTheme = async () => {
+      await page.click('.color-theme-switcher');
+      await page.waitForTimeout(300);
+    };
+
+    // Test 1: Light theme - visible borders
+    console.log('📱 Test 1: Light theme borders');
+    await clickTheme(); // auto -> light
+
+    const lightBorders = await page.evaluate(() => {
+      // Find an icon with border
+      const icon = document.querySelector('.responsibilities li img') ||
+                   document.querySelector('.course-icon img') ||
+                   document.querySelector('.project-icon img');
+
+      if (!icon) return { error: 'No icon found' };
+
+      const styles = window.getComputedStyle(icon);
+      return {
+        borderColor: styles.borderColor,
+        borderWidth: styles.borderWidth,
+      };
+    });
+
+    console.log(`   Border color: ${lightBorders.borderColor}`);
+
+    // Check it's a light color (rgb values > 200)
+    const lightRgb = lightBorders.borderColor.match(/\d+/g);
+    if (lightRgb && lightRgb.every(v => parseInt(v) > 200)) {
+      console.log('   ✅ Light visible borders in light theme');
+    } else {
+      console.log('   ⚠️  Border color seems dark in light theme');
+    }
+
+    // Test 2: Dark theme - darker borders
+    console.log('\n📱 Test 2: Dark theme borders');
+    await clickTheme(); // light -> dark
+
+    const darkBorders = await page.evaluate(() => {
+      const icon = document.querySelector('.responsibilities li img') ||
+                   document.querySelector('.course-icon img') ||
+                   document.querySelector('.project-icon img');
+
+      if (!icon) return { error: 'No icon found' };
+
+      const styles = window.getComputedStyle(icon);
+      return {
+        borderColor: styles.borderColor,
+      };
+    });
+
+    console.log(`   Border color: ${darkBorders.borderColor}`);
+
+    // Check if transparent or rgba with 0 alpha
+    const isTransparent = darkBorders.borderColor.includes('rgba(0, 0, 0, 0)') ||
+                          darkBorders.borderColor === 'transparent';
+
+    if (isTransparent) {
+      console.log('   ✅ Borders completely transparent (invisible) in dark theme');
+    } else {
+      // Check if it's a very dark color
+      const darkRgb = darkBorders.borderColor.match(/\d+/g);
+      if (darkRgb && darkRgb.every(v => parseInt(v) < 50)) {
+        console.log('   ✅ Borders very dark in dark theme');
+      } else {
+        console.log('   ❌ Borders still too visible in dark theme!');
+        console.log(`   Expected: transparent or very dark, Got: ${darkBorders.borderColor}`);
+        await browser.close();
+        process.exit(1);
+      }
+    }
+
+    // Test 3: LIV Golf logo inversion
+    console.log('\n📱 Test 3: LIV Golf logo filter');
+
+    const darkLogoFilter = await page.evaluate(() => {
+      const livgolfImg = document.querySelector('img[src*="livgolf"]');
+      if (!livgolfImg) return { exists: false };
+
+      const styles = window.getComputedStyle(livgolfImg);
+      return {
+        exists: true,
+        filter: styles.filter,
+      };
+    });
+
+    if (!darkLogoFilter.exists) {
+      console.log('   ⚠️  LIV Golf logo not found (may not be in CV data)');
+    } else {
+      console.log(`   Dark theme filter: ${darkLogoFilter.filter}`);
+      if (darkLogoFilter.filter.includes('invert')) {
+        console.log('   ✅ LIV Golf logo inverted in dark theme');
+      } else {
+        console.log('   ❌ LIV Golf logo NOT inverted in dark theme!');
+        await browser.close();
+        process.exit(1);
+      }
+
+      // Test 4: Light theme - no inversion
+      console.log('\n📱 Test 4: LIV Golf logo in light theme');
+      await clickTheme(); // dark -> auto
+      await clickTheme(); // auto -> light
+
+      const lightLogoFilter = await page.evaluate(() => {
+        const livgolfImg = document.querySelector('img[src*="livgolf"]');
+        if (!livgolfImg) return { exists: false };
+
+        const styles = window.getComputedStyle(livgolfImg);
+        return {
+          exists: true,
+          filter: styles.filter,
+        };
+      });
+
+      console.log(`   Light theme filter: ${lightLogoFilter.filter}`);
+      if (lightLogoFilter.filter === 'none' || !lightLogoFilter.filter.includes('invert')) {
+        console.log('   ✅ LIV Golf logo normal (not inverted) in light theme');
+      } else {
+        console.log('   ❌ LIV Golf logo incorrectly inverted in light theme!');
+        await browser.close();
+        process.exit(1);
+      }
+    }
+
+    console.log('\n✅ All dark theme border tests passed!\n');
+    await browser.close();
+
+  } catch (error) {
+    console.error('\n❌ Test failed:', error.message);
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+testDarkThemeBorders();