Merge pull request #242 from bkjwjason/docs/2101

nus-cs2103-AY2324S1 · Nov 15, 2023 · 148e87e · 148e87e
2 parents 58b97e9 + 0273d0f
commit 148e87e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/docs/UserGuide.md b/docs/UserGuide.md
@@ -160,6 +160,30 @@ If Java 11 is not installed, follow the instructions [here](https://www3.ntu.edu
 
 ## Navigating the GUI
 
+**Main Window**:
+<br>
+  <div style="display:flex; justify-content: center; align-items:center;">
+    <img src="images/marked_ui" alt="marked-ui" style="height: 300px; width: 550px; margin-bottom: 16px;">
+  </div>
+<br>
+
+Here are the components of the Graphical User Interface (GUI), and their details.
+
+<details open style="border: 1px solid grey; padding: 10px; border-radius: 5px;">
+<summary style="font-size: 20px; cursor: pointer;">GUI Components</summary>
+
+| Component Name      | Details                                                                                                                                  |
+|---------------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| Menu Bar            | Contains the drop down menus: **File** and **Help**.                                                                                     |
+| Command Input Box   | Text box for users to input commands.                                                                                                    |
+| Message Display Box | Box that displays result of command. Error messages will be displayed here as well.                                                      |
+| Animal Entries      | Contains information about individual animals currently at the shelter, including: Name, ID, Sex, Species and Breed of animal.           |
+| Selected Animal     | Animal that is selected either by left-clicking on the animal entry, or selected by a command. Selected animal is highlighted in orange. |
+| Detailed View       | Box that contains more details about the currently selected animal.                                                                      |
+
+</details>
+<br>
+
 [Back to Table of Contents](#table-of-contents)
 
 ---

diff --git a/docs/images/marked_ui.png b/docs/images/marked_ui.png