From df77a269c054a31da9e8f23784cc1d89acbb0635 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Wed, 19 Nov 2025 15:41:36 +0000 Subject: [PATCH] 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 --- static/css/01-foundation/_themes.css | 4 +- tests/mjs/23-dark-theme-borders.test.mjs | 160 +++++++++++++++++++++++ 2 files changed, 162 insertions(+), 2 deletions(-) create mode 100755 tests/mjs/23-dark-theme-borders.test.mjs diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css index 6a034df..15b7b72 100644 --- a/static/css/01-foundation/_themes.css +++ b/static/css/01-foundation/_themes.css @@ -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 */ diff --git a/tests/mjs/23-dark-theme-borders.test.mjs b/tests/mjs/23-dark-theme-borders.test.mjs new file mode 100755 index 0000000..f72b5d4 --- /dev/null +++ b/tests/mjs/23-dark-theme-borders.test.mjs @@ -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();