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:
@@ -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()
|
||||||
|
|||||||
Reference in New Issue
Block a user