refactor (frontend) : for issue #294 frontend task : Clean up Browser.tsx & Browser.css (#296)

* Clean up comments from Browser.tsx

Clean up commented code from Browser.tsx

* clean up Browser.css and add mockup-browser class

clean up unused css classes in Browser.css and add "mockup-browser class"

* removed inline style-  Browser.tsx

Removed inline styles from the div in Browser.tsx ;  moved them to Browser.css under the class name "mockup-browser".

frontend/src/components/Browser.css

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

frontend/src/components/Browser.tsx

@@ -3,56 +3,13 @@ import "./Browser.css";
 import { useSelector } from "react-redux";
 import { RootState } from "../store";
 
-// type UrlBarProps = {
-//   url: string;
-// };
-
-// function UrlBar({ url }: UrlBarProps): JSX.Element {
-//   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 = {
-//   src: string;
-// };
-
-// function Screenshot({ src }: ScreenshotProps): JSX.Element {
-//   return <img className="screenshot" src={src} alt="screenshot" />;
-// }
-
 function Browser(): JSX.Element {
   const url = useSelector((state: RootState) => state.browser.url);
-  // const screenshotSrc = useSelector(
-  //   (state: RootState) => state.browser.screenshotSrc,
-  // );
-
   return (
-    // <div className="browser">
-    //   <UrlBar url={url} />
-    //   <Screenshot src={screenshotSrc} />
-    // </div>
-    <div
-      className="mockup-browser"
-      style={{
-        background: "black",
-        padding: "1rem",
-        height: "90%",
-        margin: "1rem",
-        borderRadius: "1rem",
-      }}
-    >
+    <div className="mockup-browser">
       <div className="mockup-browser-toolbar">
         <div className="input">{url}</div>
       </div>
-      {/* <div className="flex justify-center px-4 py-16 bg-base-100 " >Hello World!</div> */}
     </div>
   );
 }