Laren/UI fixes 4 22 25

README.md

@@ -40,7 +40,7 @@ Before gaining access to the Rabbitory Control Panel, use the Rabbitory CLI to d
 
 ## 🐰 Usage
 
-The Rabbitory Control Panel is the central hub for managing every part of your RabbitMQ instance — from creation to configuration to monitoring.
+The Rabbitory Control Panel is the central hub for managing every part of your RabbitMQ instance — from creation to configuration to monitoring. Rabbitory users receive a URL to their Control Panle after deploying their infrastructure with the custom cli tool. This Control Panel provides the following important features:
 
 ### Create a RabbitMQ Instance
 
@@ -118,6 +118,10 @@ For real-time insight, the Logs Page streams live logs straight from your server
 
 The Alarms Page keeps your team informed by providing notifications in your Slack workspace about critical CPU and disk usage metrics, helping you stay ahead of potential issues.
 
+<p>
+<img src="https://raw.githubusercontent.com/Rabbitory/rabbitory_control_panel/main/assets/alarms-page.png" alt="Alarms Page"/>
+</p>
+
 ---
 
 The Rabbitory Control Panel provides a powerful, intuitive interface for managing RabbitMQ instances on AWS. With features like one-click provisioning, real-time notifications, easy plugin management, and comprehensive firewall controls, it streamlines the complexities of RabbitMQ management. Whether you're monitoring performance, configuring instances, or setting alarms, Rabbitory offers full visibility and control—all from a clean, browser-based dashboard.

src/app/instances/[name]/alarms/components/Dropdown.tsx

@@ -16,14 +16,14 @@ interface DropdownOptionsProps {
 
 const DropdownOptions = ({ options, onOptionClick }: DropdownOptionsProps) => {
   return (
-    <ul className="absolute mt-1 min-w-[150px] bg-white border border-gray-300 rounded-lg shadow-lg left-0 z-50">
+    <ul className="font-heading1 text-headertext1 absolute mt-1 min-w-[150px] bg-card border border-pagetext1 rounded-sm left-0 z-50">
       {Object.keys(options).map((opt, idx) => (
         <li
           key={opt + idx}
           onClick={() => {
             onOptionClick(options[opt]);
           }}
-          className="px-4 py-2 hover:bg-gray-100 hover:border-gray-300 cursor-pointer border-b border-gray-300 last:border-none"
+          className="px-4 py-2 hover:text-btnhover1 cursor-pointer border-b border-pagetext1 last:border-none"
         >
           {opt}
         </li>
@@ -58,7 +58,8 @@ export default function Dropdown({ label, options }: DropdownProps) {
 
   return (
     <div className="relative inline-block" ref={dropdownRef}>
-      <button className="px-4 bg-gray-200 rounded-lg z-40" onClick={handleClick}>
+      <button className="font-heading1 px-4 bg-card text-btn1 border border-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card z-40" 
+      onClick={handleClick}>
         {label}
       </button>
       {isOpen && <DropdownOptions options={options} onOptionClick={handleOptionClick} />}