Fixed terminal padding in addition to UI enhancement (#217)

* feat:enhanced layout Signed-off-by: Vikramaditya <awesomevikram3@gmail.com> * fixed:terminal padding Signed-off-by: Vikramaditya <awesomevikram3@gmail.com> * fixing lint issues Signed-off-by: Vikramaditya <awesomevikram3@gmail.com> * fixing lint issues Signed-off-by: Vikramaditya <awesomevikram3@gmail.com> --------- Signed-off-by: Vikramaditya <awesomevikram3@gmail.com>
2026-01-10 15:28:14 -05:00 · 2024-03-28 00:12:19 +05:30
parent 98919d15ae
commit 9ae903697d
9 changed files with 200 additions and 65 deletions
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -13,31 +13,56 @@
 .left-pane {
  flex: 1;
  background-color: #252526;
+  margin: 1rem;
+  overflow: hidden;
+  border-radius: 1rem;
 }

 .right-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
+  border-radius: 1rem;
+  margin: 1rem;
+  background-color: #ffffff24;
+  overflow: hidden;
+}
+
+.workspace-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.workspace-heading {
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  font-size: 20px;
+  font-weight: bolder;
 }

 .tab-container {
  display: flex;
  background-color: #333333;
 }
-
 .tab {
  padding: 10px 20px;
  cursor: pointer;
-  color: #fff;
+  color: #ffffffb3;
+  font-weight: light;
+  position: relative;
 }

 .tab.active {
-  background-color: #1e1e1e;
-  font-weight: bold;
+  color: #fff;
+  font-weight: bolder;
 }

 .tab-content {
  flex: 1;
-  background-color: #1e1e1e;
-}
+  height: 95%;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+.xterm-screen {
+  padding: 10px 0 0 10px;
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -53,19 +53,24 @@ function App(): JSX.Element {
        <ChatInterface />
      </div>
      <div className="right-pane">
-        <div className="tab-container">
-          {TAB_OPTIONS.map((tab) => (
-            <Tab
-              key={tab}
-              name={tabData[tab].name}
-              active={activeTab === tab}
-              onClick={() => setActiveTab(tab)}
-            />
-          ))}
+        <div className="workspace-content">
+          <div className="workspace-heading">
+            <p>OpenDevin's Workspace</p>
+          </div>
+          <div className="tab-container">
+            {TAB_OPTIONS.map((tab) => (
+              <Tab
+                key={tab}
+                name={tabData[tab].name}
+                active={activeTab === tab}
+                onClick={() => setActiveTab(tab)}
+              />
+            ))}
+          </div>
+          {/* Keep terminal permanently open - see component for more details */}
+          <Terminal key="terminal" hidden={activeTab !== "terminal"} />
+          <div className="tab-content">{tabData[activeTab].component}</div>
        </div>
-        {/* Keep terminal permanently open - see component for more details */}
-        <Terminal key="terminal" hidden={activeTab !== "terminal"} />
-        <div className="tab-content">{tabData[activeTab].component}</div>
      </div>
    </div>
  );
--- a/frontend/src/components/Browser.css
+++ b/frontend/src/components/Browser.css
@@ -5,9 +5,75 @@
  border-radius: 2rem;
  color: #252526;
 }
+.browser {
+  height: 90%;
+  width: 100%;
+  border-radius: 2rem;
+  padding: 1rem;
+}
+.url {
+  margin: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 80%;
+  background-color: white;
+  border-radius: 2rem;
+  color: #252526;
+}
+
+.mac-url-bar {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  height: 40px;
+  padding: 0 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.mac-url-bar .left-icons {
+  display: flex;
+}
+
+.mac-url-bar .icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.mac-url-bar .icon-red {
+  background-color: #fc6255;
+}
+
+.mac-url-bar .icon-yellow {
+  background-color: #ffbe3d;
+}
+
+.mac-url-bar .icon-green {
+  background-color: #25d366;
+}
+
+.mac-url-bar .url-input {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+  padding: 0 2px;
+  flex-grow: 1;
+  margin: 0 10px;
+}
+
+.mac-url-bar .url-input input {
+  border: none;
+  outline: none;
+  background: transparent;
+  flex-grow: 1;
+  padding: 5px;
+}

 .screenshot {
  width: 100%;
-  max-height: calc(100vh - 100px); /* 100px is the height of the header */
+  height: 96%;
+  max-height: calc(90vh - 100px); /* 100px is the height of the header */
  object-fit: cover;
 }
--- a/frontend/src/components/Browser.tsx
+++ b/frontend/src/components/Browser.tsx
@@ -8,7 +8,16 @@ type UrlBarProps = {
 };

 function UrlBar({ url }: UrlBarProps): JSX.Element {
-  return <div className="url">{url}</div>;
+  return (
+    <div className="mac-url-bar">
+      <div className="left-icons">
+        <div className="icon icon-red" />
+        <div className="icon icon-yellow" />
+        <div className="icon icon-green" />
+      </div>
+      <div className="url">{url}</div>
+    </div>
+  );
 }

 type ScreenshotProps = {
--- a/frontend/src/components/ChatInterface.css
+++ b/frontend/src/components/ChatInterface.css
@@ -23,25 +23,25 @@
  display: flex;
  margin-bottom: 10px;
 }
-.message{
+.message {
  display: flex;
 }

-.user-message{
+.user-message {
  display: flex;
  flex-direction: row-reverse;
-  margin:10px 10px 0 auto
+  margin: 10px 10px 0 auto;
 }

 .user-message .message-content {
-  background-color: #007acc ;
+  background-color: #007acc;
 }

 .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
-  margin:0 10px;
+  margin: 0 10px;
 }

 .message-content {
@@ -52,15 +52,28 @@
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

-
 .input-container {
+  width: 98%;
  display: flex;
  align-items: center;
-  margin-top: auto;
-  margin: 0.5rem;
+  background-color: #3e3e3e;
+  padding: 10px;
+  border-radius: 0 0rem 1rem 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: #fff;
 }

-.input-container input {
+.button-text {
+  font-size: 16px;
+}
+
+.input-box {
+  border-radius: 1rem;
+  background-color: #333333;
+  width: 100%;
+  display: flex;
+}
+.input-box input {
  flex: 1;
  padding: 10px;
  border: none;
@@ -68,24 +81,17 @@
  margin: 0 10px;
  background-color: #3c3c3c;
  color: #fff;
-  font-size: 16px;
+  background-color: transparent;
+  outline: transparent;
 }
-
-.input-container button {
+.input-box button {
+  background-color: transparent;
  padding: 10px 20px;
-  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 }
-
-.button-text {
-  font-size: 16px;
+.input-box button:hover {
+  background-color: transparent;
 }
-
-
-.input-container svg {
-  height: 16px;
-}
-
--- a/frontend/src/components/ChatInterface.tsx
+++ b/frontend/src/components/ChatInterface.tsx
@@ -59,21 +59,26 @@ function ChatInterface(): JSX.Element {
    <div className="chat-interface">
      {initialized ? <MessageList /> : <InitializingStatus />}
      <div className="input-container">
-        <input
-          type="text"
-          value={inputMessage}
-          onChange={(e) => setInputMessage(e.target.value)}
-          placeholder="Send a message (won't interrupt the Assistant)"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              handleSendMessage();
-            }
-          }}
-          disabled={!initialized}
-        />
-        <button type="button" onClick={handleSendMessage}>
-          <span className="button-text">Send</span>
-        </button>
+        <div className="input-box">
+          <input
+            type="text"
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            placeholder="Send a message (won't interrupt the Assistant)"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSendMessage();
+              }
+            }}
+          />
+          <button
+            type="button"
+            onClick={handleSendMessage}
+            disabled={!initialized}
+          >
+            <span className="button-text">Send</span>
+          </button>
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/components/CodeEditor.tsx
+++ b/frontend/src/components/CodeEditor.tsx
@@ -7,13 +7,22 @@ function CodeEditor(): JSX.Element {
  const code = useSelector((state: RootState) => state.code.code);

  return (
-    <Editor
-      height="100%"
-      theme="vs-dark"
-      defaultLanguage="python"
-      defaultValue="# Welcome to OpenDevin!"
-      value={code}
-    />
+    <div
+      className="editor"
+      style={{
+        height: "100%",
+        margin: "1rem",
+        borderRadius: "1rem",
+      }}
+    >
+      <Editor
+        height="95%"
+        theme="vs-dark"
+        defaultLanguage="python"
+        defaultValue="# Welcome to OpenDevin!"
+        value={code}
+      />
+    </div>
  );
 }

--- a/frontend/src/components/Planner.tsx
+++ b/frontend/src/components/Planner.tsx
@@ -2,7 +2,16 @@ import React from "react";

 function Planner(): JSX.Element {
  return (
-    <div className="planner">
+    <div
+      className="planner"
+      style={{
+        background: "black",
+        padding: "1rem",
+        height: "90%",
+        margin: "1rem",
+        borderRadius: "1rem",
+      }}
+    >
      <h3>
        Current Focus: Set up the development environment according to the
        project&apos;s instructions.
--- a/frontend/src/components/Terminal.tsx
+++ b/frontend/src/components/Terminal.tsx
@@ -92,6 +92,7 @@ function Terminal({ hidden }: TerminalProps): JSX.Element {
        width: "100%",
        height: "100%",
        display: hidden ? "none" : "block",
+        padding: "1rem",
      }}
    />
  );