fix: some frontend fixes and improvements

client/src/App.css

@@ -74,70 +74,15 @@ input[type='file'] {
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
-  justify-content: flex-end;
   align-items: flex-end;
-  align-content: flex-end;
   width: 100%;
   height: calc(100vh - 3em);
   margin: 0 auto;
   overflow-y: auto;
 }
 
-.nova-editor {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-}
-
-.nova-editor form {
-  margin: auto;
-  width: 80%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.nova-editor form .react-monaco-editor-container {
-  width: 100% !important;
-  text-align: initial;
-  margin: auto;
-  border: 0.3px solid white;
-}
-
-.nova-editor form .editor-btn-container button,
-#create-file-btn,
-#downloader {
-  background-color: #1e1e1e;
-  color: white;
-  border: 0.3px solid white;
-  border-radius: 0;
-}
-
-.nova-editor form .editor-btn-container button:hover,
-#create-file-btn,
-#downloader:hover {
-  background-color: #44d6ff;
-}
-
-#downloader {
-  padding: 0.53em 1em;
-  background-color: #ffac4b;
-}
-
 @media screen and (max-width: 768px) {
   .file-selectors p + div form {
     text-align: center;
   }
-
-  .nova-editor form .editor-btn-container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .nova-editor form .editor-btn-container button,
-  #create-file-btn,
-  #downloader {
-    padding: 0.3em;
-  }
 }

client/src/App.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useState } from 'react';
 import Draggable from 'react-draggable';
+import { isMobile } from 'react-device-detect';
 
 import { IoMdDocument as DocumentIcon } from '@react-icons/all-files/io/IoMdDocument';
 
@@ -22,7 +23,6 @@ function App() {
   const setAction = useSetRecoilState(actionState);
   const freeModeDisabled = useRecoilValue(freeModeDisabledState);
 
-
   const [editorContent, setEditorContent] = useState<string>('');
   const [openFile, setOpenFile] = useState<string>('');
   const [prevOpenedFiles, setPrevOpenedFiles] = useState<Array<string>>([]);
@@ -68,14 +68,17 @@ function App() {
       <Actions />
       <Files />
       <div className="App">
-        <div className="files-area">
+        <div className="files-area" style={filesAreaStyle}>
           {virtualFiles.map((virtualFile, index) => {
             return (
               <Draggable key={index} bounds="parent" disabled={freeModeDisabled}>
-                <div className={`virtual-file-wrapper ${!!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : ''}`}>
-                  <DocumentIcon size={60}  onDoubleClick={() => {
-                   clickOnFileHandler(virtualFile)
-                  }} />
+                <div
+                  onDoubleClick={() => {
+                    clickOnFileHandler(virtualFile);
+                  }}
+                  className={`virtual-file-wrapper ${!!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : ''}`}
+                >
+                  <DocumentIcon size={60} />
                   <div key={index} className="file">
                     {virtualFile}
                   </div>
@@ -94,4 +97,9 @@ function App() {
   );
 }
 
+const filesAreaStyle = {
+  alignContent: isMobile ? 'flex-start' : 'center',
+  justifyContent: isMobile ? 'flex-end' : 'center',
+};
+
 export default App;

client/src/atoms/atoms.ts

@@ -28,4 +28,4 @@ export const actionState = atom({
 export const freeModeDisabledState = atom({
   key: 'freeModeDisabledState',
   default: false,
-})
+});

client/src/components/Editor/Editor.tsx

@@ -1,3 +1,6 @@
+import { Fragment, useState } from 'react';
+import Draggable from 'react-draggable';
+
 import MonacoEditor, { EditorDidMount } from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { MonacoServices } from 'monaco-languageclient';
@@ -7,7 +10,15 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { Fragment, useState } from 'react';
+
+import { RiDownloadCloud2Line as DownloadIcon } from '@react-icons/all-files/ri/RiDownloadCloud2Line';
+import { RiDownloadCloud2Fill as DownloadIconFill } from '@react-icons/all-files/ri/RiDownloadCloud2Fill';
+import { AiOutlineSave as SaveIcon } from '@react-icons/all-files/ai/AiOutlineSave';
+import { AiOutlineCopy as CopyIcon } from '@react-icons/all-files/ai/AiOutlineCopy';
+import { AiOutlineClose as CloseIcon } from '@react-icons/all-files/ai/AiOutlineClose';
+import { GrClear as ClearIcon } from '@react-icons/all-files/gr/GrClear';
+
+import '../styles/Editor.css';
 
 self.MonacoEnvironment = {
   getWorker(_, label) {
@@ -101,60 +112,63 @@ export function Editor({ text, save, close, filename }: { text: string; save: an
 
   return (
     <Fragment>
-      <form onSubmit={textSaver}>
-        <h3>
-          {saved ? <span className="saved-message">Saved</span> : copied ? <span className="saved-message">Copied</span> : 'Editing'} {filename}
-        </h3>
-        <MonacoEditor width="80%" height="40vh" language={fileExt} theme="vs-dark" options={MONACO_OPTIONS} onChange={onChange} editorDidMount={editorDidMount} />
-        <div className="editor-btn-container">
-          <button
-            type="button"
-            className="editor-btn copy-btn"
-            onClick={() => {
-              navigator.clipboard.writeText(writtenText).then(() => {
-                setCopied(true);
-              });
-            }}
-          >
-            Copy Text
-          </button>
-          <button type="submit" className="editor-btn save-btn">
-            Save
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              const editorModel = monaco.editor.getModel(editorUri as monaco.Uri);
-              editorModel?.setValue('');
-            }}
-          >
-            Clear
-          </button>
-          <a
-            href=""
-            id="downloader"
-            style={{
-              display: !downloader ? 'none' : 'inline-block',
-            }}
-          >
-            Download
-          </a>
-          {!downloader && (
+      <Draggable bounds="parent" handle="strong">
+        <form onSubmit={textSaver}>
+          <strong className="editor-file-name">
+            <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">
+            <button
+              type="button"
+              className="editor-btn copy-btn"
+              onClick={() => {
+                navigator.clipboard.writeText(writtenText).then(() => {
+                  setCopied(true);
+                });
+              }}
+            >
+              <CopyIcon />
+            </button>
+            <button type="submit" className="editor-btn save-btn">
+              <SaveIcon />
+            </button>
             <button
               type="button"
+              id="clear-icon"
               onClick={() => {
-                download(writtenText, filename, 'text/plain');
-                setDownloader(true);
+                const editorModel = monaco.editor.getModel(editorUri as monaco.Uri);
+                editorModel?.setValue('');
               }}
             >
-              Prepare download
+              <ClearIcon />
             </button>
-          )}
-          <button type="button" className="editor-btn close-btn" onClick={() => close()}>
-            Close
-          </button>
-        </div>
-      </form>
+            <a
+              href=""
+              id="downloader"
+              style={{
+                display: !downloader ? 'none' : 'inline-block',
+              }}
+            >
+              <DownloadIconFill />
+            </a>
+            {!downloader && (
+              <button
+                type="button"
+                onClick={() => {
+                  download(writtenText, filename, 'text/plain');
+                  setDownloader(true);
+                }}
+              >
+                <DownloadIcon />
+              </button>
+            )}
+          </div>
+        </form>
+      </Draggable>
     </Fragment>
   );
 }

client/src/components/Menu/Clock.tsx

@@ -3,12 +3,14 @@ import { useEffect, useState } from 'react';
 const Clock = () => {
   const [time, setTime] = useState<string>('');
 
+  const getTime = () => {
+    const date = new Date();
+    const timeFormat = `${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    setTime(timeFormat);
+  };
   useEffect(() => {
-    const interval = setInterval(() => {
-      const date = new Date();
-      const timeFormat = `${date.toLocaleTimeString()}`;
-      setTime(timeFormat);
-    }, 1000);
+    getTime();
+    const interval = setInterval(getTime, 1000);
     return () => {
       clearInterval(interval);
     };

client/src/components/Menu/Help.tsx

@@ -66,12 +66,13 @@ const Help = () => {
               It is up to you when (and if) to commit (locally - in-memory for now) the changes. By committing you can freely switch between branches without losing what you have done.
               <br />
               Refresh the page to restart anew.
-              <br/>
-              <br/>
-              Double click on file to open the editor.<br/>
+              <br />
+              <br />
+              Double click on file to open the editor.
+              <br />
               (Lock and unlock file drag - on mobile lock the drag to edit the content of a file)
-              <br/>
-              <br/>
+              <br />
+              <br />
               <strong>Shortcuts</strong>
               <br />- <strong>Ctrl + Shift + B</strong> : Create a branch (or switching to one)
               <br />- <strong>Ctrl + Shift + C</strong> : Create a new commit

client/src/components/Menu/Menu.tsx

@@ -1,15 +1,15 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
 import Slide from '@mui/material/Slide';
 import { TransitionProps } from '@mui/material/transitions';
-import { Divider } from '@mui/material';
+import { Divider, styled } from '@mui/material';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 
 // icons
-import { RiMoonClearFill as MoonIcon } from '@react-icons/all-files/ri/RiMoonClearFill';
+import { RiLayoutGridFill as MenuIcon } from '@react-icons/all-files/ri/RiLayoutGridFill';
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { actionState, virtualBranchState } from '../../atoms/atoms';
@@ -35,11 +35,21 @@ const Transition = forwardRef(function Transition(
 
 const icons = [<AddFile />, <UploadFile />, <CreateBranch />, <CreateCommit />];
 
+const BootstrapTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} arrow classes={{ popper: className }} />)(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.common.black,
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.black,
+  },
+}));
+
 const HarmonyMenu = () => {
   const setAction = useSetRecoilState(actionState);
   const virtualBranch = useRecoilValue(virtualBranchState);
 
   const [open, setOpen] = useState(false);
+  const [openTooltip, setOpenTooltip] = useState(true);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -56,22 +66,35 @@ const HarmonyMenu = () => {
     }
   };
 
+  const handleTooltip = () => {
+    setOpenTooltip(false);
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(handleTooltip, 3000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
   const id = open ? 'simple-popover' : undefined;
 
   return (
     <div className="menu-wrapper">
       <div>
-        <Button
-          sx={{
-            color: '#ffac4b',
-          }}
-          aria-describedby={id}
-          onClick={handleClickOpen}
-        >
-          <MoonIcon size={25} />
-        </Button>
+        <BootstrapTooltip open={openTooltip} title="menu">
+          <Button
+            sx={{
+              color: '#ffac4b',
+            }}
+            aria-describedby={id}
+            onClick={handleClickOpen}
+          >
+            <MenuIcon size={25} />
+          </Button>
+        </BootstrapTooltip>
         <Dialog open={open} TransitionComponent={Transition} keepMounted onClose={handleClose} aria-describedby="alert-dialog-slide-description">
-          <DialogTitle>{'What do you want to do?'}</DialogTitle>
+          {/* <DialogTitle>{'What do you want to do?'}</DialogTitle> */}
           {icons.map((icon, index) => {
             const option = options.get(index);
             const disabled = !!virtualBranch === false && option !== CREATE_BRANCH && option !== HELP;