Skip to content

Commit 27dbbc1

Browse files
crumblepiecrumblepie
committed
Fix styling for alpha release
1 parent 791f250 commit 27dbbc1

File tree

10 files changed

+37
-29
lines changed

10 files changed

+37
-29
lines changed

‎README.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,7 @@ GIFS to be inserted here and centered aligned
9999
- [React Icons](https://react-icons.github.io/react-icons/)
100100
- [Xterm.js](https://xtermjs.org/)
101101
- [node-pty](https://www.npmjs.com/package/node-pty)
102-
- [TypeScript](https://www.typescriptlang.org/)
103-
- [React Modal](https://github.com/reactjs/react-modal)
102+
- [Jest](https://jestjs.io)
104103
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
105104
- [Playwright](https://playwright.dev/docs/api/class-electronapplication)
106105
<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
152151

153152
#### Running tests
154153

155-
Instructions coming soon.
154+
Electron, React and Redux tests can be run using `npm run test`
156155

157156
<p align="right">(<a href="#top">back to top</a>)</p>
158157

@@ -167,7 +166,6 @@ Below is the generated directory structure of the React and Webpack application
167166
│ └── App.js
168167
│ └── index.js
169168
│ └── styles.css
170-
├── test # Automated tests (alternatively `spec` or `tests`)
171169
├── webpack.config.js # Webpack configuration
172170
├── .babelrc # Babel configuration
173171
├── .gitignore # Git ignore file
@@ -178,7 +176,7 @@ Below is the generated directory structure of the React and Webpack application
178176

179177
1. Using the inbuilt terminal, `cd` into the Exported Project in your `Downloads` folder
180178
2. In the root of the Exported Project folder, install dependencies `npm install`
181-
3. Start an instance
179+
3. Start an instance `npm run start`
182180
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
183181

184182
<br />

‎main.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,10 @@ function createWindow() {
4444

4545
// Create the browser window.
4646
mainWindow = new BrowserWindow({
47-
width: bounds[0],
48-
height: bounds[1],
47+
// width: bounds[0],
48+
// height: bounds[1],
49+
width: 1440,
50+
height: 880,
4951
show: false,
5052
webPreferences: {
5153
preload: path.join(__dirname, './src/electron/preload.js'),
@@ -55,6 +57,8 @@ function createWindow() {
5557
backgroundColor: '#121212',
5658
minWidth: 850,
5759
minHeight: 600,
60+
maxWidth: 1440,
61+
maxHeight: 880,
5862
});
5963

6064
// and load the index.html of the app.
@@ -80,8 +84,10 @@ function createWindow() {
8084
// For the Terminal
8185
const ptyProcess = pty.spawn(shell, [], {
8286
name: 'xterm-color',
83-
cols: 60,
84-
rows: 80,
87+
// cols: 60,
88+
// cols: 40,
89+
rows: 25,
90+
cols: 70,
8591
cwd: process.env.HOME,
8692
env: process.env,
8793
});

‎src/assets/splash.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</style>
6363
</head>
6464
<body>
65-
<h3 style="color: #971afa">let's get into the fflow...</h3>
65+
<h3 style="color: #971afa">let's get into fflow...</h3>
6666
<!-- <div class="loader"></div> -->
6767
<img src="./splashscreen.gif" class="gif" />
6868
</body>

‎src/components/DnD.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const DnD = () => {
4949
data-testid='app-logo'
5050
onClick={showAppCodeHandleClick}
5151
>
52-
fflow.
52+
fflow
5353
</p>
5454

5555
<CompCreator />
@@ -66,7 +66,7 @@ const DnD = () => {
6666
className='bg-clip-text text-transparent mt-3.5 text-2xl font-bold bg-gradient-to-r from-violet-700 to-cyan-400'
6767
onClick={showAppCodeHandleClick}
6868
>
69-
fflow.
69+
fflow
7070
</p>
7171
<h2 id='file-tree-heading-page2'>FOLDERS</h2>
7272
<Tree data={structure} />

‎src/components/ExportApp.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@ const App = () => {
3636
return (
3737
<div className="App">
3838
<h1>Hello <span className='default-spans'>there!</span></h1>
39-
<p>Thanks for using <span className='default-spans'>fflow</span></p>
40-
<p>LOGO HERE</p>\n${tags.join('\n')}
39+
<p>Thanks for using <span className='default-spans'>fflow</span></p>\n${tags.join('\n')}
4140
</div>
4241
)
4342
};
@@ -56,7 +55,7 @@ export default hot(App);`;
5655
"clean": "rm dist/bundle.js",
5756
"build-dev": "webpack --mode development",
5857
"build-prod": "webpack --mode production",
59-
"start": "webpack serve --hot --mode development"
58+
"start": "webpack serve --open --hot --mode development"
6059
},
6160
"dependencies": {
6261
"react": "^17.0.2",

‎src/components/Navigation.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@ const Navigation = () => {
3434
};
3535

3636
return (
37-
<div className='navigation-bar text-white bg-gradient-to-r from-violet-700 to-indigo-500'>
37+
<div className='navigation-bar text-white bg-gradient-to-r from-violet-700 to-indigo-600'>
3838
<span className='nav-icons'>
3939
<FaPencilRuler data-testid='dnd-button' onClick={openDnD} />
4040
</span>
4141
<span className='nav-icons'>
4242
<FaFolderOpen data-testid='filetree-button' onClick={openFileTree} />
4343
</span>
44-
<span className='nav-icons'>
44+
{/* <span className='nav-icons'>
4545
<FaSave data-testid='save-button' onClick={handleSave} />{' '}
46-
</span>
46+
</span> */}
4747
<span className='nav-icons'>
4848
<FaDownload
4949
data-testid='export-button'

‎src/components/TerminalView.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ const ipc = ipcRenderer;
77

88
const terminalArgs = {
99
fontSize: 15,
10-
cols: 53,
11-
rows: 35,
10+
cols: 49,
11+
rows: 38,
1212
fontFamily: 'monospace',
1313
theme: {
1414
background: 'black',
1515
},
16-
cursoeStyle: 'bar',
16+
cursorStyle: 'bar',
1717
cursorBlink: 'block',
1818
};
1919

‎src/stylesheets/Canvas.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,15 @@
4747
}
4848

4949
.flex-auto {
50-
border: 0.1rem dashed var(--textColor);
50+
border: 0.1rem solid var(--textColor);
5151
text-align: center;
52+
/* transition: 200ms; */
5253
}
5354

5455
.flex-auto:hover {
55-
/* border: 0.1rem solid var(--navigation-panel-background-color); */
56+
border: 0.1rem solid var(--tab-container-color);
5657
cursor: move;
57-
/* transition: 500ms; */
58+
transition: 200ms;
5859
}
5960

6061
::-webkit-scrollbar-track {

‎src/stylesheets/DnD.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
min-width: 14rem;
1414
/* padding: 30px auto; */
1515
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);
1717
}
1818

1919
.fileTreeContainer {
@@ -30,6 +30,7 @@
3030
/* min-width: 230px; */
3131
min-width: 14rem;
3232
padding: 3rem auto;
33+
border-right: 0.1rem solid var(--file-tree-hover-color);
3334
}
3435

3536
h3 {

‎src/stylesheets/DragList.css

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
/* color: #6366f1; */
2424
/* color: #4f46e5; */
2525
color: var(--tab-container-color);
26+
border: 0.1rem solid var(--tab-container-color);
2627
text-transform: uppercase;
2728
/* font-size: 11px; */
2829
font-size: 0.7rem;
@@ -39,16 +40,18 @@
3940
/* border: 1px solid var(--navigation-panel-background-color); */
4041
/* background-color: var(--navigation-panel-background-color); */
4142

42-
border: 1px solid var(--tab-container-color);
43-
/* color: var(--thirdBackgroundColor); */
43+
border: 0.1rem solid var(--tab-container-color);
44+
45+
background-color: var(--tab-container-color);
46+
color: var(--thirdBackgroundColor);
4447
cursor: move;
45-
/* transition: 200ms; */
48+
transition: 100ms;
4649
}
4750
.dragItems p:active {
4851
/* border-radius: 3px; */
4952
border-radius: 0.3rem;
5053
/* border: 0.1rem solid var(--navigation-panel-background-color); */
51-
background-color: var(--navigation-panel-background-color);
54+
background-color: var(--tab-container-color);
5255
color: var(--thirdBackgroundColor);
5356
cursor: move;
5457
}

0 commit comments

Comments
 (0)