Update Copilot UI (#3904)

Updates Zed2 Copilot UI

- Introduces the `Headline` component for rendering large text
- Styles the 3 Copilot prompt states

![CleanShot 2024-01-08 at 13 19
09@2x](https://github.com/zed-industries/zed/assets/1714999/4b58b85f-23aa-4c22-9ca6-d0abd232cf18)
![CleanShot 2024-01-08 at 13 18
55@2x](https://github.com/zed-industries/zed/assets/1714999/0bf71e1d-63b5-4fbb-8672-e42f8602516d)


Release Notes:

- Updated the connect Copilot modal UI.

crates/ui/src/prelude.rs

@@ -14,6 +14,7 @@ pub use crate::visible_on_hover::*;
 pub use crate::{h_stack, v_stack};
 pub use crate::{Button, ButtonSize, ButtonStyle, IconButton, SelectableButton};
 pub use crate::{ButtonCommon, Color, StyledExt};
+pub use crate::{Headline, HeadlineSize};
 pub use crate::{Icon, IconElement, IconPosition, IconSize};
 pub use crate::{Label, LabelCommon, LabelSize, LineHeightStyle};
 pub use theme::ActiveTheme;

crates/ui/src/styles/typography.rs

@@ -1,4 +1,8 @@
-use gpui::{rems, Rems};
+use gpui::{
+    div, rems, IntoElement, ParentElement, Rems, RenderOnce, SharedString, Styled, WindowContext,
+};
+use settings::Settings;
+use theme::{ActiveTheme, ThemeSettings};
 
 #[derive(Debug, Default, Clone)]
 pub enum UiTextSize {
@@ -33,3 +37,69 @@ impl UiTextSize {
         }
     }
 }
+
+#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
+pub enum HeadlineSize {
+    XSmall,
+    Small,
+    #[default]
+    Medium,
+    Large,
+    XLarge,
+}
+
+impl HeadlineSize {
+    pub fn size(self) -> Rems {
+        match self {
+            // Based on the Major Second scale
+            Self::XSmall => rems(0.88),
+            Self::Small => rems(1.0),
+            Self::Medium => rems(1.125),
+            Self::Large => rems(1.27),
+            Self::XLarge => rems(1.43),
+        }
+    }
+
+    pub fn line_height(self) -> Rems {
+        match self {
+            Self::XSmall => rems(1.6),
+            Self::Small => rems(1.6),
+            Self::Medium => rems(1.6),
+            Self::Large => rems(1.6),
+            Self::XLarge => rems(1.6),
+        }
+    }
+}
+
+#[derive(IntoElement)]
+pub struct Headline {
+    size: HeadlineSize,
+    text: SharedString,
+}
+
+impl RenderOnce for Headline {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
+
+        div()
+            .font(ui_font)
+            .line_height(self.size.line_height())
+            .text_size(self.size.size())
+            .text_color(cx.theme().colors().text)
+            .child(self.text)
+    }
+}
+
+impl Headline {
+    pub fn new(text: impl Into<SharedString>) -> Self {
+        Self {
+            size: HeadlineSize::default(),
+            text: text.into(),
+        }
+    }
+
+    pub fn size(mut self, size: HeadlineSize) -> Self {
+        self.size = size;
+        self
+    }
+}