Skip to content

Commit 09e02fb

Browse files
author
Factory Bot
committed
fix: reduce titlebar height to 40px for compact design
1 parent f52d054 commit 09e02fb

File tree

1 file changed

+43
-43
lines changed

1 file changed

+43
-43
lines changed

‎cortex-gui/src/components/figma/FigmaTitleBar.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -175,56 +175,56 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
175175

176176
// Don't close on mouse leave - only close on click outside (backdrop)
177177

178-
// Main container - Full width × 53px (Figma exact)
178+
// Main container - Full width × 40px (compact titlebar)
179179
const containerStyle = (): JSX.CSSProperties => ({
180180
display: "flex",
181181
"align-items": "center",
182182
width: "100%",
183-
height: "53px",
183+
height: "40px",
184184
background: "var(--figma-bg-primary, #131217)",
185185
position: "relative",
186186
"-webkit-app-region": "drag",
187187
"user-select": "none",
188188
...local.style,
189189
});
190190

191-
// Logo container - x:8, y:8, 40×40px (Figma: Sidebar Group Container)
191+
// Logo container - compact 32×32px
192192
const logoContainerStyle = (): JSX.CSSProperties => ({
193193
position: "absolute",
194194
left: "8px",
195-
top: "8px",
196-
width: "40px",
197-
height: "40px",
195+
top: "4px",
196+
width: "32px",
197+
height: "32px",
198198
display: "flex",
199199
"align-items": "center",
200200
"justify-content": "center",
201201
"-webkit-app-region": "no-drag",
202202
cursor: "pointer",
203203
});
204204

205-
// Mode toggle - x:60, y:14, 75×28px (Figma exact)
205+
// Mode toggle - compact positioning
206206
const modeToggleContainerStyle = (): JSX.CSSProperties => ({
207207
position: "absolute",
208-
left: "60px",
209-
top: "14px",
208+
left: "48px",
209+
top: "6px",
210210
"-webkit-app-region": "no-drag",
211211
});
212212

213-
// Breadcrumb container - After hamburger menu (143 + 28 + 8 gap = 179)
213+
// Breadcrumb container - compact
214214
const breadcrumbContainerStyle = (): JSX.CSSProperties => ({
215215
position: "absolute",
216-
left: "179px", // After hamburger menu
217-
top: "15px",
216+
left: "160px",
217+
top: "10px",
218218
display: "flex",
219219
"align-items": "center",
220-
height: "27px",
220+
height: "20px",
221221
gap: "0",
222222
});
223223

224224
const breadcrumbTextStyle = (): JSX.CSSProperties => ({
225225
"font-family": "var(--figma-font-sans, Inter, sans-serif)",
226-
"font-size": "16px",
227-
"line-height": "16px",
226+
"font-size": "13px",
227+
"line-height": "13px",
228228
color: "var(--figma-text-secondary, #A0A0A0)",
229229
});
230230

@@ -235,33 +235,33 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
235235
margin: "0 4px",
236236
});
237237

238-
// Draft badge - 75×27px - Figma: lime green background
238+
// Draft badge - compact
239239
const draftBadgeStyle = (): JSX.CSSProperties => ({
240240
display: "flex",
241241
"align-items": "center",
242242
gap: "2px",
243-
height: "27px",
244-
padding: "3.5px 10px",
245-
background: "var(--figma-accent-primary, #BFFF00)", // Lime background per Figma
246-
"border-radius": "var(--figma-radius-md, 8px)",
243+
height: "20px",
244+
padding: "2px 8px",
245+
background: "var(--figma-accent-primary, #BFFF00)",
246+
"border-radius": "var(--figma-radius-sm, 4px)",
247247
"margin-left": "8px",
248248
"-webkit-app-region": "no-drag",
249249
cursor: "pointer",
250250
});
251251

252252
const draftTextStyle = (): JSX.CSSProperties => ({
253253
"font-family": "var(--figma-font-sans, Inter, sans-serif)",
254-
"font-size": "16px",
255-
color: "#0D0D0D", // Dark text on lime background
254+
"font-size": "12px",
255+
color: "#0D0D0D",
256256
});
257257

258-
// Hamburger menu button - after mode toggle, before breadcrumbs
258+
// Hamburger menu button - compact
259259
const hamburgerStyle = (): JSX.CSSProperties => ({
260260
position: "absolute",
261-
left: "143px", // After mode toggle (60 + 75 + 8 gap)
262-
top: "14px",
263-
width: "28px",
264-
height: "28px",
261+
left: "128px",
262+
top: "8px",
263+
width: "24px",
264+
height: "24px",
265265
display: "flex",
266266
"align-items": "center",
267267
"justify-content": "center",
@@ -273,39 +273,39 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
273273
transition: "background 100ms ease",
274274
});
275275

276-
// Theme toggle - x:1247, y:12, 100×28px (Figma exact)
276+
// Theme toggle - compact
277277
const themeToggleContainerStyle = (): JSX.CSSProperties => ({
278278
position: "absolute",
279-
right: "296px", // 1543 - 1247 = 296px from right
280-
top: "12px",
279+
right: "180px",
280+
top: "6px",
281281
"-webkit-app-region": "no-drag",
282282
});
283283

284-
// Vertical separator - x:1371, height:52px (Figma exact)
284+
// Vertical separator
285285
const verticalSeparatorStyle = (right: number): JSX.CSSProperties => ({
286286
position: "absolute",
287287
right: `${right}px`,
288288
top: "0",
289289
width: "1px",
290-
height: "52px",
290+
height: "40px",
291291
background: "var(--figma-border-default, rgba(255,255,255,0.1))",
292292
});
293293

294-
// Window controls - x:1375, 168×53px (3 buttons × 56px = 168px)
294+
// Window controls - compact 120px (3 buttons × 40px)
295295
const windowControlsStyle = (): JSX.CSSProperties => ({
296296
position: "absolute",
297297
right: "0",
298298
top: "0",
299299
display: "flex",
300-
height: "53px",
300+
height: "40px",
301301
"align-items": "center",
302302
"-webkit-app-region": "no-drag",
303303
});
304304

305-
// Window button - 56×56px (Figma exact, centered in 53px header)
305+
// Window button - compact 40×40px
306306
const windowButtonStyle = (isClose: boolean = false): JSX.CSSProperties => ({
307-
width: "56px",
308-
height: "53px",
307+
width: "40px",
308+
height: "40px",
309309
display: "flex",
310310
"align-items": "center",
311311
"justify-content": "center",
@@ -336,7 +336,7 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
336336
<header class={local.class} style={containerStyle()} {...others}>
337337
{/* Logo Container */}
338338
<div style={logoContainerStyle()}>
339-
<CortexLogo size={40} />
339+
<CortexLogo size={32} />
340340
</div>
341341

342342
{/* Mode Toggle (Vibe/IDE) */}
@@ -521,8 +521,8 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
521521
/>
522522
</div>
523523

524-
{/* Separator before window controls - 172px from right (1543 - 1371 = 172) */}
525-
<div style={verticalSeparatorStyle(172)} />
524+
{/* Separator before window controls */}
525+
<div style={verticalSeparatorStyle(120)} />
526526

527527
{/* Window Controls - 168px wide (3 × 56px) */}
528528
<div style={windowControlsStyle()}>
@@ -542,7 +542,7 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
542542
if (svg) (svg as SVGPathElement).style.stroke = "#747577";
543543
}}
544544
>
545-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
545+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
546546
<path d="M6 12H18" stroke="#747577" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
547547
</svg>
548548
</button>
@@ -564,7 +564,7 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
564564
if (svg) (svg as SVGPathElement).style.stroke = "#747577";
565565
}}
566566
>
567-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
567+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
568568
<path d="M8.5 5H14.0222C15.7646 5 16.6358 5 17.3013 5.33909C17.8867 5.63736 18.3626 6.1133 18.6609 6.6987C19 7.3642 19 8.23539 19 9.97778V15.5M7.48889 19H13.7889C14.6601 19 15.0957 19 15.4284 18.8305C15.7211 18.6813 15.9591 18.4433 16.1082 18.1507C16.2778 17.8179 16.2778 17.3823 16.2778 16.5111V10.2111C16.2778 9.33992 16.2778 8.90432 16.1082 8.57157C15.9591 8.27887 15.7211 8.0409 15.4284 7.89177C15.0957 7.72222 14.6601 7.72222 13.7889 7.72222H7.48889C6.6177 7.72222 6.1821 7.72222 5.84935 7.89177C5.55665 8.0409 5.31868 8.27887 5.16955 8.57157C5 8.90432 5 9.33992 5 10.2111V16.5111C5 17.3823 5 17.8179 5.16955 18.1507C5.31868 18.4433 5.55665 18.6813 5.84935 18.8305C6.1821 19 6.6177 19 7.48889 19Z" stroke="#747577" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
569569
</svg>
570570
</button>
@@ -586,7 +586,7 @@ export const FigmaTitleBar: Component<FigmaTitleBarProps> = (props) => {
586586
if (svg) (svg as SVGPathElement).style.stroke = "#747577";
587587
}}
588588
>
589-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
589+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
590590
<path d="M18 6L6 18M6 6L18 18" stroke="#747577" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
591591
</svg>
592592
</button>

0 commit comments

Comments
 (0)