improved buttons ui

Author: Ritika Mishra

src/app/serial-plotter/page.tsx

@@ -325,7 +325,7 @@ const SerialPlotter = () => {
                 {viewMode !== "plotter" && (
                     <div
                         ref={rawDataRef}
-                        className={`w-full border rounded-xl shadow-lg bg-[#1a1a2e] text-white overflow-auto flex flex-col flex-grow ${viewMode === "both" ? "min-h-[55vh]" : "min-h-[50vh]"}`}
+                        className={`w-full border rounded-xl shadow-lg bg-[#1a1a2e] text-white overflow-auto flex flex-col flex-grow ${viewMode === "both" ? "min-h-[30vh]" : "min-h-[35vh]"}`}
                     >
                         {/* Title Bar with Input and Buttons */}
                         <div className="sticky top-0 flex items-center justify-between bg-[#1a1a2e] p-2 z-10">
@@ -334,39 +334,47 @@ const SerialPlotter = () => {
                                 type="text"
                                 value={command}
                                 onChange={(e) => setCommand(e.target.value)}
-                                placeholder="Enter command (START)"
-                                className="w-full p-2 rounded bg-gray-800 text-white border border-gray-600 text-xs"
+                                placeholder="Enter command"
+                                className="w-full p-2 text-xs font-semibold rounded bg-gray-800 text-white border border-gray-600"
+                                style={{ height: '36px' }} // Ensure the height is consistent with buttons
                             />
 
                             {/* Buttons (Shifted Left) */}
                             <div className="flex items-center space-x-2 mr-auto">
-                                <Button onClick={sendCommand} className="px-3 py-1 text-xs font-semibold">Send</Button>
+                                <Button
+                                    onClick={sendCommand}
+                                    className="px-4 py-2 text-xs font-semibold bg-gray-500 rounded shadow-md hover:bg-gray-500 transition ml-2"
+                                    style={{ height: '36px' }} // Set height equal to the input box
+                                >
+                                    Send
+                                </Button>
                                 <button
                                     onClick={() => setRawData("")}
-                                    className="px-3 py-1 text-xs bg-red-600 text-white rounded shadow-md hover:bg-red-700 transition"
+                                    className="px-4 py-2 text-xs bg-red-600 text-white rounded shadow-md hover:bg-red-700 transition"
+                                    style={{ height: '36px' }} // Set height equal to the input box
                                 >
                                     Clear
                                 </button>
                             </div>
                         </div>
 
+
                         {/* Data Display */}
-                        <pre className="text-xs whitespace-pre-wrap break-words px-4 pb-4 flex-grow overflow-auto">
+                        <pre className="text-xs whitespace-pre-wrap break-words px-4 pb-4 flex-grow overflow-auto rounded-xl">
                             {rawData}
                         </pre>
                     </div>
                 )}
-
             </div>
+
             {/* Footer Section */}
-            <footer className="flex flex-col gap-2 sm:flex-row py-2 m-2 w-full shrink-0 items-center justify-center px-2 md:px-4 border-t">
+            <footer className="flex flex-col gap-2 sm:flex-row py-2 m-2 w-full shrink-0 items-center justify-center px-2 md:px-4">
 
                 {/* Connection Button */}
                 <div className="flex justify-center">
                     <Button
                         onClick={isConnected ? disconnectSerial : connectToSerial}
-                        className={`px-4 py-2 text-sm font-semibold transition rounded-xl ${isConnected ? " text-base" : "text-base"
-                            }`}
+                        className={`px-4 py-2 text-sm font-semibold transition rounded-xl ${isConnected ? "text-sm" : "text-sm"}`}
                     >
                         {isConnected ? "Disconnect" : "Connect Serial"}
                     </Button>
@@ -393,18 +401,19 @@ const SerialPlotter = () => {
 
                 {/* Baud Rate Selector */}
                 <div className="flex items-center space-x-2">
-                    <label className="text-xs font-semibold">Baud Rate:</label>
+                    <label className="text-sm font-semibold">Baud Rate:</label>
                     <select
                         value={baudRateref.current}
                         onChange={(e) => handleBaudRateChange(Number(e.target.value))}
-                        className="p-1 border rounded bg-gray-800 text-white text-xs"
+                        className="p-1 border rounded bg-gray-800 text-white text-sm"
                     >
                         {[9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600].map((rate) => (
                             <option key={rate} value={rate}>{rate}</option>
                         ))}
                     </select>
                 </div>
             </footer>
+
         </div>
     );
 };