feat: Enhance UI components and layout

- Added Flowbite and Flowbite-React for improved UI components.
- Updated App.css to set a dark background for the body.
- Refactored App.tsx to use MainLayout for better structure.
- Improved TerminalView with dynamic colors from appConfig.
- Simplified Button component and removed unused buttonVariants.
- Updated Navbar01 to use new Button component and dynamic colors.
- Introduced COLORS configuration for consistent theming.
- Enhanced Dashboard with responsive table and styling.
- Updated SchemaPage to utilize new Button component and dynamic styles.
- Improved TestDetailsPane layout and integrated new Button component.
- Created Footer component for consistent footer layout.
- Added main-layout component to encapsulate the overall layout.
- Introduced Button.module.scss for button styling.

Author: eddyseed

frontend/package-lock.json

@@ -20,6 +20,8 @@
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "flowbite": "^3.1.2",
+    "flowbite-react": "^0.12.9",
     "js-yaml": "^4.1.0",
     "lucide-react": "^0.542.0",
     "openapi-types": "^12.1.3",
@@ -28,6 +30,7 @@
     "react-hook-form": "^7.62.0",
     "react-hot-toast": "^2.6.0",
     "socket.io-client": "^4.8.1",
+    "styled-components": "^6.1.19",
     "tailwind-merge": "^3.3.1",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",

frontend/package.json

@@ -1,3 +1,7 @@
-.m{
+.m {
     border: 2px solid red;
+}
+
+body {
+    background: #020618;
 }

frontend/src/App.css

@@ -5,10 +5,7 @@ import { LoadingProvider } from './context/LoadingProvider'
 import { OpenApiProvider } from './context/openApiProvider'
 import { TerminalProvider } from './context/TerminalProvider'
 import { TestRunnerProvider } from './context/TestRunnerProvider'
-import Dashboard from './features/dashboard'
-import SchemaPage from './features/schema-input'
-import TestDetailsPane from './features/test-details'
-import TestRunner from './features/test-runner'
+import MainLayout from './layout/main-layout'
 function App() {
   return (
     <>
@@ -17,11 +14,7 @@ function App() {
           <FileProvider>
             <TerminalProvider>
               <LoadingProvider>
-                <Navbar01 />
-                <SchemaPage />
-                <TestDetailsPane />
-                <TestRunner />
-                <Dashboard />
+                <MainLayout Navbar={Navbar01} />
               </LoadingProvider>
             </TerminalProvider>
           </FileProvider>

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { Terminal } from "xterm";
 import "xterm/css/xterm.css";
 import { useWebSocket } from "../hooks/useWebSocket";
 import { useTerminal } from "@/hooks/useTerminal";
+import { COLORS } from "@/config/appConfig";
 
 export default function TerminalView() {
     const terminalRef = useRef<HTMLDivElement | null>(null);
@@ -20,8 +21,8 @@ export default function TerminalView() {
             fontFamily: "'Fira Code', monospace",
             fontSize: 14,
             theme: {
-                background: "#0f0f1f",   // dark background
-                foreground: "#00ffff",   // neon cyan text
+                background: COLORS.primary,   // dark background
+                foreground: COLORS.text,   // neon cyan text
                 cursor: "#00ffff",       // neon cursor 
             }
         });
@@ -54,13 +55,12 @@ export default function TerminalView() {
     }, [messages, isConnected, error]);
 
     return (
-        <div
+        <div className="px-4 py-2"
             ref={terminalRef}
             style={{
                 width: "100%",
                 height: "300px",
-                backgroundColor: "#1e1e1e",
-                borderRadius: "8px",
+                backgroundColor: COLORS.background,
                 overflow: "hidden",
             }}
         />

frontend/src/components/TerminalView.tsx

@@ -1,30 +1,12 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "./button/buttonVariants"
-
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
+import styles from '../../styles/Button.module.scss';
+import type { ReactNode } from 'react';
+const Button = ({ variant = 'primary', children, ...props }: { variant?: string, children: ReactNode }) => {
+  const className = styles[variant];
 
   return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button }
+    <button className={`${className}`} {...props}>
+      {children}
+    </button>
+  );
+};
+export default Button;

frontend/src/components/ui/button.tsx

@@ -0,0 +1,36 @@
+import { COLORS } from '@/config/appConfig';
+import React from 'react';
+
+const Footer: React.FC = () => {
+    return (
+
+
+        <footer className="rounded-lg shadow-sm m-4" style={{ background: COLORS.background }}>
+            <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+                <div className="sm:flex sm:items-center sm:justify-between">
+                    <a href="#" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                        <img src="/favicon-16x16.png" className="h-8" alt="Website Logo" />
+                        <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">OpenAPI Tool</span>
+                    </a>
+                    <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">About Developer</a>
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">GitHub Fork</a>
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline">Contact</a>
+                        </li>
+                    </ul>
+                </div>
+                <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+                <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400"> <a href="#" className="hover:underline">Rishabh Jain</a> made with Love</span>
+            </div>
+        </footer>
+
+
+    );
+};
+
+export default Footer;

frontend/src/components/ui/button/buttonVariants.ts

@@ -1,18 +1,17 @@
+import { COLORS } from '@/config/appConfig';
 import React from 'react';
+import Button from './button';
 
 const Navbar01: React.FC = () => {
     return (
-        <nav className="bg-white dark:bg-gray-900 w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
+        <nav className={`w-full z-20 top-0 start-0 border-b`} style={{ backgroundColor: COLORS.primary }}>
             <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                 <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
                     <img src="/favicon-16x16.png" className="h-8" alt="Website Logo" />
-                    <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">OpenAPI Tester</span>
+                    <span className="self-center text-xl font-semibold whitespace-nowrap text-white">OpenAPI Tool</span>
                 </a>
                 <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-                    <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-
-                        <a href="https://github.com/eddyseed/" target='_blank'>Contact</a>
-                    </button>
+                    <Button variant="secondary">Contact Us</Button>
                     <button data-collapse-toggle="navbar-sticky" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
                         <span className="sr-only">Open main menu</span>
                         <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -21,18 +20,29 @@ const Navbar01: React.FC = () => {
                     </button>
                 </div>
                 <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
-                    <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                    <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0">
                         <li>
-                            <a href="#" className="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</a>
+                            <a href="#" className="block py-2 px-3 rounded-sm md:p-0" aria-current="page" style={{
+                                color: COLORS.text
+                            }}>Home</a>
                         </li>
                         <li>
-                            <a href="#TEST_DETAILS_PANE" className="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Test Details</a>
+                            <a href="#TEST_DETAILS_PANE" className="block py-2 px-3 rounded-sm md:p-0" style={{
+                                color: COLORS.secondary,
+                            }} onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.text)}
+                                onMouseLeave={(e) => (e.currentTarget.style.color = COLORS.secondary)}>Test Details</a>
                         </li>
                         <li>
-                            <a href="#TERMINAL" className="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Shell Logs</a>
+                            <a href="#TERMINAL" className="block py-2 px-3 rounded-sm md:p-0" style={{
+                                color: COLORS.secondary,
+                            }} onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.text)}
+                                onMouseLeave={(e) => (e.currentTarget.style.color = COLORS.secondary)}>Shell Logs</a>
                         </li>
                         <li>
-                            <a href="#DASHBOARD" className="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Dashboard</a>
+                            <a href="#DASHBOARD" className="block py-2 px-3 rounded-sm md:p-0" style={{
+                                color: COLORS.secondary,
+                            }} onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.text)}
+                                onMouseLeave={(e) => (e.currentTarget.style.color = COLORS.secondary)}>Dashboard</a>
                         </li>
                     </ul>
                 </div>

frontend/src/components/ui/footer.tsx

@@ -0,0 +1,10 @@
+export const COLORS = {
+    primary: '#0D1B1E',
+    background: '#0D1117',
+    secondary: '#6B8F71',
+    text: '#C3DBC5',
+    text_hover: '#F51AA4'
+}
+export const URLS =     {
+
+}