Match new tab page to design reference dimensions

Hero heading at 64px, search bar at 54px height with 14px radius
and card-like background (85% white), favorites grid at 7 columns
with 16px card radius matching the design spec.
This commit is contained in:
2026-05-09 16:25:19 -04:00
parent 107619a3fe
commit 86f558c65f
@@ -54,29 +54,30 @@ fn render_hero_section() -> AnyElement {
.flex() .flex()
.flex_col() .flex_col()
.items_center() .items_center()
.gap(px(20.0)) .gap(px(28.0))
.pt(px(24.0)) .pt(px(24.0))
.pb(px(12.0)) .pb(px(14.0))
.child( .child(
div() div()
.text_size(px(48.0)) .text_size(px(64.0))
.font_weight(gpui::FontWeight(400.0)) .font_weight(gpui::FontWeight(400.0))
.text_color(rgb(colors::INK)) .text_color(rgb(colors::INK))
.child("Where focus finds flow."), .child("Where focus finds flow."),
) )
.child( .child(
div() div()
.w(px(420.0)) .w(px(640.0))
.h(px(44.0)) .h(px(54.0))
.rounded(px(999.0)) .rounded(px(14.0))
.bg(rgba(colors::GLASS_2)) .bg(rgba(SEARCH_BAR_BG))
.px(px(16.0)) .px(px(16.0))
.flex() .flex()
.items_center() .items_center()
.gap(px(10.0)) .gap(px(12.0))
.child(div().text_color(rgb(colors::INK_4)).child(IconName::Search)) .child(div().text_color(rgb(colors::INK_3)).child(IconName::Search))
.child( .child(
div() div()
.flex_1()
.text_size(px(14.0)) .text_size(px(14.0))
.text_color(rgb(colors::INK_4)) .text_color(rgb(colors::INK_4))
.child("Search the web or ELY"), .child("Search the web or ELY"),
@@ -85,6 +86,8 @@ fn render_hero_section() -> AnyElement {
.into_any_element() .into_any_element()
} }
const SEARCH_BAR_BG: u32 = 0xffffffd9; // rgba(255,255,255,0.85)
fn render_quick_actions(cx: &mut Context<ElyShell>) -> AnyElement { fn render_quick_actions(cx: &mut Context<ElyShell>) -> AnyElement {
div() div()
.flex() .flex()
@@ -143,8 +146,8 @@ fn render_favorites_grid(snapshot: &BrowserSnapshot, cx: &mut Context<ElyShell>)
) )
.child( .child(
div() div()
.flex() .grid()
.flex_wrap() .grid_cols(7)
.gap(px(10.0)) .gap(px(10.0))
.children(snapshot.favorites.iter().enumerate().map(|(index, tab)| { .children(snapshot.favorites.iter().enumerate().map(|(index, tab)| {
render_favorite_card(index, tab, cx) render_favorite_card(index, tab, cx)
@@ -169,9 +172,8 @@ fn render_favorite_card(
div() div()
.id(SharedString::from(format!("fav-card-{index}"))) .id(SharedString::from(format!("fav-card-{index}")))
.w(px(96.0))
.h(px(96.0)) .h(px(96.0))
.rounded(px(14.0)) .rounded(px(16.0))
.bg(rgba(colors::GLASS_2)) .bg(rgba(colors::GLASS_2))
.flex() .flex()
.flex_col() .flex_col()