made better design

raisfeld-ori · Mar 26, 2024 · 2facc4a · 2facc4a
1 parent 5342eb8
commit 2facc4a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 60 deletions.
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
@@ -56,7 +56,9 @@ function login(){
 
                      <div className="input-group">
                     <label className="label">Password</label>
-                     <input maxLength={16} onChange={e => setpassword(e.currentTarget.value)} autoComplete="off" name="info" id="info" className="input" placeholder='Enter your password' type="info" />
+                     <input maxLength={16} onChange={e => setpassword(e.currentTarget.value)} 
+                     onKeyDown={async e => {if (e.key == 'Enter') {await authenticate()}}} 
+                     autoComplete="off" name="info" id="info" className="input" placeholder='Enter your password' type="password" />
                     <div ></div>
                      </div>
 

diff --git a/src/pages/login/signup.tsx b/src/pages/login/signup.tsx
@@ -41,7 +41,9 @@ function Login() {
                     </div>
                     <div className="input-group">
                         <label className="label">Password</label>
-                        <input onChange={e => setPassword(e.currentTarget.value)} autoComplete="off" name="info" id="info" className="input" placeholder='Enter your password' type="info" />
+                     <input maxLength={16} onChange={e => setPassword(e.currentTarget.value)} 
+                     onKeyDown={async e => {if (e.key == 'Enter') {await authenticate()}}}
+                     autoComplete="off" name="info" id="info" className="input" placeholder='Enter your password' type="password" />
                         <div></div>
                     </div>
                     <button className="learn-more" onClick={authenticate}>

diff --git a/src/pages/main_page/internal_apps/App.css b/src/pages/main_page/internal_apps/App.css
@@ -23,49 +23,6 @@
     position:sticky;
 }
 
-.ApplicationDirectory {
-    position:relative;
-    display: block;
-    margin-bottom: 1px;
-    height: 10svh;
-    border-top: 2px #0202022f;
-    border-left: 2px #0202022f;
-    border-top-right-radius: 20px;
-    border-top-left-radius: 20px;
-    border-right: 2px #0202022f;
-    border-bottom: 2px #0202022f;
-    border-top: #2f2f2f;
-    border-style: solid;
-    cursor: move;
-    font-size: 1em;
-    color: white    ;
-    width: 873px;
-    max-width: 100%;
-    display: flex;
-    align-items: flex-start;
-    background-color: #2f2f2f;   
-}
-
-.frametest2 {
-    position: absolute;
-    display: block;
-    margin-top: 1svh;
-    border: 2px #0000001e;
-    border-style: solid;
-    cursor: move;
-    font-size: 1em;
-    color: white;
-    width: 873px;
-    max-width: 100%;
-    display: flex;
-    align-items: flex-start;
-    z-index: 1;
-    background-color: #333333df;
-    height: 50svh;    
-    backdrop-filter: blur(10px);
-
-}
-
 .frametest {
     border-radius: 20px;
 }
@@ -80,20 +37,6 @@ border-radius: 20px;
     height: 50svh;    
 }
 
-.filesystemtxt {
-    font-size: 1em;
-    text-align: left;
-
-}
-.filesystemtxt2 {
-    font-size: 1.5em;
-    text-align: left;
-    font-weight: lighter;
-    color: rgb(189, 184, 184);
-
-    font-style: italic;
-
-}
 .sexy{
     color: white;
     font-weight: normal;

diff --git a/src/pages/main_page/internal_apps/apps/file_system.css b/src/pages/main_page/internal_apps/apps/file_system.css
@@ -0,0 +1,65 @@
+
+
+.frametest2 {
+    display: flex;
+    flex-direction: column;
+    align-items:flex-start;
+    justify-content: flex-start;
+}
+
+.file_img{
+    height: 10svh;
+    width: 5svw;
+}
+
+.file_grid {
+    display:grid;
+    width: 100%;
+    text-align:left;
+    gap: 15px 10px;
+    grid-template-columns: 7svw 7svw 7svw 7svw 7svw 7svw 7svw 7svw;
+}
+
+
+.ApplicationDirectory {
+    position:relative;
+    display: block;
+    margin-bottom: 1px;
+    height: 10svh;
+    border-top: 2px #0202022f;
+    border-left: 2px #0202022f;
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+    border-right: 2px #0202022f;
+    border-bottom: 2px #0202022f;
+    border-top: #2f2f2f;
+    border-style: solid;
+    cursor: move;
+    font-size: 1em;
+    color: white    ;
+    width: 873px;
+    max-width: 100%;
+    display: flex;
+    align-items: flex-start;
+    background-color: #2f2f2f;   
+}
+
+.frametest2 {
+    position: absolute;
+    display: block;
+    margin-top: 1svh;
+    border: 2px #0000001e;
+    border-style: solid;
+    cursor: move;
+    font-size: 1em;
+    color: white;
+    width: 873px;
+    max-width: 100%;
+    display: flex;
+    align-items: flex-start;
+    z-index: 1;
+    background-color: #333333df;
+    height: 50svh;    
+    backdrop-filter: blur(10px);
+
+}
diff --git a/src/pages/main_page/internal_apps/apps/file_system.tsx b/src/pages/main_page/internal_apps/apps/file_system.tsx
@@ -3,6 +3,7 @@ import { invoke } from '@tauri-apps/api';
 import { useState, useEffect } from 'react';
 import img from '../../assets/terminal.png';
 import { open } from '@tauri-apps/api/dialog';
+import './file_system.css';
 
 async function upload_file(update_fs: () => Promise<void>, set_files: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>){
     let name: string = await invoke('system_get', {key: 'name'});
@@ -53,7 +54,7 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
         let pwd: string = await invoke('pwd', {});
         let files_divs = [];
         for (let i = 0;i < files.length;i++){
-            files_divs.push(<File name={files[i]} key={i}/>);
+            files_divs.push(<File name={files[i].slice(0, 10)} key={i}/>);
         }
         set_files(files_divs);
         set_location(pwd);
@@ -104,7 +105,9 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
         </div>
     let app_html = <div className='frametest2' onContextMenu={right_click}>
         {Application}
+        <div className='file_grid'>
         <>{files}</>
+        </div>
     </div>;
     const [display, set_display] = useState('none');
     let app = <App element={app_html} display={display} set_display={set_display} name='File System'/>;