diff --git a/voxygen/src/menu/main/ui/login.rs b/voxygen/src/menu/main/ui/login.rs index 494e53561e..44ff562128 100644 --- a/voxygen/src/menu/main/ui/login.rs +++ b/voxygen/src/menu/main/ui/login.rs @@ -222,6 +222,7 @@ impl LanguageSelectBanner { .center_x(); let mut list = Scrollable::new(&mut self.selection_list) + .spacing(8) .height(Length::Fill) .width(Length::Fill) .align_items(Align::Start); @@ -236,23 +237,26 @@ impl LanguageSelectBanner { .zip(language_metadatas) .enumerate() { - let text = format!( - "{}{}", - if Some(i) == selected_language_index { - "-> " - } else { - " " - }, - lang.language_name, - ); + let color = if Some(i) == selected_language_index { + (97, 255, 18) + } else { + (97, 97, 25) + }; let button = Button::new( state, - Container::new(Text::new(text).size(fonts.cyri.scale(25))) - .padding(5) + Container::new(Text::new(lang.language_name.clone()).size(fonts.cyri.scale(25))) + .padding(16) .center_y(), ) + .style( + style::button::Style::new(imgs.selection) + .hover_image(imgs.selection_hover) + .press_image(imgs.selection_press) + .image_color(vek::Rgba::new(color.0, color.1, color.2, 192)), + ) .width(Length::Fill) - .on_press(Message::LangaugeChanged(i)); + .min_height(56) + .on_press(Message::LanguageChanged(i)); list = list.push(button); } diff --git a/voxygen/src/menu/main/ui/mod.rs b/voxygen/src/menu/main/ui/mod.rs index 2b04d69469..7e0144d70f 100644 --- a/voxygen/src/menu/main/ui/mod.rs +++ b/voxygen/src/menu/main/ui/mod.rs @@ -48,11 +48,14 @@ image_ids_ice! { loading_art: "voxygen.element.frames.loading_screen.loading_bg", loading_art_l: "voxygen.element.frames.loading_screen.loading_bg_l", loading_art_r: "voxygen.element.frames.loading_screen.loading_bg_r", + selection: "voxygen.element.frames.selection", + selection_hover: "voxygen.element.frames.selection_hover", + selection_press: "voxygen.element.frames.selection_press", } } // Randomly loaded background images -const BG_IMGS: [&str; 16] = [ +const BG_IMGS: [&str; 13] = [ "voxygen.background.bg_1", "voxygen.background.bg_2", "voxygen.background.bg_3", @@ -160,7 +163,7 @@ enum Message { #[cfg(feature = "singleplayer")] Singleplayer, Multiplayer, - LangaugeChanged(usize), + LanguageChanged(usize), OpenLanguageMenu, Username(String), Password(String), @@ -289,6 +292,7 @@ impl Controls { ), Screen::Servers { screen } => screen.view( &self.fonts, + &self.imgs, &settings.networking.servers, self.selected_server_index, &self.i18n, @@ -364,7 +368,7 @@ impl Controls { }); }, Message::Username(new_value) => self.login_info.username = new_value, - Message::LangaugeChanged(new_value) => { + Message::LanguageChanged(new_value) => { self.selected_language_index = Some(new_value); events.push(Event::ChangeLanguage(language_metadatas.remove(new_value))); }, diff --git a/voxygen/src/menu/main/ui/servers.rs b/voxygen/src/menu/main/ui/servers.rs index fe7bdb1631..5564c16cfa 100644 --- a/voxygen/src/menu/main/ui/servers.rs +++ b/voxygen/src/menu/main/ui/servers.rs @@ -1,12 +1,19 @@ -use super::Message; +use super::{Imgs, Message}; use crate::{ i18n::Localization, ui::{ fonts::IcedFonts as Fonts, - ice::{component::neat_button, style, Element}, + ice::{ + component::neat_button, + style, + widget::background_container::{BackgroundContainer, Padding}, + Element, + }, }, }; -use iced::{button, scrollable, Align, Button, Column, Container, Length, Scrollable, Text}; +use iced::{ + button, scrollable, Align, Button, Column, Container, Length, Row, Scrollable, Space, Text, +}; pub struct Screen { back_button: button::State, @@ -26,6 +33,7 @@ impl Screen { pub(super) fn view( &mut self, fonts: &Fonts, + imgs: &Imgs, servers: &[impl AsRef<str>], selected_server_index: Option<usize>, i18n: &Localization, @@ -44,6 +52,7 @@ impl Screen { .align_x(Align::Center); let mut list = Scrollable::new(&mut self.servers_list) + .spacing(8) .align_items(Align::Start) .width(Length::Fill) .height(Length::Fill); @@ -53,22 +62,26 @@ impl Screen { } for (i, (state, server)) in self.server_buttons.iter_mut().zip(servers).enumerate() { - let text = format!( - "{}{}", - if Some(i) == selected_server_index { - "-> " - } else { - " " - }, - server.as_ref(), - ); + let color = if Some(i) == selected_server_index { + (97, 255, 18) + } else { + (97, 97, 25) + }; let button = Button::new( state, - Container::new(Text::new(text).size(fonts.cyri.scale(25))) - .padding(5) - .center_y(), + Container::new(Text::new(server.as_ref()).size(fonts.cyri.scale(30))) + .padding(24) + .center_y() + .height(Length::Fill), + ) + .style( + style::button::Style::new(imgs.selection) + .hover_image(imgs.selection_hover) + .press_image(imgs.selection_press) + .image_color(vek::Rgba::new(color.0, color.1, color.2, 255)), ) .width(Length::Fill) + .min_height(100) .on_press(Message::ServerChanged(i)); list = list.push(button); }