Start on completions styles

Nate Butler created 2 years ago

Change summary

crates/editor2/src/editor.rs         | 22 +++++++++++++++++-----
crates/ui2/src/components/popover.rs |  2 ++
crates/ui2/src/styled_ext.rs         |  4 ++--
3 files changed, 21 insertions(+), 7 deletions(-)

Detailed changes

crates/editor2/src/editor.rs

@@ -1273,6 +1273,13 @@ impl CompletionsMenu {
             multiline_docs.map(|div| {
                 div.id("multiline_docs")
                     .max_h(max_height)
+                    .flex_1()
+                    .px_1p5()
+                    .py_1()
+                    .min_w(px(260.))
+                    .max_w(px(640.))
+                    .w(px(500.))
+                    .text_ui()
                     .overflow_y_scroll()
                     // Prevent a mouse down on documentation from being propagated to the editor,
                     // because that would move the cursor.
@@ -1327,13 +1334,18 @@ impl CompletionsMenu {
 
                         div()
                             .id(mat.candidate_id)
-                            .min_w(px(300.))
-                            .max_w(px(700.))
+                            .min_w(px(220.))
+                            .max_w(px(640.))
                             .whitespace_nowrap()
                             .overflow_hidden()
-                            .bg(gpui::green())
-                            .hover(|style| style.bg(gpui::blue()))
-                            .when(item_ix == selected_item, |div| div.bg(gpui::red()))
+                            .text_ui()
+                            .px_1()
+                            .rounded(px(4.))
+                            .bg(cx.theme().colors().ghost_element_background)
+                            .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
+                            .when(item_ix == selected_item, |div| {
+                                div.bg(cx.theme().colors().ghost_element_selected)
+                            })
                             .on_mouse_down(
                                 MouseButton::Left,
                                 cx.listener(move |editor, event, cx| {

crates/ui2/src/components/popover.rs

@@ -3,6 +3,7 @@ use gpui::{
     WindowContext,
 };
 use smallvec::SmallVec;
+use theme2::ActiveTheme;
 
 use crate::{v_stack, StyledExt};
 
@@ -58,6 +59,7 @@ impl RenderOnce for Popover {
                         .ml_1()
                         .absolute()
                         .elevation_2(cx)
+                        .bg(cx.theme().colors().surface_background)
                         .p_1()
                         .child(aside),
                 )

crates/ui2/src/styled_ext.rs

@@ -1,4 +1,4 @@
-use gpui::{Styled, WindowContext};
+use gpui::{px, Styled, WindowContext};
 use theme2::ActiveTheme;
 
 use crate::{ElevationIndex, UITextSize};
@@ -6,7 +6,7 @@ use crate::{ElevationIndex, UITextSize};
 fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
     this.bg(cx.theme().colors().elevated_surface_background)
         .z_index(index.z_index())
-        .rounded_lg()
+        .rounded(px(8.))
         .border()
         .border_color(cx.theme().colors().border_variant)
         .shadow(index.shadow())