diff --git a/crates/copilot/src/sign_in.rs b/crates/copilot/src/sign_in.rs index 168ba712ce..46f331d8db 100644 --- a/crates/copilot/src/sign_in.rs +++ b/crates/copilot/src/sign_in.rs @@ -4,6 +4,7 @@ use gpui::{ ViewContext, ViewHandle, WindowKind, WindowOptions, }; use settings::Settings; +use theme::ui::modal; #[derive(PartialEq, Eq, Debug, Clone)] struct CopyUserCode; @@ -11,7 +12,7 @@ struct CopyUserCode; #[derive(PartialEq, Eq, Debug, Clone)] struct OpenGithub; -const _COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot"; +const COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot"; pub fn init(cx: &mut MutableAppContext) { let copilot = Copilot::global(cx).unwrap(); @@ -66,53 +67,60 @@ pub fn init(cx: &mut MutableAppContext) { .detach(); // Modal theming test: - // use gpui::geometry::vector::vec2f; - // let window_size = cx.global::().theme.copilot.modal.dimensions(); - // let window_options = WindowOptions { - // bounds: gpui::WindowBounds::Fixed(RectF::new(Default::default(), window_size)), - // titlebar: None, - // center: false, - // focus: false, - // kind: WindowKind::PopUp, - // is_movable: true, - // screen: None, - // }; - // let (_, _view) = cx.add_window(window_options, |_cx| { - // CopilotCodeVerification::new(Status::SigningIn { - // prompt: Some(PromptUserDeviceFlow { - // user_code: "ABCD-1234".to_string(), - // verification_uri: "https://github.com/login/device".to_string(), - // }), - // }) - // }); + use gpui::geometry::vector::vec2f; - // let window_size = cx.global::().theme.copilot.modal.dimensions(); - // let window_options = WindowOptions { - // bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(window_size.x(), 0.), window_size)), - // titlebar: None, - // center: false, - // focus: false, - // kind: WindowKind::PopUp, - // is_movable: true, - // screen: None, - // }; - // let (_, _view) = cx.add_window(window_options, |_cx| { - // CopilotCodeVerification::new(Status::Authorized) - // }); + let window_size = cx.global::().theme.copilot.modal.dimensions(); + let window_options = WindowOptions { + bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., 0.), window_size)), + titlebar: None, + center: false, + focus: false, + kind: WindowKind::PopUp, + is_movable: true, + screen: None, + }; + let (_, _view) = cx.add_window(window_options, |_cx| { + CopilotCodeVerification::new(Status::Authorized) + }); - // let window_size = cx.global::().theme.copilot.modal.dimensions(); - // let window_options = WindowOptions { - // bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., window_size.y()), window_size)), - // titlebar: None, - // center: false, - // focus: false, - // kind: WindowKind::PopUp, - // is_movable: true, - // screen: None, - // }; - // let (_, _view) = cx.add_window(window_options, |_cx| { - // CopilotCodeVerification::new(Status::Unauthorized) - // }); + let window_size = cx.global::().theme.copilot.modal.dimensions(); + let window_options = WindowOptions { + bounds: gpui::WindowBounds::Fixed(RectF::new( + vec2f(window_size.x() + 10., 0.), + window_size, + )), + titlebar: None, + center: false, + focus: false, + kind: WindowKind::PopUp, + is_movable: true, + screen: None, + }; + let (_, _view) = cx.add_window(window_options, |_cx| { + CopilotCodeVerification::new(Status::SigningIn { + prompt: Some(PromptUserDeviceFlow { + user_code: "ABCD-1234".to_string(), + verification_uri: "https://github.com/login/device".to_string(), + }), + }) + }); + + let window_size = cx.global::().theme.copilot.modal.dimensions(); + let window_options = WindowOptions { + bounds: gpui::WindowBounds::Fixed(RectF::new( + vec2f((window_size.x() + 10.) * 2., 0.), + window_size, + )), + titlebar: None, + center: false, + focus: false, + kind: WindowKind::PopUp, + is_movable: true, + screen: None, + }; + let (_, _view) = cx.add_window(window_options, |_cx| { + CopilotCodeVerification::new(Status::Unauthorized) + }); } pub struct CopilotCodeVerification { @@ -139,151 +147,43 @@ impl CopilotCodeVerification { .map(|item| item.text() == &data.user_code) .unwrap_or(false); - Flex::column() - .with_children([ - MouseEventHandler::::new(0, cx, |state, _cx| { - Flex::row() - .with_children([ - Label::new(data.user_code.clone(), style.auth.device_code.clone()) - .aligned() - .contained() - .with_style(style.auth.device_code_left_container) - .constrained() - .with_width(style.auth.device_code_left) - .boxed(), - Empty::new() - .constrained() - .with_width(1.) - .with_height(style.auth.device_code_seperator_height) - .contained() - .with_background_color( - style - .auth - .cta_button - .style_for(state, false) - .container - .border - .color, - ) - .boxed(), - Label::new( - if copied { "Copied!" } else { "Copy" }, - style.auth.cta_button.style_for(state, false).text.clone(), - ) - .aligned() - .contained() - .with_style(style.auth.device_code_right_container) - .constrained() - .with_width(style.auth.device_code_right) - .boxed(), - ]) + let device_code_style = &style.auth.prompting.device_code; + + MouseEventHandler::::new(0, cx, |state, _cx| { + Flex::row() + .with_children([ + Label::new(data.user_code.clone(), device_code_style.text.clone()) + .aligned() .contained() - .with_style(style.auth.device_code_cta.style_for(state, false).container) + .with_style(device_code_style.left_container) .constrained() - .with_width(style.auth.content_width) - .boxed() - }) - .on_click(gpui::MouseButton::Left, { - let user_code = data.user_code.clone(); - move |_, cx| { - cx.platform() - .write_to_clipboard(ClipboardItem::new(user_code.clone())); - cx.notify(); - } - }) - .with_cursor_style(gpui::CursorStyle::PointingHand) - .boxed(), - Flex::column() - .with_children([ - Label::new( - "Paste this code into GitHub after", - style.auth.hint.text.clone(), - ) + .with_width(device_code_style.left) .boxed(), - Label::new("clicking the button below.", style.auth.hint.text.clone()) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.hint.container.clone()) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.device_code_group) - .aligned() - .boxed() - } - - fn render_not_authorized_warning(style: &theme::Copilot) -> ElementBox { - Flex::column() - .with_children([ - Flex::column() - .with_children([ - Label::new( - "You must have an active copilot", - style.auth.warning.text.to_owned(), - ) - .aligned() - .boxed(), - Label::new( - "license to use it in Zed.", - style.auth.warning.text.to_owned(), - ) - .aligned() - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.warning.container) - .boxed(), - Flex::column() - .with_children([ - Label::new( - "Try connecting again once you", - style.auth.hint.text.to_owned(), - ) - .aligned() - .boxed(), - Label::new( - "have activated a Copilot license.", - style.auth.hint.text.to_owned(), - ) - .aligned() - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.not_authorized_hint) - .boxed(), - ]) - .align_children_center() - .boxed() - } - - fn render_copilot_enabled(style: &theme::Copilot) -> ElementBox { - Flex::column() - .with_children([ - Label::new( - "You can update your settings or", - style.auth.hint.text.clone(), - ) - .aligned() - .boxed(), - Label::new( - "sign out from the Copilot menu in", - style.auth.hint.text.clone(), - ) - .aligned() - .boxed(), - Label::new("the status bar.", style.auth.hint.text.clone()) + Label::new( + if copied { "Copied!" } else { "Copy" }, + device_code_style.cta.style_for(state, false).text.clone(), + ) .aligned() + .contained() + .with_style(*device_code_style.right_container.style_for(state, false)) + .constrained() + .with_width(device_code_style.right) .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.enabled_hint) - .boxed() + ]) + .contained() + .with_style(device_code_style.cta.style_for(state, false).container) + .boxed() + }) + .on_click(gpui::MouseButton::Left, { + let user_code = data.user_code.clone(); + move |_, cx| { + cx.platform() + .write_to_clipboard(ClipboardItem::new(user_code.clone())); + cx.notify(); + } + }) + .with_cursor_style(gpui::CursorStyle::PointingHand) + .boxed() } fn render_prompting_modal( @@ -291,171 +191,172 @@ impl CopilotCodeVerification { style: &theme::Copilot, cx: &mut gpui::RenderContext, ) -> ElementBox { - theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { - Flex::column() - .with_children([ - Flex::column() - .with_children([ - Flex::row() - .with_children([ - theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() - ]) - .boxed(), - Flex::column() - .with_children([ - Label::new( - "Enable Copilot by connecting", - style.auth.enable_text.clone(), - ) - .boxed(), - Label::new( - "your existing license.", - style.auth.enable_text.clone(), - ) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.enable_group.clone()) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.header_group) + Flex::column() + .with_children([ + Flex::column() + .with_children([ + Label::new( + "Enable Copilot by connecting", + style.auth.prompting.subheading.text.clone(), + ) .aligned() .boxed(), - Self::render_device_code(data, &style, cx), - Flex::column() - .with_child(theme::ui::cta_button_with_click( - "Connect to GitHub", - style.auth.content_width, - &style.auth.cta_button, - cx, - { - let verification_uri = data.verification_uri.clone(); - move |_, cx| cx.platform().open_url(&verification_uri) - }, - )) - .align_children_center() - .contained() - .with_style(style.auth.github_group) + Label::new( + "your existing license.", + style.auth.prompting.subheading.text.clone(), + ) .aligned() .boxed(), - ]) - .align_children_center() - .constrained() - .with_width(style.auth.content_width) - .aligned() - .boxed() - }) + ]) + .align_children_center() + .contained() + .with_style(style.auth.prompting.subheading.container) + .boxed(), + Self::render_device_code(data, &style, cx), + Flex::column() + .with_children([ + Label::new( + "Paste this code into GitHub after", + style.auth.prompting.hint.text.clone(), + ) + .aligned() + .boxed(), + Label::new( + "clicking the button below.", + style.auth.prompting.hint.text.clone(), + ) + .aligned() + .boxed(), + ]) + .align_children_center() + .contained() + .with_style(style.auth.prompting.hint.container.clone()) + .boxed(), + theme::ui::cta_button_with_click( + "Connect to GitHub", + style.auth.content_width, + &style.auth.cta_button, + cx, + { + let verification_uri = data.verification_uri.clone(); + move |_, cx| cx.platform().open_url(&verification_uri) + }, + ) + .boxed(), + ]) + .align_children_center() + .boxed() } fn render_enabled_modal( style: &theme::Copilot, cx: &mut gpui::RenderContext, ) -> ElementBox { - theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { - Flex::column() - .with_children([ - Flex::column() - .with_children([ - Flex::row() - .with_children([ - theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() - ]) - .boxed(), - Label::new("Copilot Enabled!", style.auth.enable_text.clone()).boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.header_group) + let enabled_style = &style.auth.authorized; + Flex::column() + .with_children([ + Label::new("Copilot Enabled!", enabled_style.subheading.text.clone()) + .contained() + .with_style(enabled_style.subheading.container) + .aligned() + .boxed(), + Flex::column() + .with_children([ + Label::new( + "You can update your settings or", + enabled_style.hint.text.clone(), + ) .aligned() .boxed(), - Self::render_copilot_enabled(&style), - Flex::column() - .with_child(theme::ui::cta_button_with_click( - "Close", - style.auth.content_width, - &style.auth.cta_button, - cx, - |_, cx| { - let window_id = cx.window_id(); - cx.remove_window(window_id) - }, - )) - .align_children_center() - .contained() - .with_style(style.auth.github_group) + Label::new( + "sign out from the Copilot menu in", + enabled_style.hint.text.clone(), + ) .aligned() .boxed(), - ]) - .align_children_center() - .constrained() - .with_width(style.auth.content_width) - .aligned() - .boxed() - }) + Label::new("the status bar.", enabled_style.hint.text.clone()) + .aligned() + .boxed(), + ]) + .align_children_center() + .contained() + .with_style(enabled_style.hint.container) + .boxed(), + theme::ui::cta_button_with_click( + "Done", + style.auth.content_width, + &style.auth.cta_button, + cx, + |_, cx| { + let window_id = cx.window_id(); + cx.remove_window(window_id) + }, + ) + .boxed(), + ]) + .align_children_center() + .boxed() } fn render_unauthorized_modal( style: &theme::Copilot, cx: &mut gpui::RenderContext, ) -> ElementBox { - theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { - Flex::column() - .with_children([ - Flex::column() - .with_children([ - Flex::row() - .with_children([ - theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() - ]) - .boxed(), - Flex::column() - .with_children([ - Label::new( - "Enable Copilot by connecting", - style.auth.enable_text.clone(), - ) - .boxed(), - Label::new( - "your existing license.", - style.auth.enable_text.clone(), - ) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.enable_group.clone()) - .boxed(), - ]) - .align_children_center() - .contained() - .with_style(style.auth.header_group) + let unauthorized_style = &style.auth.not_authorized; + + Flex::column() + .with_children([ + Flex::column() + .with_children([ + Label::new( + "Enable Copilot by connecting", + unauthorized_style.subheading.text.clone(), + ) .aligned() .boxed(), - Self::render_not_authorized_warning(&style), - Flex::column() - .with_child(theme::ui::cta_button_with_click( - "Close", - style.auth.content_width, - &style.auth.cta_button, - cx, - |_, cx| { - let window_id = cx.window_id(); - cx.remove_window(window_id) - }, - )) - .align_children_center() - .contained() - .with_style(style.auth.github_group) + Label::new( + "your existing license.", + unauthorized_style.subheading.text.clone(), + ) .aligned() .boxed(), - ]) - .align_children_center() - .constrained() - .with_width(style.auth.content_width) - .aligned() - .boxed() - }) + ]) + .align_children_center() + .contained() + .with_style(unauthorized_style.subheading.container) + .boxed(), + Flex::column() + .with_children([ + Label::new( + "You must have an active copilot", + unauthorized_style.warning.text.clone(), + ) + .aligned() + .boxed(), + Label::new( + "license to use it in Zed.", + unauthorized_style.warning.text.clone(), + ) + .aligned() + .boxed(), + ]) + .align_children_center() + .contained() + .with_style(unauthorized_style.warning.container) + .boxed(), + theme::ui::cta_button_with_click( + "Subscribe on GitHub", + style.auth.content_width, + &style.auth.cta_button, + cx, + |_, cx| { + let window_id = cx.window_id(); + cx.remove_window(window_id); + cx.platform().open_url(COPILOT_SIGN_UP_URL) + }, + ) + .boxed(), + ]) + .align_children_center() + .boxed() } } @@ -478,13 +379,22 @@ impl View for CopilotCodeVerification { fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox { let style = cx.global::().theme.clone(); - match &self.status { - Status::SigningIn { - prompt: Some(prompt), - } => Self::render_prompting_modal(&prompt, &style.copilot, cx), - Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx), - Status::Authorized => Self::render_enabled_modal(&style.copilot, cx), - _ => Empty::new().boxed(), - } + + modal("Connect Copilot to Zed", &style.copilot.modal, cx, |cx| { + Flex::column() + .with_children([ + theme::ui::icon(&style.copilot.auth.header).boxed(), + match &self.status { + Status::SigningIn { + prompt: Some(prompt), + } => Self::render_prompting_modal(&prompt, &style.copilot, cx), + Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx), + Status::Authorized => Self::render_enabled_modal(&style.copilot, cx), + _ => Empty::new().boxed(), + }, + ]) + .align_children_center() + .boxed() + }) } } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 1c7d0eba95..9eb796dc6f 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -126,28 +126,43 @@ pub struct Copilot { #[derive(Deserialize, Default, Clone)] pub struct CopilotAuth { - pub enable_group: ContainerStyle, - pub enable_text: TextStyle, - pub instruction_text: TextStyle, - pub cta_button: ButtonStyle, pub content_width: f32, - pub copilot_plus_zed_icon: SvgStyle, - pub device_code_group: ContainerStyle, - pub github_group: ContainerStyle, - pub header_group: ContainerStyle, - pub device_code: TextStyle, - pub device_code_cta: ButtonStyle, - pub device_code_left: f32, - pub device_code_left_container: ContainerStyle, - pub device_code_right: f32, - pub device_code_right_container: ContainerStyle, - pub device_code_seperator_height: f32, + pub prompting: CopilotAuthPrompting, + pub not_authorized: CopilotAuthNotAuthorized, + pub authorized: CopilotAuthAuthorized, + pub cta_button: ButtonStyle, + pub header: IconStyle, +} + +#[derive(Deserialize, Default, Clone)] +pub struct CopilotAuthPrompting { + pub subheading: ContainedText, pub hint: ContainedText, - pub enabled_hint: ContainerStyle, - pub not_authorized_hint: ContainerStyle, + pub device_code: DeviceCode, +} + +#[derive(Deserialize, Default, Clone)] +pub struct DeviceCode { + pub text: TextStyle, + pub cta: ButtonStyle, + pub left: f32, + pub left_container: ContainerStyle, + pub right: f32, + pub right_container: Interactive, +} + +#[derive(Deserialize, Default, Clone)] +pub struct CopilotAuthNotAuthorized { + pub subheading: ContainedText, pub warning: ContainedText, } +#[derive(Deserialize, Default, Clone)] +pub struct CopilotAuthAuthorized { + pub subheading: ContainedText, + pub hint: ContainedText, +} + #[derive(Deserialize, Default)] pub struct ContactsPopover { #[serde(flatten)] diff --git a/crates/theme/src/ui.rs b/crates/theme/src/ui.rs index 7518d4c304..30ccef28de 100644 --- a/crates/theme/src/ui.rs +++ b/crates/theme/src/ui.rs @@ -186,6 +186,7 @@ where cta_button_with_click(label, max_width, style, cx, move |_, cx| { cx.dispatch_action(action.clone()) }) + .boxed() } pub fn cta_button_with_click( @@ -194,7 +195,7 @@ pub fn cta_button_with_click( style: &ButtonStyle, cx: &mut RenderContext, f: F, -) -> ElementBox +) -> MouseEventHandler where L: Into>, V: View, @@ -212,7 +213,6 @@ where }) .on_click(MouseButton::Left, f) .with_cursor_style(gpui::CursorStyle::PointingHand) - .boxed() } #[derive(Clone, Deserialize, Default)] @@ -241,7 +241,8 @@ where I: Into>, F: FnOnce(&mut gpui::RenderContext) -> ElementBox, { - let active = cx.window_is_active(cx.window_id()); + const TITLEBAR_HEIGHT: f32 = 28.; + // let active = cx.window_is_active(cx.window_id()); Flex::column() .with_child( @@ -251,13 +252,13 @@ where title, style .title_text - .style_for(&mut MouseState::default(), active) + .style_for(&mut MouseState::default(), false) .clone(), ) .boxed(), // FIXME: Get a better tag type MouseEventHandler::::new(999999, cx, |state, _cx| { - let style = style.close_icon.style_for(state, active); + let style = style.close_icon.style_for(state, false); icon(style).boxed() }) .on_click(gpui::MouseButton::Left, move |_, cx| { @@ -271,11 +272,18 @@ where ]) .contained() .with_style(style.titlebar) + .constrained() + .with_height(TITLEBAR_HEIGHT) + .boxed(), + ) + .with_child( + Container::new(build_modal(cx)) + .with_style(style.container) + .constrained() + .with_width(style.dimensions().x()) + .with_height(style.dimensions().y() - TITLEBAR_HEIGHT) .boxed(), ) - .with_child(build_modal(cx)) - .contained() - .with_style(style.container) .constrained() .with_height(style.dimensions().y()) .boxed() diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index f25bc08103..c2df2e5d40 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -3,17 +3,19 @@ import { background, border, foreground, svg, text } from "./components"; export default function copilot(colorScheme: ColorScheme) { - let layer = colorScheme.highest; + let layer = colorScheme.middle; - let content_width = 304; + let content_width = 264; let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component background: background(layer), - border: border(layer, "active"), + border: border(layer, "default"), cornerRadius: 4, margin: { top: 4, bottom: 4, + left: 8, + right: 8 }, padding: { top: 3, @@ -42,155 +44,183 @@ export default function copilot(colorScheme: ColorScheme) { }, modal: { titleText: { - ...text(layer, "sans", { size: "md", color: background(layer, "default") }), - active: { - ...text(layer, "sans", { size: "md" }), - } + ...text(layer, "sans", { size: "xs", "weight": "bold" }) }, titlebar: { + background: background(colorScheme.lowest), border: border(layer, "active"), padding: { - top: 8, - bottom: 8, + top: 4, + bottom: 4, left: 8, right: 8, - }, - margin: { - top: 0, - left: 0, - right: 0, - bottom: 16 } }, container: { - background: background(colorScheme.highest), - + background: background(colorScheme.lowest), + padding: { + top: 0, + left: 0, + right: 0, + bottom: 8, + } }, closeIcon: { - icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16), + icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8), container: { cornerRadius: 2, padding: { - top: 3, - bottom: 3, - left: 7, - right: 0, + top: 4, + bottom: 4, + left: 4, + right: 4, + }, + margin: { + right: 0 } }, - active: { - icon: svg(foreground(colorScheme.lowest, "warning"), "icons/x_mark_16.svg", 16, 16), + hover: { + icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8), }, - hoverAndActive: { - icon: svg(foreground(layer, "on", "hovered"), "icons/x_mark_16.svg", 16, 16), - }, - clickedAndactive: { - icon: svg(foreground(layer, "on", "pressed"), "icons/x_mark_16.svg", 16, 16), + clicked: { + icon: svg(foreground(layer, "base"), "icons/x_mark_8.svg", 8, 8), } }, dimensions: { - width: 400, - height: 500, + width: 280, + height: 280, }, }, + auth: { content_width, - headerGroup: { - margin: { - top: 5, - bottom: 5, - left: 0, - right: 0 - } - }, - copilotPlusZedIcon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 32, 92), - enableText: text(layer, "sans", { size: "md" }), - enableGroup: { - margin: { - top: 5, - bottom: 5, - left: 0, - right: 0 - } - }, + ctaButton, - instructionText: text(layer, "sans"), - - deviceCodeGroup: { - margin: { - top: 20, - bottom: 20, - left: 0, - right: 0 - } - }, - deviceCode: - text(layer, "mono", { size: "md" }), - deviceCodeCta: { - ...ctaButton, - padding: { - top: 0, - bottom: 0, - left: 0, - right: 0, + header: { + icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32), + container: { + margin: { + top: 35, + bottom: 5, + left: 0, + right: 0 + } }, }, - deviceCodeLeft: content_width * 2 / 3, - deviceCodeLeftContainer: { - padding: { - top: 3, - bottom: 3, - left: 0, - right: 0, + + prompting: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + margin: { + top: 6, + bottom: 12, + left: 0, + right: 0 + } + }, + + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 6, + bottom: 2 + } + }, + + deviceCode: { + text: + text(layer, "mono", { size: "sm" }), + cta: { + ...ctaButton, + background: background(colorScheme.lowest), + border: border(colorScheme.lowest, "inverted"), + padding: { + top: 0, + bottom: 0, + left: 16, + right: 16, + }, + margin: { + left: 16, + right: 16, + } + }, + left: content_width / 2, + leftContainer: { + padding: { + top: 3, + bottom: 3, + left: 0, + right: 6, + }, + }, + right: content_width * 1 / 3, + rightContainer: { + border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }), + padding: { + top: 3, + bottom: 5, + left: 8, + right: 0, + }, + hover: { + border: border(layer, "active", { bottom: false, right: false, top: false, left: true }), + }, + } }, }, - deviceCodeRight: content_width * 1 / 3, - deviceCodeRightContainer: { - border: border(layer, "active", { bottom: false, right: false, top: false, left: true }), - padding: { - top: 3, - bottom: 5, - left: 0, - right: 0, + + notAuthorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), + + margin: { + top: 16, + bottom: 16, + left: 0, + right: 0 + } + }, + + warning: { + ...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }), + border: border(layer, "warning"), + background: background(layer, "warning"), + cornerRadius: 2, + padding: { + top: 4, + left: 4, + bottom: 4, + right: 4, + }, + margin: { + bottom: 16, + left: 8, + right: 8 + } }, }, - deviceCodeSeperatorHeight: 0, - hint: { - ...text(layer, "sans", { size: "xs" }), - margin: { - top: -5, - } - }, - enabledHint: { - margin: { - top: 10, - bottom: 10 - } - }, - notAuthorizedHint: { - margin: { - top: 10, - bottom: 10 - } - }, - warning: { - ...text(layer, "sans", { size: "md", color: foreground(layer, "warning") }), - border: border(layer, "warning"), - background_color: background(layer, "warning"), - cornerRadius: 2, - }, + authorized: { + subheading: { + ...text(layer, "sans", { size: "xs" }), - githubGroup: { - margin: { - top: 3, - bottom: 3, - left: 0, - right: 0 - } - }, + margin: { + top: 16, + bottom: 16 + } + }, - ctaButton + hint: { + ...text(layer, "sans", { size: "xs", color: "#838994" }), + margin: { + top: 24, + bottom: 4 + } + }, + + }, } } }