refactor(frontend): categorized css files into a separate folder (#298)

* Issue 294

* categorize css files

* cleanup

* formatted css

frontend/src/App.tsx

@@ -58,7 +58,9 @@ function App(): JSX.Element {
       <div className="right-pane">
         <div className="navbar bg-base-100">
           <div className="flex-1">
-            <div className="btn btn-ghost text-xl xl:w-full xl:h-full h-1/2 w-1/2 ml-4">OpenDevin Workspace</div>
+            <div className="btn btn-ghost text-xl xl:w-full xl:h-full h-1/2 w-1/2 ml-4">
+              OpenDevin Workspace
+            </div>
           </div>
           <div className="flex">
             <BannerSettings />

frontend/src/components/BannerSettings.css

@@ -1,13 +0,0 @@
-.banner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-}
-
-select {
-    padding: 0.5rem;
-    border: 0;
-    border-radius: 5px;
-    font-size: 1rem;
-}

frontend/src/components/BannerSettings.tsx

@@ -6,7 +6,7 @@ import {
   changeModel,
   fetchModels,
 } from "../services/settingsService";
-import "./BannerSettings.css";
+import "./css/BannerSettings.css";
 
 function ModelSelect(): JSX.Element {
   const [models, setModels] = useState<string[]>(INITIAL_MODELS);

frontend/src/components/Browser.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Browser.css";
+import "./css/Browser.css";
 import { useSelector } from "react-redux";
 import { RootState } from "../store";
 

frontend/src/components/ChatInterface.tsx

@@ -4,7 +4,7 @@ import assistantAvatar from "../assets/assistant-avatar.png";
 import userAvatar from "../assets/user-avatar.png";
 import { sendChatMessage } from "../services/chatService";
 import { RootState } from "../store";
-import "./ChatInterface.css";
+import "./css/ChatInterface.css";
 import { changeDirectory as sendChangeDirectorySocketMessage } from "../services/settingsService";
 
 function MessageList(): JSX.Element {

frontend/src/components/Errors.css

@@ -1,15 +0,0 @@
-.errors {
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 1rem;
-    z-index: 1000;
-}
-
-.error {
-    background-color: #B00020;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
-    margin-bottom: 0.5rem;
-}

frontend/src/components/Errors.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../store";
-import "./Errors.css";
+import "./css/Errors.css";
 
 function Errors(): JSX.Element {
   const errors = useSelector((state: RootState) => state.errors.errors);

frontend/src/components/Planner.tsx

@@ -1,17 +1,9 @@
 import React from "react";
+import "./css/Planner.css";
 
 function Planner(): JSX.Element {
   return (
-    <div
-      className="planner"
-      style={{
-        background: "black",
-        padding: "1rem",
-        height: "90%",
-        margin: "1rem",
-        borderRadius: "1rem",
-      }}
-    >
+    <div className="planner">
       <h3>
         Current Focus: Set up the development environment according to the
         project&apos;s instructions.

frontend/src/components/css/BannerSettings.css

@@ -0,0 +1,13 @@
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+select {
+  padding: 0.5rem;
+  border: 0;
+  border-radius: 5px;
+  font-size: 1rem;
+}

frontend/src/components/css/Browser.css

@@ -0,0 +1,36 @@
+.mockup-browser {
+  background: black;
+  padding: 1rem;
+  height: 90%;
+  margin: 1rem;
+  border-radius: 1rem;
+}
+
+.url {
+  margin: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: white;
+  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;
+}
+
+.screenshot {
+  width: 100%;
+  height: 96%;
+  max-height: calc(90vh - 100px); /* 100px is the height of the header */
+  object-fit: cover;
+}

frontend/src/components/css/Errors.css

@@ -0,0 +1,15 @@
+.errors {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1rem;
+  z-index: 1000;
+}
+
+.error {
+  background-color: #B00020;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+  margin-bottom: 0.5rem;
+}

frontend/src/components/Browser.css → frontend/src/components/css/Planner.css

@@ -1,4 +1,4 @@
-.mockup-browser {
+.planner {
   background: black;
   padding: 1rem;
   height: 90%;