displaying register

client/src/components/intro/intro.rs

@@ -33,7 +33,7 @@ impl IntroState {
             .direction(Direction::Vertical)
             .constraints([
                 Constraint::Percentage(40),
-                Constraint::Length(5), // Increased to accommodate 3 buttons
+                Constraint::Length(5),
                 Constraint::Percentage(40),
             ])
             .split(inner_area);
@@ -48,51 +48,44 @@ impl IntroState {
             .alignment(Alignment::Center);
         f.render_widget(title_para, chunks[1]);
 
-        // Buttons - now with 3 options
+        // Buttons - now with 4 options
         let button_area = Layout::default()
             .direction(Direction::Horizontal)
             .constraints([
-                Constraint::Percentage(33),
-                Constraint::Percentage(33),
-                Constraint::Percentage(33),
+                Constraint::Percentage(25),
+                Constraint::Percentage(25),
+                Constraint::Percentage(25),
+                Constraint::Percentage(25),
             ])
             .split(chunks[1].inner(Margin {
                 horizontal: 1,
                 vertical: 1
             }));
 
+        let buttons = ["Continue", "Admin", "Login", "Register"];
+        for (i, &text) in buttons.iter().enumerate() {
             self.render_button(
                 f,
-            button_area[0],
-            "Continue",
-            self.selected_option == 0,
-            theme,
-        );
-        self.render_button(
-            f,
-            button_area[1],
-            "Admin",
-            self.selected_option == 1,
-            theme,
-        );
-        self.render_button(
-            f,
-            button_area[2],
-            "Login",
-            self.selected_option == 2,
+                button_area[i],
+                text,
+                self.selected_option == i,
                 theme,
             );
         }
+    }
 
     fn render_button(&self, f: &mut Frame, area: Rect, text: &str, selected: bool, theme: &Theme) {
-        let button_style = if selected {
-            Style::default()
-                .fg(theme.highlight)
+        let button_style = Style::default()
+            .fg(if selected { theme.highlight } else { theme.fg })
             .bg(theme.bg)
-                .add_modifier(ratatui::style::Modifier::BOLD)
+            .add_modifier(if selected {
+                ratatui::style::Modifier::BOLD
             } else {
-            Style::default().fg(theme.fg).bg(theme.bg)
-        };
+                ratatui::style::Modifier::empty()
+            });
+
+        let border_style = Style::default()
+            .fg(if selected { theme.accent } else { theme.border });
 
         let button = Paragraph::new(text)
             .style(button_style)
@@ -101,21 +94,17 @@ impl IntroState {
                 Block::default()
                     .borders(Borders::ALL)
                     .border_type(BorderType::Double)
-                    .border_style(if selected {
-                        Style::default().fg(theme.accent)
-                    } else {
-                        Style::default().fg(theme.border)
-                    }),
+                    .border_style(border_style),
             );
 
         f.render_widget(button, area);
     }
 
     pub fn next_option(&mut self) {
-        self.selected_option = (self.selected_option + 1) % 3;
+        self.selected_option = (self.selected_option + 1) % 4;
     }
 
     pub fn previous_option(&mut self) {
-        self.selected_option = if self.selected_option == 0 { 2 } else { self.selected_option - 1 };
+        self.selected_option = if self.selected_option == 0 { 3 } else { self.selected_option - 1 };
     }
 }

client/src/tui/functions/common/login.rs

@@ -1,4 +1,5 @@
 // src/tui/functions/common/login.rs
+
 use crate::services::auth::AuthClient;
 use crate::state::pages::auth::AuthState;
 use crate::state::state::AppState;

client/src/tui/functions/intro.rs

@@ -17,6 +17,12 @@ pub fn handle_intro_selection(app_state: &mut AppState, index: usize) { // Add i
             app_state.ui.show_admin = false;
             app_state.ui.show_login = true;
         }
+        3 => { // Register
+            app_state.ui.show_intro = false;
+            app_state.ui.show_register = true;
+            app_state.ui.focus_outside_canvas = false;
+            app_state.general.selected_item = 0;
+        }
         _ => {}
     }
     app_state.ui.show_intro = false;