button sizes and annotation update

src/ui/elements/ui_button.cpp

@@ -1,24 +1,67 @@
 #include "ui_button.h"
+#include "ui_label.h"
 
 #include <cassert>
 
 namespace recompui {
 
-    Button::Button(Element *parent, const std::string &text, ButtonStyle style) : Element(parent, Events(EventType::Click, EventType::Hover, EventType::Enable, EventType::Focus), "button", true) {
+    Button::Button(Element *parent, const std::string &text, ButtonStyle style, ButtonSize size) : Element(parent, Events(EventType::Click, EventType::Hover, EventType::Enable, EventType::Focus), "button", false) {
         this->style = style;
+        this->size = size;
+        // Borders add width to the button, so this subtracts from the base size to bring it back to the expected size.
+        float float_size_internal = static_cast<float>(size) - (theme::border::width * 2.0f);
+
+        float base_padding = 24.0f;
+        switch (size) {
+            case ButtonSize::Small:
+                base_padding = 12.0f;
+                break;
+            case ButtonSize::Medium:
+                base_padding = 12.0f;
+                break;
+            case ButtonSize::Large:
+            default:
+                base_padding = 24.0f;
+                break;
+        }
+
+        const float button_padding_internal = base_padding - (theme::border::width * 2.0f);
 
         enable_focus();
 
-        set_text(text);
-        set_display(Display::Block);
-        set_padding(23.0f);
+        set_display(Display::Flex);
+        set_position(Position::Relative);
+        set_flex_direction(FlexDirection::Row);
+        set_align_items(AlignItems::Center);
+        set_justify_content(JustifyContent::Center);
+
+        set_padding_right(button_padding_internal);
+        set_padding_left(button_padding_internal);
+
+        set_width_auto();
+        set_height(float_size_internal);
+        set_min_height(float_size_internal);
+        set_max_height(float_size_internal);
+
         set_border_width(theme::border::width);
         set_border_radius(theme::border::radius_md);
-        set_font_size(28.0f);
-        set_letter_spacing(3.08f);
-        set_line_height(28.0f);
-        set_font_style(FontStyle::Normal);
-        set_font_weight(700);
+
+        ContextId context = get_current_context();
+
+        switch (size) {
+            case ButtonSize::Small: {
+                auto label = context.create_element<Label>(this, text, LabelStyle::Annotation);
+                break;
+            }
+            case ButtonSize::Medium:
+                context.create_element<Label>(this, text, LabelStyle::Small);
+                break;
+            case ButtonSize::Large:
+            default:
+                context.create_element<Label>(this, text, LabelStyle::Normal);
+                break;
+        }
+
         set_cursor(Cursor::Pointer);
         set_color(theme::color::Text);
         set_tab_index(TabIndex::Auto);

src/ui/elements/ui_button.h

@@ -14,9 +14,17 @@ namespace recompui {
         Basic, // No border, only shows background on hover or focus.
     };
 
+    enum class ButtonSize {
+        Small = 32,
+        Medium = 48,
+        Large = 72,
+        Default = Large
+    };
+
     class Button : public Element {
     protected:
         ButtonStyle style = ButtonStyle::Primary;
+        ButtonSize size = ButtonSize::Default;
         Style hover_style;
         Style focus_style;
         Style disabled_style;
@@ -27,7 +35,7 @@ namespace recompui {
         virtual void process_event(const Event &e) override;
         std::string_view get_type_name() override { return "Button"; }
     public:
-        Button(Element *parent, const std::string &text, ButtonStyle style);
+        Button(Element *parent, const std::string &text, ButtonStyle style, ButtonSize size = ButtonSize::Default);
         void add_pressed_callback(std::function<void()> callback);
         Style* get_hover_style() { return &hover_style; }
         Style* get_focus_style() { return &focus_style; }

src/ui/elements/ui_label.cpp

@@ -7,7 +7,6 @@ namespace recompui {
     Label::Label(Element *parent, LabelStyle label_style) : Element(parent, 0U, "div", true) {
         switch (label_style) {
         case LabelStyle::Annotation:
-            set_color(theme::color::Primary);
             set_font_size(18.0f);
             set_letter_spacing(2.52f);
             set_line_height(18.0f);

src/ui/ui_config_page_example.cpp

@@ -34,8 +34,12 @@ ElementConfigPageExample::ElementConfigPageExample(const Rml::String& tag) : Rml
     auto header = config_page->add_header();
     {
         auto header_left = header->get_left();
-        context.create_element<Button>(header_left, "Hello", ButtonStyle::Primary);
-        context.create_element<Button>(header_left, "Second button", ButtonStyle::Secondary);
+        context.create_element<Button>(header_left, "Primary", ButtonStyle::Primary);
+        context.create_element<Button>(header_left, "Secondary", ButtonStyle::Secondary);
+        context.create_element<Button>(header_left, "Large", ButtonStyle::Primary, ButtonSize::Large);
+        context.create_element<Button>(header_left, "Medium", ButtonStyle::Primary, ButtonSize::Medium);
+        context.create_element<Button>(header_left, "Small", ButtonStyle::Primary, ButtonSize::Small);
+
     }
     {
         auto header_right = header->get_right();

src/ui/ui_mod_details_panel.cpp

@@ -68,6 +68,7 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
             enable_toggle->set_nav_manual(NavDirection::Up, mod_tab_id);
 
             enable_label = context.create_element<Label>(enable_container, "A currently enabled mod requires this mod", LabelStyle::Annotation);
+            enable_label->set_color(theme::color::Primary);
         }
 
         configure_button = context.create_element<Button>(buttons_container, "Configure", recompui::ButtonStyle::Secondary);