clean ui

zasper-io · Dec 10, 2024 · 4b69e2b · 4b69e2b
1 parent e8e1de6
commit 4b69e2b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 23 deletions.
diff --git a/ui/src/ide/IDE.tsx b/ui/src/ide/IDE.tsx
@@ -114,6 +114,9 @@ function IDE () {
   function handlCloseTabSignal (key) {
     console.log('closing key', key)
     const updatedDataFromChild: IfileDict = Object.assign({}, dataFromChild)
+    if ("Launcher" in updatedDataFromChild){
+      updatedDataFromChild["Launcher"]["active"] = true
+    }
     delete updatedDataFromChild[key]
     setDataFromChild(updatedDataFromChild)
     console.log(updatedDataFromChild)

diff --git a/ui/src/ide/editor/Launcher.scss b/ui/src/ide/editor/Launcher.scss
@@ -1,17 +1,34 @@
+.launcher-title {
+    border-bottom: 1px solid #f3f2f6;
+    padding: 0px 40px;
+    padding-bottom: 20px;
+}
+
+.launchSection{
+    padding: 20px;
+    border-bottom: 1px solid #f3f2f6;
+}
+
 .launcher-icon{
     display: inline-block;
-    height: 200px;
-    width: 200px;
-    border: 1px solid #b1b0b0;
-    margin: 20px;
+    height: 150px;
+    width: 150px;
+    border: 1px solid #cfcfcf;
     border-radius: 5px;
     padding: auto;
     background-color: #f3f2f6;
     align-content: center;
     text-align: center;
     box-shadow: #b1b0b0;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
+    cursor: pointer;
 }
 
+.launcher-icon:hover{
+    background-color: #e3e1e9;
+}
+
+
 .terminalIconImage{
     height: 64px;
 }

diff --git a/ui/src/ide/editor/Launcher.tsx b/ui/src/ide/editor/Launcher.tsx
@@ -32,11 +32,11 @@ const Launcher: React.FC<LauncherProps> = ({ data, sendDataToParent }) => {
   // Handle opening a new terminal
   const openTerminal = () => {
     console.log('Open terminal');
-    const terminalName = "Terminal "+ (terminalCount + 1)
+    const terminalName = "Terminal " + (terminalCount + 1)
     sendDataToParent(terminalName, terminalName, 'terminal');
     setTerminalCount(terminalCount + 1)
     var updatedterminals = { ...terminals };
-    updatedterminals[terminalName] = {id: terminalName, name : terminalName}
+    updatedterminals[terminalName] = { id: terminalName, name: terminalName }
     setTerminals(updatedterminals)
   };
 
@@ -46,24 +46,30 @@ const Launcher: React.FC<LauncherProps> = ({ data, sendDataToParent }) => {
   }, [setKernelspecs]);
 
   return (
-    <div className={data.active? 'd-block':'d-none'}>
+    <div className={data.active ? 'd-block' : 'd-none'}>
       <div className="LauncherArea">
-        <h2 className="launchItem">Notebook</h2>
-        {Object.keys(kernelspecs).length > 0 ? (
-          Object.keys(kernelspecs).map((key) => (
-            <div className="launcher-icon" key={key}>
-              <h6>{key}</h6>
-              <img src={kernelspecs[key].resources['logo-64x64']} alt="logo" />
-            </div>
-          ))
-        ) : (
-          <p>No kernels available.</p>
-        )}
-        <hr />
-        <h2 className="launchItem">Terminal</h2>
-        <div className="launcher-icon" onClick={openTerminal}>
-          <h6>New Terminal</h6>
-          <img className="terminalIconImage" src="./images/terminal.png" alt="terminal" />
+        <div className="launcher-title">
+          <h2 className="font-h3 fontw-300">Welcome to <span className="fontw-500">zasper</span></h2>
+        </div>
+        <div className='launchSection'>
+          <h2 className="font-h5 fontw-300">Notebook</h2>
+          {Object.keys(kernelspecs).length > 0 ? (
+            Object.keys(kernelspecs).map((key) => (
+              <div className="launcher-icon" key={key}>
+                <h6>{key}</h6>
+                <img src={kernelspecs[key].resources['logo-64x64']} alt="logo" />
+              </div>
+            ))
+          ) : (
+            <p>No kernels available.</p>
+          )}
+        </div>
+
+        <div className='launchSection'>
+          <h2 className="font-h5 fontw-300">Terminal</h2>
+          <div className="launcher-icon" onClick={openTerminal}>
+            <img className="terminalIconImage" src="./images/terminal.png" alt="terminal" />
+          </div>
         </div>
       </div>
     </div>