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>

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;
+}

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>
   );

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;
 }

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 = {

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;
-}
-

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>
   );

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>
   );
 }
 

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.

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",
       }}
     />
   );