Checkpoin: Iterating on design and writing

Co-Authored-By: Agus Zubiaga <hi@aguz.me>

Cargo.lock

@@ -16512,6 +16512,8 @@ dependencies = [
  "client",
  "gpui",
  "menu",
+ "settings",
+ "theme",
  "ui",
  "workspace",
 ]

crates/title_bar/src/title_bar.rs

@@ -211,7 +211,6 @@ impl Render for TitleBar {
                                             .child(
                                                 h_flex()
                                                     .h_full()
-                                                    .px_1()
                                                     .items_center()
                                                     .gap_1p5()
                                                     .child(
@@ -228,7 +227,7 @@ impl Render for TitleBar {
                                                             )
                                                             .child(
                                                                 Label::new(
-                                                                    "Zed AI's Edit Predictions",
+                                                                    "Zed AI's Edit Prediction",
                                                                 )
                                                                 .size(LabelSize::Small),
                                                             ),
@@ -251,8 +250,15 @@ impl Render for TitleBar {
                                             }),
                                     )
                                     .child(
-                                        IconButton::new("close", IconName::Close)
+                                        div()
-                                            .icon_size(IconSize::Indicator),
+                                            .border_l_1()
+                                            .border_color(
+                                                cx.theme().colors().editor_foreground.opacity(0.1),
+                                            )
+                                            .child(
+                                                IconButton::new("close", IconName::Close)
+                                                    .icon_size(IconSize::Indicator),
+                                            ),
                                     ),
                             ),
                     )

crates/zed_predict_tos/Cargo.toml

@@ -18,6 +18,8 @@ test-support = []
 [dependencies]
 client.workspace = true
 gpui.workspace = true
+menu.workspace = true
+settings.workspace = true
+theme.workspace = true
 ui.workspace = true
 workspace.workspace = true
-menu.workspace = true

crates/zed_predict_tos/src/zed_predict_tos.rs

@@ -2,9 +2,10 @@
 
 use client::UserStore;
 use gpui::{
-    AppContext, ClickEvent, DismissEvent, EventEmitter, FocusHandle, FocusableView, Model,
+    svg, AppContext, ClickEvent, DismissEvent, EventEmitter, FocusHandle, FocusableView, Model,
     MouseDownEvent, Render, View,
 };
+use settings::Settings;
 use ui::{prelude::*, TintColor};
 use workspace::{ModalView, Workspace};
 
@@ -83,70 +84,102 @@ impl ModalView for ZedPredictTos {}
 
 impl Render for ZedPredictTos {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let description = if self.viewed {
+            "After accepting the ToS, Zed will be set as your inline completions provider."
+        } else {
+            "To start using Edit Predictions, please read and accept our Terms of Service."
+        };
+
         v_flex()
+            .w_96()
+            .p_4()
+            .relative()
+            .items_center()
+            .gap_2()
+            .overflow_hidden()
+            .elevation_3(cx)
             .id("zed predict tos")
             .track_focus(&self.focus_handle(cx))
             .on_action(cx.listener(Self::cancel))
             .key_context("ZedPredictTos")
-            .elevation_3(cx)
-            .w_96()
-            .items_center()
-            .p_4()
-            .gap_2()
             .on_action(cx.listener(|_, _: &menu::Cancel, cx| {
                 cx.emit(DismissEvent);
             }))
             .on_any_mouse_down(cx.listener(|this, _: &MouseDownEvent, cx| {
                 cx.focus(&this.focus_handle);
             }))
+            .child(
+                h_flex()
+                    .max_h_32()
+                    .p_1()
+                    .overflow_hidden()
+                    .flex_wrap()
+                    .gap_1()
+                    .absolute()
+                    .top_0()
+                    .left_0()
+                    .right_0()
+                    .children((0..254).enumerate().map(|(index, _)| {
+                        let opacity = 0.24 - (index as f32 * 0.0016);
+                        svg()
+                            .path("icons/zed_predict.svg")
+                            .text_color(cx.theme().colors().icon_disabled)
+                            .w(px(14.))
+                            .h(px(14.))
+                            .opacity(opacity.max(0.001))
+                    })),
+            )
             .child({
                 let tab = |_n: u8| {
                     h_flex()
-                        .px_10()
+                        .px_4()
-                        .bg(cx.theme().colors().text_accent.opacity(0.15))
+                        .py_0p5()
+                        .bg(cx.theme().colors().editor_background)
                         .border_1()
-                        .border_color(cx.theme().colors().text_accent.opacity(0.8))
+                        .border_color(cx.theme().colors().text_accent.opacity(0.4))
                         .rounded_md()
-                        .child(
+                        .font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
-                            Label::new("tab")
+                        .text_size(TextSize::XSmall.rems(cx))
-                                .color(Color::Muted),
+                        .text_color(cx.theme().colors().text)
-                        )
+                        .child("tab")
                 };
 
-                v_flex().items_center().gap_3().w_full().child(tab(0).ml_neg_32()).child(tab(1)).child(tab(2).ml_32())
+                v_flex()
-            })
+                    .items_center()
-            .child(
+                    .gap_2()
-                h_flex()
                     .w_full()
-                    .justify_between()
+                    .child(tab(0).ml_neg_20())
-                    .child(
+                    .child(tab(1))
-                        v_flex()
+                    .child(tab(2).ml_20())
-                            .gap_0p5()
+            })
-                            .child(
-                                Label::new("Zed AI")
-                                    .size(LabelSize::Small)
-                                    .color(Color::Muted),
-                            )
-                            .child(Headline::new("Edit Prediction")),
-                    )
-                    .child(Icon::new(IconName::ZedPredict).size(IconSize::XLarge)),
-            )
-            .child(
-                Label::new(
-                    "To use Zed AI's Edit Prediction feature, please read and accept our Terms of Service.",
-                )
-                .color(Color::Muted),
-            )
             .child(
                 v_flex()
                     .mt_2()
                     .gap_0p5()
+                    .items_center()
+                    .child(
+                        h_flex().child(
+                            Label::new("Zed AI")
+                                .size(LabelSize::Small)
+                                .color(Color::Muted),
+                        ),
+                    )
+                    .child(h_flex().child(Headline::new("Edit Prediction")))
+                    .child(Label::new(description).color(Color::Muted)),
+            )
+            .child(
+                v_flex()
+                    .mt_2()
+                    .gap_1()
                     .w_full()
                     .child(if self.viewed {
-                        Button::new("accept-tos", "I've Read and Accept the Terms of Service")
+                        Button::new(
-                            .style(ButtonStyle::Tinted(TintColor::Accent))
+                            "accept-tos",
-                            .full_width()
+                            "Accept the Terms of Service and Start Using It",
-                            .on_click(cx.listener(Self::accept_terms))
+                        )
+                        .style(ButtonStyle::Tinted(TintColor::Accent))
+                        .full_width()
+                        .on_click(cx.listener(Self::accept_terms))
                     } else {
                         Button::new("view-tos", "Read Terms of Service")
                             .style(ButtonStyle::Tinted(TintColor::Accent))