From 13510fccd6d91bf187477da2272fddb4ef6dc9e6 Mon Sep 17 00:00:00 2001 From: Vuong <3168632+vuon9@users.noreply.github.com> Date: Sun, 8 Feb 2026 19:11:39 +0700 Subject: [PATCH 1/2] fix: color converter, input, layout --- frontend/src/components/ToolUI.jsx | 1 - .../components/layout/ToolLayoutToggle.jsx | 27 +- frontend/src/pages/ColorConverter.jsx | 335 ++++++++++-------- .../src/pages/DateTimeConverter/index.jsx | 2 +- 4 files changed, 193 insertions(+), 172 deletions(-) diff --git a/frontend/src/components/ToolUI.jsx b/frontend/src/components/ToolUI.jsx index 96ea558..60c39e7 100644 --- a/frontend/src/components/ToolUI.jsx +++ b/frontend/src/components/ToolUI.jsx @@ -20,7 +20,6 @@ export function ToolControls({ children, style = {} }) { return (
- - {isHorizontal ? : } - + title={isHorizontal ? "Switch to vertical layout" : "Switch to horizontal layout"} + />
); } \ No newline at end of file diff --git a/frontend/src/pages/ColorConverter.jsx b/frontend/src/pages/ColorConverter.jsx index 313d14e..b24fd3e 100644 --- a/frontend/src/pages/ColorConverter.jsx +++ b/frontend/src/pages/ColorConverter.jsx @@ -455,62 +455,64 @@ export default function ColorConverter() { ]; return ( -
+
- + {/* Color Preview & Picker */}
-
-
- -
+
+ +
+
-
- {eyedropperSupported && ( - - )} + {eyedropperSupported && ( + + )} +
{/* Input Controls */} @@ -520,6 +522,8 @@ export default function ColorConverter() { handleHexChange(e.target.value)} onBlur={handleHexBlur} @@ -533,48 +537,48 @@ export default function ColorConverter() { {/* RGB Inputs */}
-
+
handleRgbChange('r', e.target.value)} + onChange={(e, { value }) => handleRgbChange('r', value)} size="sm" />
-
+
handleRgbChange('g', e.target.value)} + onChange={(e, { value }) => handleRgbChange('g', value)} size="sm" />
-
+
handleRgbChange('b', e.target.value)} + onChange={(e, { value }) => handleRgbChange('b', value)} size="sm" />
-
+
handleRgbChange('a', e.target.value)} + onChange={(e, { value }) => handleRgbChange('a', value)} size="sm" />
@@ -582,52 +586,54 @@ export default function ColorConverter() { {/* HSL Inputs */}
-
+
handleHslChange('h', e.target.value)} + onChange={(e, { value }) => handleHslChange('h', value)} size="sm" />
-
+
handleHslChange('s', e.target.value)} + onChange={(e, { value }) => handleHslChange('s', value)} size="sm" />
-
+
handleHslChange('l', e.target.value)} + onChange={(e, { value }) => handleHslChange('l', value)} size="sm" />
- {/* Layout Toggle */} -
- -
+ {/* Layout Toggle - Moved outside ToolControls */} +
+ +
+ {/* Format Values */}
- {/* Color History */} - {state.history.length > 0 && ( -
-
- History -
-
- {state.history.map((item, idx) => ( -
loadFromHistory(item)} - style={{ - display: 'flex', - alignItems: 'center', - gap: '0.5rem', - padding: '0.5rem', - cursor: 'pointer', - borderRadius: '4px', - marginBottom: '0.25rem', - backgroundColor: 'var(--cds-layer-hover)' - }} - > -
- - {item.hex} - -
- ))} -
-
- )} - - {/* Code Snippets */} -
+ {/* Code Snippets - 70% */} +
dispatch({ type: 'SET_SELECTED_TAB', payload: selectedIndex })} @@ -828,13 +772,25 @@ export default function ColorConverter() {
{(codeSnippets[tab.id] || []).map((snippet, idx) => ( - +
+
))} @@ -874,6 +822,81 @@ export default function ColorConverter() {
+ + {/* Color History - 30% */} +
+
+ History +
+
+ {state.history.length === 0 ? ( +
+ No colors in history +
+ ) : ( + state.history.map((item, idx) => ( +
loadFromHistory(item)} + style={{ + display: 'flex', + alignItems: 'center', + gap: '0.5rem', + padding: '0.5rem', + cursor: 'pointer', + borderRadius: '4px', + marginBottom: '0.25rem', + backgroundColor: 'var(--cds-layer-hover)' + }} + > +
+ + {item.hex} + +
+ )) + )} +
+
); diff --git a/frontend/src/pages/DateTimeConverter/index.jsx b/frontend/src/pages/DateTimeConverter/index.jsx index 61ab2a7..cb6d455 100644 --- a/frontend/src/pages/DateTimeConverter/index.jsx +++ b/frontend/src/pages/DateTimeConverter/index.jsx @@ -221,7 +221,7 @@ export default function DateTimeConverter() { }; return ( -
+
Date: Sun, 8 Feb 2026 19:22:24 +0700 Subject: [PATCH 2/2] fix: ibm plex mono font --- vite.config.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 0d0b508..6ce8f76 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,7 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import wails from "@wailsio/runtime/plugins/vite"; +import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ @@ -10,8 +11,23 @@ export default defineConfig({ scss: { // Suppress expected carbon-design-system deprecation warnings // until the library updates its internal Sass usage - silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin', 'if-function', 'mixed-decls', 'color-functions'] + silenceDeprecations: ['modern', 'import', 'global-builtin', 'if-function', 'mixed-decls', 'color-functions'], + // Handle ~@ibm/plex/... imports from Carbon + importer: [ + (url) => { + if (url.startsWith('~')) { + return { file: url.substring(1) }; + } + return null; + } + ] } } + }, + resolve: { + alias: { + // Ensure @ibm/plex can be resolved + '@ibm/plex': path.resolve(__dirname, 'node_modules/@ibm/plex') + } } }) \ No newline at end of file