change the text arrows in language select and server select with proper ui elements

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);
         }
 

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)));
             },

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);
         }