Finalise styling except Add and Clear Canvas Button

Author: crumblepie

README.md

@@ -53,15 +53,16 @@
     <li><a href="#run-exported-project">Run Exported Project</a></li>
     <li><a href="#contributors">Contributors</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing-guide">Contributing Guide</a></li>
     <li><a href="#license">License</a></li>
   </ol>
 </details>
 
 ## About
 
-fflow is a frontend developer tool to create React applications in no time and with minimal effort using the simple drag and drop UI. It combines the most compelling features of Create React App, React ES6 snippets, and a beautiful user experience. 
+fflow is a frontend developer tool to create React applications in no time and with minimal effort using the simple drag and drop UI. It combines the most compelling features of Create React App, React ES6 snippets, and a beautiful user experience.
 
-👉 https://openfflow.dev
+👉 https://fflow.dev
 
 GIFS to be inserted here and centered aligned
 
@@ -72,8 +73,10 @@ GIFS to be inserted here and centered aligned
 - Light and Dark Theme based on OS Preferences and Manual Toggle
 - Delete Project to restart project
 - Clear current canvas to restart nesting in a component
-- Live preview and add to your JavaScript code
-- Export your code with webpack to instantly setup your project
+- Live preview in code editor with the ability to edit or add code to your JavaScript, HTML, and CSS files
+- File tree switch between React components
+- Export your code files with webpack to instantly setup your project
+- Terminal initializing to the either powershell.exe or zsh based on the user's OS, so the user can navigate to their exported files and launch their app
 - Localstorage sync
 - Canvas outline when HTML tag or Component is dragged over it
 
@@ -88,8 +91,12 @@ GIFS to be inserted here and centered aligned
 - [Redux Toolkit](https://redux-toolkit.js.org)
 - [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)
 - [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)
+- [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>
 
 ## Getting Started
@@ -196,13 +203,13 @@ Below is the generated directory structure of the React and Webpack application
 
 ```
 ├── dist                    # Compiled files
-│    └── index.html     
+│    └── index.html
 ├── src                     # Source files
 │    └── App.js
 │    └── index.js
 │    └── styles.css
 ├── test                    # Automated tests (alternatively `spec` or `tests`)
-├── webpack.config.js       # Webpack configuration 
+├── webpack.config.js       # Webpack configuration
 ├── .babelrc                # Babel configuration
 ├── .gitignore              # Git ignore file
 ├── package.json            # Dependencies file
@@ -228,10 +235,12 @@ npm run start
 <br />
 
 ### Add Sass
+
 Adding Sass to your exported project requires updating webpack configs and adding necessary loaders.
 
 1. Install loaders for sass, `sass-loader` and `node-sass`
 2. Add another object to the rules in `webpack.config` with the following:
+
 ```javascript
  {
         test: /\.scss$/,
@@ -242,40 +251,48 @@ Adding Sass to your exported project requires updating webpack configs and addin
         ]
       }
 ```
+
 3. Rename `styles.css` to `styles.scss`
 
 ### Add Tailwind
-Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config. 
+
+Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.
+
 1. Install tailwind as a dependency
+
 ```
 npm install tailwindcss
 ```
 
 2. Install postcss-loader and autoprefixer as development dependencies
+
 ```
 npm install -D postcss-loader autoprefixer
 ```
+
 3. Copy the following copy into `src/styles.css`
+
 ```css
 @tailwind base;
 
 @tailwind components;
 
 @tailwind utilities;
 ```
+
 4. Create a `postcss.config.js` file and copy the following code in
+
 ```javascript
 module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer')
-  ]
+  plugins: [require('tailwindcss'), require('autoprefixer')],
 };
 ```
+
 5. Add `'postcss-loader'` to the css rules in `webpack.config`
 
 ### Change App Title
-This boilerplate names your project `Exported Project`. You can change the app title by inserting the app title within the `<title> </title>` tags in `index.html`. 
+
+This boilerplate names your project `Exported Project`. You can change the app title by inserting the app title within the `<title> </title>` tags in `index.html`.
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -300,8 +317,21 @@ Project Links: [Github](https://github.com/oslabs-beta/fflow) | [Linkedin](https
 - Live Editing with other collaborators
 - AWS hosted version
 
-Read our [contributing guide](https://github.com/oslabs-beta/CONTRIBUTING.md) for more information on how to propose fixes and improvements to fflow.
+## Contributing Guide
+
+Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+
+1. Fork this repo
+2. Create your Feature Branch (git checkout -b yourgithubhandle/AmazingFeature)
+3. Commit your Changes (git commit -m 'Add some AmazingFeature')
+4. Push to the Branch (git push origin yourgithubhandle/AmazingFeature)
+5. Open a Pull Request
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- Read our [contributing guide](https://github.com/oslabs-beta/CONTRIBUTING.md) for more information on how to propose fixes and improvements to fflow. -->
 
 ## License
 
-Licensed under MIT License © [fflow](fflow.io).
+Licensed under MIT License © [fflow](fflow.dev).

src/assets/splash.html

@@ -10,9 +10,9 @@
         justify-content: center;
         align-items: center;
         margin: 0;
-        border: 0.3rem solid transparent;
+        /* border: 0.2rem solid transparent;
         border-image: linear-gradient(45deg, #971afa, #3bbde8);
-        border-image-slice: 1;
+        border-image-slice: 1; */
       }
 
       h3 {
@@ -34,24 +34,6 @@
         width: auto;
       }
 
-      /* .loader {
-        border: 5px solid #971afa;
-        border-radius: 50%;
-        border-top: 5px solid #272727;
-        width: 40px;
-        height: 40px;
-        -webkit-animation: spin 1s linear infinite;
-         Safari
-        animation: spin 1s linear infinite;
-        margin: auto;
-        left: 0;
-        right: 0;
-        top: 0px;
-        bottom: 0;
-        position: fixed;
-        border: 0.2rem solid #971afa;
-      } */
-
       /* Safari */
       @-webkit-keyframes spin {
         0% {

src/components/CanvasItem.jsx

@@ -22,7 +22,7 @@ const CanvasItem = (props) => {
   return (
     <div className='container mx-auto px-2 md:px-4 my-4 md:mb-2'>
       <div
-        id='canvas-item'
+        // id='canvas-item'
         className='flex-auto items-center justify-around p-2 md:p-4 shadow-md rounded-lg relative'
         ref={props.provided.innerRef}
         {...props.provided.draggableProps}

src/components/DnD.jsx

@@ -43,7 +43,12 @@ const DnD = () => {
     <>
       {toggleState === 'DnD' ? (
         <div className='dndContainer'>
-          <p id='app-name' data-testid='app-logo' onClick={showAppCodeHandleClick}>
+          <p
+            // id='app-name'
+            className='bg-clip-text text-transparent mt-3.5 text-2xl font-bold bg-gradient-to-r from-violet-700 to-cyan-400'
+            data-testid='app-logo'
+            onClick={showAppCodeHandleClick}
+          >
             fflow.
           </p>
 
@@ -56,7 +61,11 @@ const DnD = () => {
         </div>
       ) : (
         <div className='fileTreeContainer'>
-          <p id='app-name' onClick={showAppCodeHandleClick}>
+          <p
+            // id='app-name'
+            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.
           </p>
           <h2 id='file-tree-heading-page2'>FOLDERS</h2>

src/components/Header.jsx

@@ -33,7 +33,7 @@ const Header = () => {
     <div className='headerContainer'>
       {/* <!-- Modal toggle --> */}
       <button
-        className='block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800'
+        class='block text-white bg-indigo-700 hover:bg-indigo-800 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800'
         type='button'
         data-modal-toggle='popup-modal'
         id='clear-canvas-button'

src/components/TabContainer.jsx

@@ -25,7 +25,6 @@ const TabContainer = () => {
         <div className={tabState === 1 ? 'active-content' : 'content'}>
           <JSCodeEditor />
         </div>
-        {/* style={{ height: '50vh', width: '10px' }} */}
         <div id='terminal-viewer' className={tabState === 2 ? 'active-content' : 'content'}>
           <TerminalView />
         </div>

src/components/TreeFile.jsx

@@ -23,7 +23,7 @@ const FILE_ICONS = {
     </span>
   ),
   css: (
-    <span className='nested-files' style={{ color: 'var(--css-icon-color' }}>
+    <span className='nested-files' style={{ backgroundColor: 'var(--css-icon-background-color)', color: 'var(--css-icon-color' }}>
       <DiCss3Full />
     </span>
   ),
@@ -47,11 +47,13 @@ const TreeFile = ({ name, code }) => {
   let currentFile = useSelector((state) => state.canvas.currentFile);
 
   const handleClick = () => {
-    // console.log('filename is: ', name);
-    dispatch(saveComponentCode());
+    if (ext != 'css'){
+      dispatch(saveComponentCode());
+  
+      currentFile = name;
+      dispatch(renderComponentCode({ name }));
+    }
 
-    currentFile = name;
-    dispatch(renderComponentCode({ name }));
   };
 
   return (

src/components/TreeFolder.jsx

@@ -17,7 +17,7 @@ const StyledFolder = styled.div`
   }
 
   .folder--label:hover {
-    background-color: var(--neutral-800);
+    background-color: var(--file-tree-hover-color);
   }
 `;
 

src/stylesheets/App.css

@@ -73,7 +73,8 @@ body {
 body {
   --backgroundColor: var(--secondaryBackgroundColor);
   --textColor: #ffffff;
-  --thirdBackgroundColor: var(--secondaryBackgroundColor);
+  /* --thirdBackgroundColor: var(--secondaryBackgroundColor); */
+  --thirdBackgroundColor: #27272a;
   --errorColor: #cf6679;
   --navigation-panel-background-color: var(--purple-200);
   --navigation-panel-border-color: var(--neutral-600);
@@ -84,7 +85,11 @@ body {
   --canvas-file-name-color: #61dbfb;
   --javascript-icon-color: #f7df1e;
   --javascript-icon-background-color: transparent;
-  --shadow-color: rgb(31, 31, 31);
+  --css-icon-background-color: transparent;
+  --css-icon-color: #0098ff;
+  --file-tree-hover-color: var(--neutral-800);
+  /* --shadow-color: rgb(31, 31, 31); */
+  /* background-color: #27272a; */
 }
 
 .theme-light {
@@ -103,7 +108,10 @@ body {
   --canvas-file-name-color: #4338ca;
   --javascript-icon-color: black;
   --javascript-icon-background-color: #f7df1e;
-  --shadow-color: rgba(32, 32, 32, 0.24);
+  --css-icon-background-color: #0098ff;
+  --css-icon-color: white;
+  --file-tree-hover-color: var(--neutral-300);
+  /* --shadow-color: rgba(32, 32, 32, 0.24); */
 }
 
 /* THEME BASED ON USER'S OS PREFERENCE */

src/stylesheets/BodyContainer.css

@@ -1,4 +1,4 @@
-.bodyContainer { 
+.bodyContainer {
   display: flex;
   flex: 1 1;
   /* gap: 30px; */
@@ -13,8 +13,12 @@
 #headerAndCodePreviewContainer {
   display: flex;
   flex-direction: column;
-  /* flex: 1 1 400px; */
   flex: 1 1 20rem;
   max-width: 35%;
   height: 100%;
-}
+  border-left: 1px solid var(--file-tree-hover-color);
+}
+
+/* background-color: #44403c; */
+/* background-color: #404040;
+   */