completes design

webapp/src/App.css

@@ -0,0 +1 @@
+

webapp/src/App.jsx

@@ -6,19 +6,24 @@ import LocalVariable from "./components/GdbComponents/LocalVariable/LocalVariabl
 import Context from "./components/GdbComponents/Context/Context";
 import MemoryMap from "./components/GdbComponents/MemoryMap/MemoryMap";
 import BreakPoints from "./components/GdbComponents/BreakPoints/BreakPoints";
+import Footer from "./components/Footer/Footer";
 
 const App = () => {
   return (
-    <Routes>
-      <Route path="debug" element={<Debug />}>
-        <Route path="threads" element={<Threads />} />
-        <Route path="localVariable" element={<LocalVariable />} />
-        <Route path="context" element={<Context />} />
-        <Route path="memoryMap" element={<MemoryMap />} />
-        <Route path="breakPoints" element={<BreakPoints />} />
-      </Route>
-      {/* You can add more routes here */}
-    </Routes>
+    <div>
+      <Routes>
+        <Route path="debug" element={<Debug />}>
+          <Route path="threads" element={<Threads />} />
+          <Route path="localVariable" element={<LocalVariable />} />
+          <Route path="context" element={<Context />} />
+          <Route path="memoryMap" element={<MemoryMap />} />
+          <Route path="breakPoints" element={<BreakPoints />} />
+        </Route>
+        {/* You can add more routes here */}
+      </Routes>
+
+      <Footer />
+    </div>
   );
 };
 

webapp/src/components/Footer/Footer.css

@@ -0,0 +1,7 @@
+.footer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+  background-color: rgb(2, 12, 22);
+}

webapp/src/components/Footer/Footer.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Footer.css";
+
+const Footer = () => {
+  return (
+    <div className="footer-container">
+      <p>Designed & Built with 💖 by Shubh Mehta</p>
+    </div>
+  );
+};
+
+export default Footer;

webapp/src/components/Functions/Functions.css

@@ -1,6 +1,6 @@
 .functions-parent {
   display: flex;
-  height: 70vh;
+  height: 100vh;
   padding: 10px;
   flex-direction: column;
   align-items: center;
@@ -21,7 +21,7 @@
   /* width: 100%; */
   display: flex;
   padding: 10px;
-  height: 57vh;
+  height: 87vh;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px;

webapp/src/components/FunctionsBottom/FunctionsBottom.css

@@ -0,0 +1,24 @@
+.function-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid var(--Gray-2, #4f4f4f);
+  padding: 10px 10px 10px 10px;
+}
+.function-bottom-heading {
+  display: flex;
+  width: 321px;
+  padding: 6px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: var(--primary-orange, #e88f40);
+}
+.function-bottom-container {
+  display: flex;
+  width: 322px;
+  height: 25px;
+  padding: 5px 10px;
+  justify-content: space-between;
+  align-items: center;
+}

webapp/src/components/FunctionsBottom/FunctionsBottom.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./FunctionsBottom.css";
+
+const FunctionsBottom = () => {
+  return (
+    <div className="function-bottom">
+      <div className="function-bottom-heading">Search</div>
+      <div>
+        <input
+          type="text"
+          className="function-bottom-container"
+          placeholder="Search"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FunctionsBottom;

webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx

@@ -23,7 +23,7 @@ const data = [
 const BreakPoints = () => {
   return (
     <div>
-      BreakPoints
+      {/* BreakPoints */}
       <div className="breakpoints">
         {data?.length > 0
           ? data.map((obj) => {

webapp/src/components/GdbComponents/Context/Context.jsx

@@ -4,7 +4,7 @@ import "./Context.css";
 const Context = () => {
   return (
     <div>
-      Context
+      {/* Context */}
       <div className="context">
         <a> $ cat /proc/24963/maps ... lots of stuff omitted ...</a>
         <a>

webapp/src/components/GdbComponents/LocalVariable/LocalVariable.jsx

@@ -4,7 +4,7 @@ import "./LocalVariable.css";
 const LocalVariable = () => {
   return (
     <div>
-      LocalVariable
+      {/* LocalVariable */}
       <div className="localVariable">
         <a>RAD_T 0.214124123 const double</a>
         <a>angle 380 double</a>

webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx

@@ -14,7 +14,7 @@ const data = [
 const MemoryMap = () => {
   return (
     <div>
-      MemoryMap
+      {/* MemoryMap */}
       <div className="memoryMap">
         {data?.length > 0
           ? data.map((obj) => {

webapp/src/components/GdbComponents/Threads/Threads.jsx

@@ -43,7 +43,7 @@ const data = [
 const Threads = () => {
   return (
     <div>
-      Threads
+      {/* Threads */}
       <div className="threads">
         <div className="threads-component">
           <div className="threads-component-part1">func</div>

webapp/src/components/Stack/Stack.css

@@ -1,6 +1,6 @@
 .stack-parent {
   display: flex;
-  height: 60vh;
+  height: 90vh;
   width: 210px;
   padding: 10px;
   flex-direction: column;

webapp/src/components/StackBottom/StackBottom.css

@@ -0,0 +1,25 @@
+.stackbottom-container {
+  display: flex;
+  width: 190px;
+  height: 159px;
+  padding: 15px 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid var(--Gray-2, #4f4f4f);
+  background: #1e1e1e;
+}
+.stackbottom-maincomponent {
+  overflow-x: scroll;
+  width: 190px;
+  height: 139px;
+}
+.stackbottom-heading {
+  display: flex;
+  width: 169px;
+  padding: 6px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: var(--primary-orange, #e88f40);
+}

webapp/src/components/StackBottom/StackBottom.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./StackBottom.css";
+
+const StackBottom = () => {
+  return (
+    <div>
+      <div className="stackbottom-container">
+        <div className="stackbottom-heading">Registors</div>
+        <div className="stackbottom-maincomponent">
+          <div className="threads-component">
+            <div className="threads-component-part1">func</div>
+            <div className="threads-component-part2">file</div>
+            <div className="threads-component-part3">addr</div>
+            <div className="threads-component-part4">args</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StackBottom;

webapp/src/components/Terminal/TerminalComp.jsx

@@ -11,7 +11,7 @@ const TerminalComp = () => {
         themes={{
           "my-custom-theme": {
             themeBGColor: "#000",
-            themeToolbarColor: "#DBDBDB",
+            themeToolbarColor: "#000",
             themeColor: "#FFFEFC",
             themePromptColor: "#a917a8",
           },

webapp/src/pages/Debug/Debug.css

@@ -27,3 +27,15 @@
   align-items: flex-start;
   gap: 15px;
 }
+.right-part {
+  display: flex;
+
+  flex-direction: column;
+  gap: 10px;
+}
+.left-part {
+  display: flex;
+
+  flex-direction: column;
+  gap: 10px;
+}

webapp/src/pages/Debug/Debug.jsx

@@ -8,14 +8,19 @@ import Stack from "../../components/Stack/Stack";
 import TerminalComp from "../../components/Terminal/TerminalComp";
 import GdbComponents from "../../components/GdbComponents/GdbComponents";
 import Breakpoint from "../../components/Breakpoint/Breakpoint";
+import StackBottom from "../../components/StackBottom/StackBottom";
+import FunctionsBottom from "../../components/FunctionsBottom/FunctionsBottom";
 
 const Debug = () => {
   return (
     <div>
       <Header />
       <DebugHeader />
       <div className="container">
-        <Functions />
+        <div className="left-part">
+          <Functions />
+          <FunctionsBottom />
+        </div>
         <div className="middle-component">
           <div className="upper-part">
             <MainScreen />
@@ -26,7 +31,10 @@ const Debug = () => {
             <Breakpoint />
           </div>
         </div>
-        <Stack />
+        <div className="right-part">
+          <Stack />
+          <StackBottom />
+        </div>
       </div>
     </div>
   );