Merge pull request #9 from thomscoder/smallImprovements

Small improvements

Author: thomscoder

README.md

@@ -4,25 +4,23 @@ Quickly upload, create, open, read, modify and download files, on the fly.
 
 Harmony also keep tracks of your changes or "workspaces" through git branches and git commits, all in-memory in your browser.
 
-<img src="https://i.ibb.co/mb99Q01/Schermata-2022-10-01-alle-13-00-39.png" width=80% />
+<img src="https://i.ibb.co/GC4SfB2/Schermata-2022-10-02-alle-18-13-31.png" width=80% />
 
 > Just me experimenting with WebAssembly.
-
-<img src="https://i.ibb.co/4JQbLgN/Schermata-2022-10-01-alle-13-58-20.png" width=80% />
 <br/>
 
 Harmony implements via WebAssembly a virtual file system and a in-memory version of Git, written in Go, (a revisited version of my <a href="https://github.com/thomscoder/nova-git" target="_blank">Nova</a> project) where all the file operations happen. 
 
 Save and switch between your "workspaces" in few clicks or even quicker with shortcuts.
 
-<img src="https://i.ibb.co/hc3gxLk/Schermata-2022-10-01-alle-14-09-06.png" width=80% />
+<img src="https://i.ibb.co/1zXsCVk/Schermata-2022-10-02-alle-18-13-54.png" width=80% />
 
 
 ## Harmony supports git commits and branches.
 
 
 
-https://user-images.githubusercontent.com/78874117/193406968-cf0b44c6-c5a9-4e14-9085-edbea06bf59e.mp4
+https://user-images.githubusercontent.com/78874117/193465430-7a76e848-1e5b-406a-b2b0-99869a031f3a.mp4
 
 
 

client/src/components/Editor/Editor.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useState } from 'react';
 import Draggable from 'react-draggable';
+import { isMobile, isDesktop } from 'react-device-detect';
 
 import MonacoEditor, { EditorDidMount } from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
@@ -118,7 +119,6 @@ export function Editor({ text, save, close, filename }: { text: string; save: an
             <span>
               {saved ? <span className="saved-message">Saved</span> : copied ? <span className="saved-message">Copied</span> : 'Editing'} {filename}
             </span>
-            <CloseIcon onClick={() => close()} />
           </strong>
           <MonacoEditor width="80%" height="40vh" language={fileExt} theme="vs-dark" options={MONACO_OPTIONS} onChange={onChange} editorDidMount={editorDidMount} />
           <div className="editor-btn-container">
@@ -166,6 +166,15 @@ export function Editor({ text, save, close, filename }: { text: string; save: an
                 <DownloadIcon />
               </button>
             )}
+            <button
+              type="button"
+              id="clear-icon"
+              onClick={() => {
+                close();
+              }}
+            >
+              <CloseIcon />
+            </button>
           </div>
         </form>
       </Draggable>

client/src/components/Menu/Help.tsx

@@ -80,7 +80,7 @@ const Help = () => {
               <br />- <strong>Ctrl + Shift + U </strong>: Upload a new file
               <br />- <strong>Ctrl + Shift + H</strong> : Open this guide
               <br />
-              <video width="100%" src="https://user-images.githubusercontent.com/78874117/193406968-cf0b44c6-c5a9-4e14-9085-edbea06bf59e.mp4" controls autoPlay></video>
+              <video width="100%" src="https://user-images.githubusercontent.com/78874117/193465430-7a76e848-1e5b-406a-b2b0-99869a031f3a.mp4" controls autoPlay></video>
               {(action === HELP || open) && (
                 <Button
                   sx={{

client/src/components/styles/Editor.css

@@ -26,19 +26,23 @@
   text-align: center;
   background-color: #121212;
   cursor: grab;
-  display: flex;
-  justify-content: space-between;
   align-items: center;
   padding: 0 2em;
 }
 
+.nova-editor form .editor-btn-container {
+  display: flex;
+  width: 100%;
+}
+
 .nova-editor form .editor-btn-container button,
 #create-file-btn,
 #downloader {
   background-color: #1e1e1e;
   color: white;
   border: 0.3px solid white;
   border-radius: 0;
+  width: 100%;
 }
 
 .nova-editor form .editor-btn-container button:hover,
@@ -54,6 +58,7 @@
 #downloader {
   padding: 0.53em 1em;
   background-color: #ffac4b;
+  text-align: center;
 }
 
 @media screen and (max-width: 768px) {
@@ -68,13 +73,8 @@
     font-size: 13px;
   }
 
-  .nova-editor form .editor-btn-container {
-    display: flex;
-    width: 100%;
-  }
   .nova-editor form .editor-btn-container button,
   #downloader {
     padding: 0.3em;
-    width: 100%;
   }
 }