Fix styling for alpha release

crumblepie · crumblepie · commit 27dbbc1b234d · 2022-02-10T09:51:42.000-05:00
diff --git a/README.md b/README.md
@@ -99,8 +99,7 @@ GIFS to be inserted here and centered aligned
 - [React Icons](https://react-icons.github.io/react-icons/)
 - [Xterm.js](https://xtermjs.org/)
 - [node-pty](https://www.npmjs.com/package/node-pty)
-- [TypeScript](https://www.typescriptlang.org/)
-- [React Modal](https://github.com/reactjs/react-modal)
+- [Jest](https://jestjs.io)
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - [Playwright](https://playwright.dev/docs/api/class-electronapplication)
 <p align="right">(<a href="#top">back to top</a>)</p>
@@ -152,7 +151,7 @@ Note there is currently an issue where the Monaco Code Editor keeps showing 'loa
 
 #### Running tests
 
-Instructions coming soon.
+Electron, React and Redux tests can be run using `npm run test`
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -167,7 +166,6 @@ Below is the generated directory structure of the React and Webpack application
 │    └── App.js
 │    └── index.js
 │    └── styles.css
-├── test                    # Automated tests (alternatively `spec` or `tests`)
 ├── webpack.config.js       # Webpack configuration
 ├── .babelrc                # Babel configuration
 ├── .gitignore              # Git ignore file
@@ -178,7 +176,7 @@ Below is the generated directory structure of the React and Webpack application
 
 1. Using the inbuilt terminal, `cd` into the Exported Project in your `Downloads` folder
 2. In the root of the Exported Project folder, install dependencies `npm install`
-3. Start an instance
+3. Start an instance `npm run start`
 4. If `Localhost:8080` does not open automatically in your default browser, navigate to the specified port to see your running app with Hot Module Reloading and a pre-configured webpack
 
 <br />
diff --git a/main.js b/main.js
@@ -44,8 +44,10 @@ function createWindow() {
 
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: bounds[0],
-    height: bounds[1],
+    // width: bounds[0],
+    // height: bounds[1],
+    width: 1440,
+    height: 880,
     show: false,
     webPreferences: {
       preload: path.join(__dirname, './src/electron/preload.js'),
@@ -55,6 +57,8 @@ function createWindow() {
     backgroundColor: '#121212',
     minWidth: 850,
     minHeight: 600,
+    maxWidth: 1440,
+    maxHeight: 880,
   });
 
   // and load the index.html of the app.
@@ -80,8 +84,10 @@ function createWindow() {
   // For the Terminal
   const ptyProcess = pty.spawn(shell, [], {
     name: 'xterm-color',
-    cols: 60,
-    rows: 80,
+    // cols: 60,
+    // cols: 40,
+    rows: 25,
+    cols: 70,
     cwd: process.env.HOME,
     env: process.env,
   });
diff --git a/src/assets/splash.html b/src/assets/splash.html
@@ -62,7 +62,7 @@
     </style>
   </head>
   <body>
-    <h3 style="color: #971afa">let's get into the fflow...</h3>
+    <h3 style="color: #971afa">let's get into fflow...</h3>
     <!-- <div class="loader"></div> -->
     <img src="./splashscreen.gif" class="gif" />
   </body>
diff --git a/src/components/DnD.jsx b/src/components/DnD.jsx
@@ -49,7 +49,7 @@ const DnD = () => {
             data-testid='app-logo'
             onClick={showAppCodeHandleClick}
           >
-            fflow.
+            fflow
           </p>
 
           <CompCreator />
@@ -66,7 +66,7 @@ const DnD = () => {
             className='bg-clip-text text-transparent mt-3.5 text-2xl font-bold bg-gradient-to-r from-violet-700 to-cyan-400'
             onClick={showAppCodeHandleClick}
           >
-            fflow.
+            fflow
           </p>
           <h2 id='file-tree-heading-page2'>FOLDERS</h2>
           <Tree data={structure} />
diff --git a/src/components/ExportApp.jsx b/src/components/ExportApp.jsx
@@ -36,8 +36,7 @@ const App = () => {
   return (
   <div className="App">
     <h1>Hello <span className='default-spans'>there!</span></h1>
-    <p>Thanks for using <span className='default-spans'>fflow</span></p>
-    <p>LOGO HERE</p>\n${tags.join('\n')}
+    <p>Thanks for using <span className='default-spans'>fflow</span></p>\n${tags.join('\n')}
   </div>
   )
 };
@@ -56,7 +55,7 @@ export default hot(App);`;
   "clean": "rm dist/bundle.js",
   "build-dev": "webpack --mode development",
   "build-prod": "webpack --mode production",
-  "start": "webpack serve --hot --mode development"
+  "start": "webpack serve --open --hot --mode development"
 },
 "dependencies": {
   "react": "^17.0.2",
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -34,16 +34,16 @@ const Navigation = () => {
   };
 
   return (
-    <div className='navigation-bar text-white bg-gradient-to-r from-violet-700 to-indigo-500'>
+    <div className='navigation-bar text-white bg-gradient-to-r from-violet-700 to-indigo-600'>
       <span className='nav-icons'>
         <FaPencilRuler data-testid='dnd-button' onClick={openDnD} />
       </span>
       <span className='nav-icons'>
         <FaFolderOpen data-testid='filetree-button' onClick={openFileTree} />
       </span>
-      <span className='nav-icons'>
+      {/* <span className='nav-icons'>
         <FaSave data-testid='save-button' onClick={handleSave} />{' '}
-      </span>
+      </span> */}
       <span className='nav-icons'>
         <FaDownload
           data-testid='export-button'
diff --git a/src/components/TerminalView.jsx b/src/components/TerminalView.jsx
@@ -7,13 +7,13 @@ const ipc = ipcRenderer;
 
 const terminalArgs = {
   fontSize: 15,
-  cols: 53,
-  rows: 35,
+  cols: 49,
+  rows: 38,
   fontFamily: 'monospace',
   theme: {
     background: 'black',
   },
-  cursoeStyle: 'bar',
+  cursorStyle: 'bar',
   cursorBlink: 'block',
 };
 
diff --git a/src/stylesheets/Canvas.css b/src/stylesheets/Canvas.css
@@ -47,14 +47,15 @@
 }
 
 .flex-auto {
-  border: 0.1rem dashed var(--textColor);
+  border: 0.1rem solid var(--textColor);
   text-align: center;
+  /* transition: 200ms; */
 }
 
 .flex-auto:hover {
-  /* border: 0.1rem solid var(--navigation-panel-background-color); */
+  border: 0.1rem solid var(--tab-container-color);
   cursor: move;
-  /* transition: 500ms; */
+  transition: 200ms;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/src/stylesheets/DnD.css b/src/stylesheets/DnD.css
@@ -13,7 +13,7 @@
   min-width: 14rem;
   /* padding: 30px auto; */
   box-shadow: 0.3rem 0.3rem 0.5rem var(--shadow-color);
-  border-right: 1px solid var(--file-tree-hover-color);
+  border-right: 0.1rem solid var(--file-tree-hover-color);
 }
 
 .fileTreeContainer {
@@ -30,6 +30,7 @@
   /* min-width: 230px; */
   min-width: 14rem;
   padding: 3rem auto;
+  border-right: 0.1rem solid var(--file-tree-hover-color);
 }
 
 h3 {
diff --git a/src/stylesheets/DragList.css b/src/stylesheets/DragList.css
@@ -23,6 +23,7 @@
   /* color: #6366f1; */
   /* color: #4f46e5; */
   color: var(--tab-container-color);
+  border: 0.1rem solid var(--tab-container-color);
   text-transform: uppercase;
   /* font-size: 11px;  */
   font-size: 0.7rem;
@@ -39,16 +40,18 @@
   /* border: 1px solid var(--navigation-panel-background-color); */
   /* background-color: var(--navigation-panel-background-color); */
 
-  border: 1px solid var(--tab-container-color);
-  /* color: var(--thirdBackgroundColor); */
+  border: 0.1rem solid var(--tab-container-color);
+
+  background-color: var(--tab-container-color);
+  color: var(--thirdBackgroundColor);
   cursor: move;
-  /* transition: 200ms; */
+  transition: 100ms;
 }
 .dragItems p:active {
   /* border-radius: 3px; */
   border-radius: 0.3rem;
   /* border: 0.1rem solid var(--navigation-panel-background-color); */
-  background-color: var(--navigation-panel-background-color);
+  background-color: var(--tab-container-color);
   color: var(--thirdBackgroundColor);
   cursor: move;
 }

Original file line number	Diff line number	Diff line change
`@@ -47,14 +47,15 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`.flex-auto {`
`50`		`- border: 0.1rem dashed var(--textColor);`
	`50`	`+ border: 0.1rem solid var(--textColor);`
`51`	`51`	`text-align: center;`
	`52`	`+ /* transition: 200ms; */`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`.flex-auto:hover {`
`55`		`- /* border: 0.1rem solid var(--navigation-panel-background-color); */`
	`56`	`+ border: 0.1rem solid var(--tab-container-color);`
`56`	`57`	`cursor: move;`
`57`		`- /* transition: 500ms; */`
	`58`	`+ transition: 200ms;`
`58`	`59`	`}`
`59`	`60`
`60`	`61`	`::-webkit-scrollbar-track {`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`min-width: 14rem;`
`14`	`14`	`/* padding: 30px auto; */`
`15`	`15`	`box-shadow: 0.3rem 0.3rem 0.5rem var(--shadow-color);`
`16`		`- border-right: 1px solid var(--file-tree-hover-color);`
	`16`	`+ border-right: 0.1rem solid var(--file-tree-hover-color);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.fileTreeContainer {`
`@@ -30,6 +30,7 @@`
`30`	`30`	`/* min-width: 230px; */`
`31`	`31`	`min-width: 14rem;`
`32`	`32`	`padding: 3rem auto;`
	`33`	`+ border-right: 0.1rem solid var(--file-tree-hover-color);`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`h3 {`