feat(QueryInput): rewrite styles for QueryInput

frontend-37/src/features/playground/TopBar.tsx

@@ -2,31 +2,33 @@ import saveImg from "@/assets/save.svg";
 import uploadImg from "@/assets/upload.svg";
 import { templateStore } from "@/shared/store/templateStore";
 import { Button } from "@/shared/ui/Button";
-import { ModalWindow } from "@/shared/ui/ModalWindow";
 import { TopBar } from "@/shared/ui/TopBar";
 import { TopBarElement } from "@/shared/ui/TopBarElement";
 import { useState } from "react";
 import styles from "./TopBar.module.css";
 import { TemplateChoice } from "../template-choice";
-import { Upload } from "./Upload";
 
-export function PlaygroundTopBar() {
+interface PlaygroundTopBarProps {
+  handleUpload: () => void;
+  handleSave: () => void;
+}
+
+export function PlaygroundTopBar({
+  handleUpload,
+  handleSave,
+}: PlaygroundTopBarProps) {
   const { template } = templateStore();
-  const [showUpload, setShowUpload] = useState(false);
   const [showTemplateChoice, setShowTemplateChoice] = useState(false);
 
   return (
     <TopBar className={styles.topbar} contentClassName={styles.topbarContent}>
       <TopBarElement>
-        <Button
-          className={styles.saveButton}
-          onClick={() => setShowUpload(true)}
-        >
+        <Button className={styles.saveButton} onClick={handleUpload}>
           <img src={uploadImg} alt="Upload"></img>
         </Button>
       </TopBarElement>
       <TopBarElement>
-        <Button className={styles.saveButton}>
+        <Button className={styles.saveButton} onClick={handleSave}>
           <img src={saveImg} alt="Save"></img>
         </Button>
       </TopBarElement>
@@ -38,9 +40,6 @@ export function PlaygroundTopBar() {
           {template}
         </Button>
       </TopBarElement>
-      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
-        <Upload onClose={() => setShowUpload(false)} />
-      </ModalWindow>
       <ModalWindow
         isOpen={showTemplateChoice}
         setIsOpen={setShowTemplateChoice}

frontend-37/src/features/playground/Upload.module.css

@@ -0,0 +1,23 @@
+.container {
+  width: 416px;
+  height: 243px;
+
+  background-color: white;
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 5px;
+}
+
+.titleContainer {
+  background-color: rgba(193, 193, 193, 0.25);
+  padding: 5px;
+
+  box-shadow: inset 0 -1px 0 #c1c1c1;
+}
+
+.title {
+  font-size: 16px;
+  text-align: center;
+}

frontend-37/src/features/playground/Upload.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/shared/ui/Button";
+import styles from "./Upload.module.css";
 import { schemasStore } from "./schemasStore";
 
 export function Upload() {
@@ -7,8 +8,10 @@ export function Upload() {
   const onClick = () => {};
 
   return (
-    <div style={{ marginBottom: 20 }}>
-      <div>Upload data from CSV</div>
+    <div className={styles.container}>
+      <div className={styles.titleContainer}>
+        <div className={styles.title}>Upload data from CSV</div>
+      </div>
       <div>
         <input type="file" />
         <select>

frontend-37/src/features/playground/index.tsx

@@ -1,9 +1,12 @@
+import { ModalWindow } from "@/shared/ui/ModalWindow";
+import { DBType } from "@/types/DBType";
 import { useEffect, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import styles from "./Playground.module.css";
 import { API_URL } from "../../config/env";
 import { templateStore } from "../../shared/store/templateStore";
 import { PlaygroundTopBar } from "./TopBar";
+import { Upload } from "./Upload";
 import { QueryInput } from "./query-input";
 import { QueryResultList } from "./query-result-list";
 import { SchemaPanel } from "./schema-panel";
@@ -13,8 +16,9 @@
 export function Playground() {
   const session_id = localStorage.getItem("session_id");
   const { updateSchemas } = schemasStore();
-  const [templateType, setTemplateType] = useState("");
+  const [templateType, setTemplateType] = useState("" as DBType);
   const { updateTemplate } = templateStore();
+  const [showUpload, setShowUpload] = useState(false);
 
   useEffect(() => {
     const run = async () => {
@@ -35,18 +39,21 @@
       const res3 = await fetch(`${API_URL}/template/${json2.template}`);
       const json3 = await res3.json();
       updateTemplate(json3.name);
-      setTemplateType(json3.type);
+      setTemplateType(json3.type as DBType);
     };
     run();
   }, []);
 
   return (
     <>
       {templateType == "PSQL" ? (
         <div className={styles.pageContainer}>
-          <PlaygroundTopBar />
+          <PlaygroundTopBar
+            handleUpload={() => setShowUpload(true)}
+            handleSave={() => {}}
+          />
 
-          <div className={`mono ${styles.contentContainer}`}>
+          <div className={`fira ${styles.contentContainer}`}>
             <PanelGroup
               direction="vertical"
               style={{
@@ -62,7 +69,7 @@
                   }}
                 >
                   <Panel className={styles.topContentPanel}>
-                    <QueryInput />
+                    <QueryInput templateType={templateType} />
                   </Panel>
 
                   <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -84,12 +91,15 @@
       ) : (
         <div className={styles.pageContainer}>
           <div>
-            <PlaygroundTopBar />
+            <PlaygroundTopBar
+              handleUpload={() => setShowUpload(true)}
+              handleSave={() => {}}
+            />
             <div className={styles.mongoSchemaWrapper}>
               <MongoSchema />
             </div>
           </div>
-          <div className={`mono ${styles.contentContainer}`}>
+          <div className={`fira ${styles.contentContainer}`}>
             <PanelGroup
               direction="horizontal"
               style={{
@@ -98,7 +108,7 @@
               }}
             >
               <Panel className={styles.topContentPanel}>
-                <QueryInput />
+                <QueryInput templateType={templateType} />
               </Panel>
 
               <PanelResizeHandle className={styles.verticalResizeHandle} />
@@ -110,6 +120,10 @@
           </div>
         </div>
       )}
+
+      <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
+        <Upload />
+      </ModalWindow>
     </>
   );
 }

frontend-37/src/features/playground/query-input/HelpButton.module.css

@@ -0,0 +1,38 @@
+.button {
+  width: 76.5px;
+  height: 40px;
+  border-radius: 5px;
+  border: none;
+  border: 1px solid #c1c1c1;
+  background-color: white;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 2;
+
+  font-family: "Onest", sans-serif;
+  font-size: inherit !important;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.button img {
+  width: 16.5px;
+  height: 16.5px;
+  padding-left: 8px;
+}
+
+.button p {
+  width: 37px;
+  height: 20px;
+  margin: auto;
+
+  color: #666666;
+}

frontend-37/src/features/playground/query-input/HelpButton.tsx

@@ -0,0 +1,17 @@
+import infoImg from "@/assets/info.svg";
+import styles from "./HelpButton.module.css";
+
+interface HelpButtonProps {
+  handleClick: () => void;
+}
+
+export function HelpButton({ handleClick }: HelpButtonProps) {
+  return (
+    <>
+      <button className={styles.button} onClick={handleClick}>
+        <p>help</p>
+        <img src={infoImg} />
+      </button>
+    </>
+  );
+}

frontend-37/src/features/playground/query-input/QueryInput.module.css

@@ -7,6 +7,13 @@
   height: 100%;
 
   position: relative;
+
+  font-size: 16px;
+  font-weight: 400;
+
+  line-height: 19px;
+
+  background-color: white;
 }
 
 .wrapper {
@@ -30,7 +37,7 @@
   flex-direction: column;
 
   flex-basis: 42px;
-  color: #d4d4d4;
+  color: #c1c1c1;
   margin-top: 10px;
 
   max-height: 100%;
@@ -41,11 +48,12 @@
   overflow: hidden;
 
   user-select: none;
+
+  background: transparent;
 }
 
 .rowcounter div {
   text-align: right;
-  line-height: 25px;
 }
 
 .textarea {
@@ -56,7 +64,7 @@
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  line-height: inherit;
+  line-height: inherit !important;
   color: inherit;
 
   /* Ensure it grows and scrolls correctly */
@@ -77,8 +85,42 @@
   z-index: 1;
 
   scrollbar-width: thin;
+
+  color: #1f1f1f;
+
+  background: transparent;
 }
 
 .textarea::selection {
-  background-color: #dedeff;
+  background-color: rgba(169, 169, 255, 0.3);
+}
+
+.bgImg {
+  width: 100%;
+  height: 100%;
+}
+
+.bgMongo {
+  position: absolute;
+  top: 148px;
+  width: 410px;
+  height: 704px;
+}
+
+.bgPSQL {
+  position: absolute;
+  top: 49;
+  width: 736px;
+  height: 862px;
+}
+
+.buttonsWrapper {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+
+  display: flex;
+  flex-direction: row;
+
+  gap: 10px;
 }