Apply app style to AccountLoginView

Signed-off-by: kernelkind <kernelkind@gmail.com>
Signed-off-by: William Casarin <jb55@jb55.com>

src/account_login_view.rs

@@ -1,12 +1,11 @@
-use crate::colors::{
+use crate::app_style::NotedeckTextStyle;
-    ALMOST_WHITE, DARKER_BG, DARK_BG_1, DARK_ISH_BG, GRAY_SECONDARY, RED_700, SEMI_DARKER_BG, WHITE,
-};
 use crate::key_parsing::{perform_key_retrieval, LoginError};
 use crate::login_manager::LoginManager;
 use egui::{
-    epaint::Shadow, Align, Align2, Button, Color32, Frame, Id, LayerId, Margin, Pos2, Rect,
+    Align, Align2, Button, Color32, Frame, Id, LayerId, Margin, Pos2, Rect,
     RichText, Rounding, Ui, Vec2, Window,
 };
+use egui::{Image, TextBuffer, TextEdit};
 
 pub struct AccountLoginView<'a> {
     ctx: &'a egui::Context,
@@ -22,12 +21,9 @@ impl<'a> AccountLoginView<'a> {
             generate_y_intercept: None,
         }
     }
+
     pub fn panel(&mut self) {
-        let frame = egui::CentralPanel::default().frame(Frame {
+        let frame = egui::CentralPanel::default();
-            inner_margin: Margin::same(0.0),
-            fill: DARKER_BG,
-            ..Default::default()
-        });
 
         let screen_width = self.ctx.screen_rect().max.x;
         let screen_height = self.ctx.screen_rect().max.y;
@@ -64,9 +60,10 @@ impl<'a> AccountLoginView<'a> {
                 ),
             };
 
+            let top_background_color = ui.visuals().noninteractive().bg_fill;
             ui.painter_at(top_rect)
                 .with_layer_id(LayerId::background())
-                .rect_filled(top_rect, Rounding::ZERO, DARK_ISH_BG);
+                .rect_filled(top_rect, Rounding::ZERO, top_background_color);
         });
     }
 
@@ -86,37 +83,16 @@ impl<'a> AccountLoginView<'a> {
             .resizable(false)
             .anchor(Align2::CENTER_CENTER, [0f32, y_offset])
             .max_width(538.0)
-            .frame(
+            .frame(egui::Frame::window(ui.style()).inner_margin(Margin::ZERO))
-                egui::Frame::default()
-                    .fill(DARK_ISH_BG)
-                    .rounding(egui::Rounding::from(32f32))
-                    .stroke(egui::Stroke::new(1.0, DARK_BG_1))
-                    .shadow(Shadow {
-                        offset: [0.0, 8.0].into(),
-                        blur: 24.0,
-                        spread: 0.0,
-                        color: egui::Color32::from_rgba_unmultiplied(0x6D, 0x6D, 0x6D, 0x14),
-                    }),
-            )
             .show(ui.ctx(), |ui| {
                 ui.vertical_centered(|ui| {
                     ui.add_space(40.0);
-                    ui.label(
+
-                        RichText::new("Login")
+                    ui.label(login_title_text());
-                            .size(24f32)
-                            .color(WHITE)
-                            .strong()
-                            .line_height(Some(36f32)),
-                    );
 
                     ui.add_space(16f32);
 
-                    ui.label(
+                    ui.label(login_window_info_text(ui));
-                        RichText::new("Enter your private key to start using Notedeck")
-                            .size(13f32)
-                            .color(GRAY_SECONDARY)
-                            .line_height(Some(19.5)),
-                    );
 
                     ui.add_space(24.0);
 
@@ -130,9 +106,9 @@ impl<'a> AccountLoginView<'a> {
 
                     let y_margin: f32 = 24.0;
                     let generate_frame = egui::Frame::default()
-                        .fill(Color32::from_rgb(0x26, 0x26, 0x26)) // TODO: gradient
+                        .fill(ui.style().noninteractive().bg_fill) // TODO: gradient
-                        .rounding(egui::Rounding::from(32f32))
+                        .rounding(ui.style().visuals.window_rounding)
-                        .stroke(egui::Stroke::new(1.0, DARK_BG_1))
+                        .stroke(ui.style().noninteractive().bg_stroke)
                         .inner_margin(Margin::symmetric(48.0, y_margin));
 
                     generate_frame.show(ui, |ui| {
@@ -146,8 +122,7 @@ impl<'a> AccountLoginView<'a> {
 
     fn top_title_area(&mut self, ui: &mut egui::Ui) {
         ui.vertical_centered(|ui| {
-            let logo_gradient_data = egui::include_image!("../assets/Logo-Gradient-2x.png");
+            ui.add(logo_unformatted().max_width(232.0));
-            ui.add(egui::Image::new(logo_gradient_data).max_width(232.0));
 
             ui.add_space(48.0);
 
@@ -162,40 +137,20 @@ impl<'a> AccountLoginView<'a> {
             //         .strong()
             //         .line_height(Some(72.0)),
             // );
-            ui.label(
+            ui.label(login_info_text());
-                RichText::new("The best alternative to tweetDeck built in nostr protocol")
-                    .size(24.0)
-                    .line_height(Some(36.0))
-                    .color(ALMOST_WHITE),
-            );
         });
     }
 
     fn login_form(&mut self, ui: &mut egui::Ui) {
         ui.vertical_centered_justified(|ui| {
             ui.horizontal(|ui| {
-                ui.label(
+                ui.label(login_textedit_info_text());
-                    RichText::new("Enter your key")
-                        .color(WHITE)
-                        .strong()
-                        .line_height(Some(19.5f32))
-                        .size(13f32),
-                );
             });
 
             ui.add_space(8f32);
 
             ui.add(
-                egui::TextEdit::singleline(&mut self.manager.login_key)
+                login_textedit(&mut self.manager.login_key).min_size(Vec2::new(440.0, 40.0)),
-                    .hint_text(
-                        RichText::new("Your key here...")
-                            .size(13f32)
-                            .line_height(Some(19.5f32))
-                            .color(GRAY_SECONDARY),
-                    )
-                    .margin(Margin::symmetric(12.0, 12.0))
-                    .min_size(Vec2::new(440.0, 40.0))
-                    .vertical_align(Align::Center),
             );
 
             ui.add_space(8.0);
@@ -215,11 +170,11 @@ impl<'a> AccountLoginView<'a> {
             if let Some(err) = &self.manager.error {
                 ui.horizontal(|ui| {
                     let error_label = match err {
-                        LoginError::InvalidKey => {
+                        LoginError::InvalidKey => egui::Label::new(
-                            egui::Label::new(RichText::new("Invalid key.").color(RED_700))
+                            RichText::new("Invalid key.").color(ui.visuals().error_fg_color),
-                        }
+                        ),
                         LoginError::Nip05Failed(e) => {
-                            egui::Label::new(RichText::new(e).color(RED_700))
+                            egui::Label::new(RichText::new(e).color(ui.visuals().error_fg_color))
                         }
                     };
                     ui.add(error_label.truncate(true));
@@ -228,16 +183,7 @@ impl<'a> AccountLoginView<'a> {
 
             ui.add_space(8.0);
 
-            let login_button = Button::new(
+            let login_button = login_button().min_size(Vec2::new(442.0, 40.0));
-                RichText::new("Login now — let's do this!")
-                    .line_height(Some(16.25f32))
-                    .strong()
-                    .size(13f32)
-                    .color(WHITE),
-            )
-            .rounding(Rounding::same(8f32))
-            .min_size(Vec2::new(442.0, 40.0))
-            .fill(Color32::from_rgb(0xF8, 0x69, 0xB6)); // TODO: gradient
 
             if ui.add(login_button).clicked() {
                 self.manager.promise = Some(perform_key_retrieval(&self.manager.login_key));
@@ -247,40 +193,81 @@ impl<'a> AccountLoginView<'a> {
 
     fn generate_group(&mut self, ui: &mut egui::Ui) {
         ui.horizontal(|ui| {
-            ui.label(
+            ui.label(RichText::new("New in nostr?").text_style(NotedeckTextStyle::Heading3.text_style()));
-                RichText::new("New in nostr?")
-                    .size(20f32)
-                    .line_height(Some(30f32))
-                    .color(ALMOST_WHITE),
-            );
 
             ui.label(
                 RichText::new(" — we got you!")
-                    .size(20f32)
+                    .text_style(NotedeckTextStyle::Heading3.text_style())
-                    .line_height(Some(30f32))
+                    .color(ui.visuals().noninteractive().fg_stroke.color),
-                    .color(GRAY_SECONDARY),
             );
         });
 
         ui.add_space(6.0);
 
         ui.horizontal(|ui| {
-            ui.label(
+            ui.label(generate_info_text().color(ui.visuals().noninteractive().fg_stroke.color));
-                RichText::new("Quickly generate your keys. Make sure you save them safely.")
-                    .color(GRAY_SECONDARY)
-                    .size(13f32)
-                    .line_height(Some(19.5f32)),
-            );
         });
 
         ui.add_space(16.0);
 
-        let generate_button = Button::new(RichText::new("Generate keys").color(WHITE))
+        let generate_button = generate_keys_button().min_size(Vec2::new(442.0, 40.0));
-            .fill(SEMI_DARKER_BG)
-            .min_size(Vec2::new(442.0, 40.0))
-            .rounding(Rounding::same(8.0));
         if ui.add(generate_button).clicked() {
             // TODO: keygen
         }
     }
 }
+
+fn login_title_text() -> RichText {
+    RichText::new("Login")
+        .text_style(NotedeckTextStyle::Heading2.text_style())
+        .strong()
+}
+
+fn login_info_text() -> RichText {
+    RichText::new("The best alternative to tweetDeck built in nostr protocol")
+        .text_style(NotedeckTextStyle::Heading3.text_style())
+}
+
+fn login_window_info_text(ui: &Ui) -> RichText {
+    RichText::new("Enter your private key to start using Notedeck")
+        .text_style(NotedeckTextStyle::Body.text_style())
+        .color(ui.visuals().noninteractive().fg_stroke.color)
+}
+
+fn login_textedit_info_text() -> RichText {
+    RichText::new("Enter your key")
+        .strong()
+        .text_style(NotedeckTextStyle::Body.text_style())
+}
+
+fn logo_unformatted() -> Image<'static> {
+    let logo_gradient_data = egui::include_image!("../assets/Logo-Gradient-2x.png");
+    return egui::Image::new(logo_gradient_data);
+}
+
+fn generate_info_text() -> RichText {
+    RichText::new("Quickly generate your keys. Make sure you save them safely.")
+        .text_style(NotedeckTextStyle::Body.text_style())
+}
+
+fn generate_keys_button() -> Button<'static> {
+    Button::new(RichText::new("Generate keys").text_style(NotedeckTextStyle::Body.text_style()))
+}
+
+fn login_button() -> Button<'static> {
+    Button::new(
+        RichText::new("Login now — let's do this!")
+            .text_style(NotedeckTextStyle::Body.text_style())
+            .strong(),
+    )
+    .fill(Color32::from_rgb(0xF8, 0x69, 0xB6)) // TODO: gradient
+    .min_size(Vec2::new(0.0, 40.0))
+}
+
+fn login_textedit(text: &mut dyn TextBuffer) -> TextEdit {
+    egui::TextEdit::singleline(text)
+        .hint_text(RichText::new("Your key here...").text_style(NotedeckTextStyle::Body.text_style()))
+        .vertical_align(Align::Center)
+        .min_size(Vec2::new(0.0, 40.0))
+        .margin(Margin::same(12.0))
+}

src/colors.rs

@@ -2,18 +2,16 @@ use egui::Color32;
 
 pub const PURPLE: Color32 = Color32::from_rgb(0xCC, 0x43, 0xC5);
 //pub const DARK_BG: Color32 = egui::Color32::from_rgb(40, 44, 52);
-pub const GRAY_SECONDARY: Color32 = Color32::from_rgb(0x8A, 0x8A, 0x8A);
+const GRAY_SECONDARY: Color32 = Color32::from_rgb(0x8A, 0x8A, 0x8A);
-pub const WHITE: Color32 = Color32::from_rgb(0xFF, 0xFF, 0xFF);
+const WHITE: Color32 = Color32::from_rgb(0xFF, 0xFF, 0xFF);
-pub const ALMOST_WHITE: Color32 = Color32::from_rgb(0xFA, 0xFA, 0xFA);
 const BLACK: Color32 = Color32::from_rgb(0x00, 0x00, 0x00);
-pub const RED_700: Color32 = Color32::from_rgb(0xC7, 0x37, 0x5A);
+const RED_700: Color32 = Color32::from_rgb(0xC7, 0x37, 0x5A);
 
 // BACKGROUNDS
-pub const SEMI_DARKER_BG: Color32 = Color32::from_rgb(0x39, 0x39, 0x39);
+const SEMI_DARKER_BG: Color32 = Color32::from_rgb(0x39, 0x39, 0x39);
-pub const DARKER_BG: Color32 = Color32::from_rgb(0x1E, 0x1E, 0x1E);
+const DARKER_BG: Color32 = Color32::from_rgb(0x1E, 0x1E, 0x1E);
 const DARK_BG: Color32 = Color32::from_rgb(0x2C, 0x2C, 0x2C);
-pub const DARK_BG_1: Color32 = DARKER_BG;
+const DARK_ISH_BG: Color32 = Color32::from_rgb(0x22, 0x22, 0x22);
-pub const DARK_ISH_BG: Color32 = Color32::from_rgb(0x22, 0x22, 0x22);
 const SEMI_DARK_BG: Color32 = Color32::from_rgb(0x44, 0x44, 0x44);
 
 const LIGHT_GRAY: Color32 = Color32::from_rgb(0xc8, 0xc8, 0xc8); // 78%