Calculator: Add a separator line between the menu and the main UI

2 files changed, 272 insertions, 261 deletions

diff --git a/Userland/Applications/Calculator/CalculatorWindow.gml b/Userland/Applications/Calculator/CalculatorWindow.gml
index 606e988f5a..f3bae0be4d 100644
--- a/Userland/Applications/Calculator/CalculatorWindow.gml
+++ b/Userland/Applications/Calculator/CalculatorWindow.gml
@@ -1,272 +1,283 @@
 @GUI::Widget {
     fixed_width: 254
-    fixed_height: 213
+    fixed_height: 215
     fill_with_background_color: true
-
-    layout: @GUI::VerticalBoxLayout {
-        margins: [10, 0, 10, 0]
-    }
-
-    @GUI::TextBox {
-        name: "entry_textbox"
-        font_type: "FixedWidth"
-    }
-
-    @GUI::Widget {
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Label {
-            name: "label"
-            fixed_width: 35
-            fixed_height: 27
-        }
-
-        @GUI::Widget {
-            fixed_width: 5
-        }
-
-        @GUI::Button {
-            name: "backspace_button"
-            text: "Backspace"
-            fixed_width: 65
-            fixed_height: 28
-            foreground_color: "brown"
-        }
-
-        @GUI::Button {
-            name: "clear_error_button"
-            text: "CE"
-            fixed_width: 55
-            fixed_height: 28
-            foreground_color: "brown"
-        }
-
-        @GUI::Button {
-            name: "clear_button"
-            text: "C"
-            fixed_width: 60
-            fixed_height: 28
-            foreground_color: "brown"
-        }
-    }
-
-    @GUI::Widget {
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Button {
-            name: "mem_clear_button"
-            text: "MC"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "red"
-        }
-
-        @GUI::Widget {
-            fixed_width: 5
-        }
-
-        @GUI::Button {
-            name: "7_button"
-            text: "7"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "8_button"
-            text: "8"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "9_button"
-            text: "9"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "divide_button"
-            text: "/"
-            fixed_width: 35
-            fixed_height: 28
-        }
-
-        @GUI::Button {
-            name: "sqrt_button"
-            text: "sqrt"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-    }
-
-    @GUI::Widget {
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Button {
-            name: "mem_recall_button"
-            text: "MR"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "red"
-        }
-
-        @GUI::Widget {
-            fixed_width: 5
-        }
-
-        @GUI::Button {
-            name: "4_button"
-            text: "4"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "5_button"
-            text: "5"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "6_button"
-            text: "6"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "multiply_button"
-            text: "*"
-            fixed_width: 35
-            fixed_height: 28
-        }
-
-        @GUI::Button {
-            name: "mod_button"
-            text: "%"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-    }
+    layout: @GUI::VerticalBoxLayout
 
     @GUI::Widget {
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Button {
-            name: "mem_save_button"
-            text: "MS"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "red"
-        }
-
-        @GUI::Widget {
-            fixed_width: 5
-        }
+        layout: @GUI::VerticalBoxLayout
 
-        @GUI::Button {
-            name: "1_button"
-            text: "1"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "2_button"
-            text: "2"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "3_button"
-            text: "3"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "subtract_button"
-            text: "-"
-            fixed_width: 35
-            fixed_height: 28
-        }
-
-        @GUI::Button {
-            name: "inverse_button"
-            text: "1/x"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-    }
-
-    @GUI::Widget {
-        layout: @GUI::HorizontalBoxLayout
-
-        @GUI::Button {
-            name: "mem_add_button"
-            text: "M+"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "red"
+        @GUI::HorizontalSeparator {
+            fixed_height: 2
         }
 
         @GUI::Widget {
-            fixed_width: 5
-        }
-
-        @GUI::Button {
-            name: "0_button"
-            text: "0"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "sign_button"
-            text: "+/-"
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "decimal_button"
-            text: "."
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "blue"
-        }
-
-        @GUI::Button {
-            name: "add_button"
-            text: "+"
-            fixed_width: 35
-            fixed_height: 28
-        }
-
-        @GUI::Button {
-            name: "equal_button"
-            text: "="
-            fixed_width: 35
-            fixed_height: 28
-            foreground_color: "red"
+            layout: @GUI::VerticalBoxLayout {
+                margins: [10, 2, 10, 0]
+            }
+
+            @GUI::TextBox {
+                name: "entry_textbox"
+                font_type: "FixedWidth"
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout
+
+                @GUI::Label {
+                    name: "label"
+                    fixed_width: 35
+                    fixed_height: 27
+                }
+
+                @GUI::Widget {
+                    fixed_width: 5
+                }
+
+                @GUI::Button {
+                    name: "backspace_button"
+                    text: "Backspace"
+                    fixed_width: 65
+                    fixed_height: 28
+                    foreground_color: "brown"
+                }
+
+                @GUI::Button {
+                    name: "clear_error_button"
+                    text: "CE"
+                    fixed_width: 55
+                    fixed_height: 28
+                    foreground_color: "brown"
+                }
+
+                @GUI::Button {
+                    name: "clear_button"
+                    text: "C"
+                    fixed_width: 60
+                    fixed_height: 28
+                    foreground_color: "brown"
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout
+
+                @GUI::Button {
+                    name: "mem_clear_button"
+                    text: "MC"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "red"
+                }
+
+                @GUI::Widget {
+                    fixed_width: 5
+                }
+
+                @GUI::Button {
+                    name: "7_button"
+                    text: "7"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "8_button"
+                    text: "8"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "9_button"
+                    text: "9"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "divide_button"
+                    text: "/"
+                    fixed_width: 35
+                    fixed_height: 28
+                }
+
+                @GUI::Button {
+                    name: "sqrt_button"
+                    text: "sqrt"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout
+
+                @GUI::Button {
+                    name: "mem_recall_button"
+                    text: "MR"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "red"
+                }
+
+                @GUI::Widget {
+                    fixed_width: 5
+                }
+
+                @GUI::Button {
+                    name: "4_button"
+                    text: "4"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "5_button"
+                    text: "5"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "6_button"
+                    text: "6"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "multiply_button"
+                    text: "*"
+                    fixed_width: 35
+                    fixed_height: 28
+                }
+
+                @GUI::Button {
+                    name: "mod_button"
+                    text: "%"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout
+
+                @GUI::Button {
+                    name: "mem_save_button"
+                    text: "MS"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "red"
+                }
+
+                @GUI::Widget {
+                    fixed_width: 5
+                }
+
+                @GUI::Button {
+                    name: "1_button"
+                    text: "1"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "2_button"
+                    text: "2"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "3_button"
+                    text: "3"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "subtract_button"
+                    text: "-"
+                    fixed_width: 35
+                    fixed_height: 28
+                }
+
+                @GUI::Button {
+                    name: "inverse_button"
+                    text: "1/x"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout
+
+                @GUI::Button {
+                    name: "mem_add_button"
+                    text: "M+"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "red"
+                }
+
+                @GUI::Widget {
+                    fixed_width: 5
+                }
+
+                @GUI::Button {
+                    name: "0_button"
+                    text: "0"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "sign_button"
+                    text: "+/-"
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "decimal_button"
+                    text: "."
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "blue"
+                }
+
+                @GUI::Button {
+                    name: "add_button"
+                    text: "+"
+                    fixed_width: 35
+                    fixed_height: 28
+                }
+
+                @GUI::Button {
+                    name: "equal_button"
+                    text: "="
+                    fixed_width: 35
+                    fixed_height: 28
+                    foreground_color: "red"
+                }
+            }
         }
     }
 }
diff --git a/Userland/Applications/Calculator/main.cpp b/Userland/Applications/Calculator/main.cpp
index 5022b3da98..257525cf6a 100644
--- a/Userland/Applications/Calculator/main.cpp
+++ b/Userland/Applications/Calculator/main.cpp
@@ -62,7 +62,7 @@ int main(int argc, char** argv)
     auto window = GUI::Window::construct();
     window->set_title("Calculator");
     window->set_resizable(false);
-    window->resize(254, 213);
+    window->resize(254, 215);
 
     auto& widget = window->set_main_widget<CalculatorWidget>();