Skip to content

Commit 10b813b

Browse files
jesslleejessllee
authored
Merge pull request #150 from open-source-labs/will/style_tweaks
Will/style tweaks
2 parents e06b90e + d74589a commit 10b813b

File tree

11 files changed

+126
-104
lines changed

11 files changed

+126
-104
lines changed

‎app/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import Splash from './components/Splash';
33
import DashboardContainer from './containers/DashboardContainer';
4+
import './stylesheets/scrollBar.scss';
45

56
const App: React.FC = React.memo(() => {
67
// Disable splash for development

‎app/components/Contact.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Contact = React.memo(() => {
2121
Please feel free to provide any feedback, concerns, or comments.
2222
</p>
2323
<p style={currentMode}>
24-
You can find issues the team is currently working on&nbsp;
24+
You can find issues the team is currently working on{' '}
2525
<a
2626
style={currentMode}
2727
id="issueLink"
@@ -39,38 +39,32 @@ const Contact = React.memo(() => {
3939
<div className="email-container">
4040
<form>
4141
<label style={currentMode} htmlFor="fname">
42-
First Name: &nbsp;
42+
First Name:
43+
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
4344
</label>
44-
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
45-
<br />
4645
<label style={currentMode} htmlFor="lname">
47-
Last Name: &nbsp;
46+
Last Name:{' '}
47+
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
4848
</label>
49-
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
50-
<br />
5149
<label style={currentMode} htmlFor="email">
52-
E-mail: &nbsp;
50+
E-mail:
51+
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
5352
</label>
54-
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
55-
<br />
5653
<label style={currentMode} htmlFor="subject">
57-
Subject: &nbsp;
54+
Subject:
55+
<input type="text" id="subject" name="subject" placeholder="Subject" />
5856
</label>
59-
<input type="text" id="subject" name="subject" placeholder="Subject" />
60-
<br />
6157
<label style={currentMode} id="messageLabel" htmlFor="message">
6258
Message:{' '}
6359
<span>
6460
<textarea id="message" name="message" placeholder="Write something.." />
6561
</span>
6662
</label>
6763

68-
<br />
6964
<label style={currentMode} htmlFor="myfile">
7065
Select a file:{' '}
66+
<input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
7167
</label>
72-
<input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
73-
<br />
7468
<input style={currentMode} id="contact-submit" type="submit" value="Submit" />
7569
</form>
7670
</div>

‎app/containers/TitleBarContainer.tsx renamed to ‎app/components/WindowBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import Minimize from '@material-ui/icons/RemoveSharp';
55

66
const { ipcRenderer } = window.require('electron');
77

8-
import '../stylesheets/TitleBarContainer.scss';
8+
import '../stylesheets/WindowBar.scss';
99

10-
export default function TitleBarContainer() {
10+
export default function WindowBar() {
1111
return (
1212
<div id="titleBar">
1313
<Minimize className="button" id="min-btn" onClick={() => ipcRenderer.send('min')} />

‎app/containers/MainContainer.tsx

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext, useEffect } from 'react';
22
import { Redirect, Route, Switch } from 'react-router-dom';
33
import LandingPageContainer from './LandingPageContainer';
4-
import TitleBarContainer from './TitleBarContainer';
4+
import WindowBar from '../components/WindowBar';
55
import About from '../components/About';
66
import Contact from '../components/Contact';
77
import Settings from '../components/Settings';
@@ -26,25 +26,27 @@ const MainContainer = React.memo(() => {
2626
}, []);
2727

2828
return (
29-
<div className="main-container" style={currentModeCSS}>
30-
<div className="main-routes">
31-
<TitleBarContainer />
32-
<Switch>
33-
<Route exact path="/" component={LandingPageContainer} />
34-
<Route exact path="/awaitingApproval" component={AwaitingApproval} />
35-
<Route exact path="/about" render={() => checkAuth(About)} />
36-
<Route exact path="/contact" render={() => checkAuth(Contact)} />
37-
<Route exact path="/settings" render={() => checkAuth(Settings)} />
38-
<Route exact path="/applications" render={() => checkAuth(Occupied)} />
39-
<Route
40-
exact
41-
path="/applications/:app/:service"
42-
render={() => checkAuth(GraphsContainer)}
43-
/>
44-
<Route path="*" render={() => <h1>Not found</h1>} />
45-
</Switch>
29+
<>
30+
{/* <WindowBar /> */}
31+
<div className="main-container" style={currentModeCSS}>
32+
<div className="main-routes">
33+
<Switch>
34+
<Route exact path="/" component={LandingPageContainer} />
35+
<Route exact path="/awaitingApproval" component={AwaitingApproval} />
36+
<Route exact path="/about" render={() => checkAuth(About)} />
37+
<Route exact path="/contact" render={() => checkAuth(Contact)} />
38+
<Route exact path="/settings" render={() => checkAuth(Settings)} />
39+
<Route exact path="/applications" render={() => checkAuth(Occupied)} />
40+
<Route
41+
exact
42+
path="/applications/:app/:service"
43+
render={() => checkAuth(GraphsContainer)}
44+
/>
45+
<Route path="*" render={() => <h1>Not found</h1>} />
46+
</Switch>
47+
</div>
4648
</div>
47-
</div>
49+
</>
4850
);
4951
});
5052

‎app/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
33
import './stylesheets/index.scss';
44
import { createMuiTheme, ThemeProvider } from '@material-ui/core/';
55
import App from './App';
6+
import WindowBar from './components/WindowBar';
67

78
const theme = createMuiTheme({
89
typography: {
@@ -13,6 +14,7 @@ const theme = createMuiTheme({
1314

1415
ReactDOM.render(
1516
<ThemeProvider theme={theme}>
17+
<WindowBar />
1618
<App />
1719
</ThemeProvider>,
1820
document.getElementById('app')

‎app/stylesheets/About.scss

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
@import './constants.scss';
22

33
.about {
4-
width: 50%;
5-
margin: 25% 25%;
4+
min-width: 421px;
5+
max-width: 600px;
6+
margin: auto 20px;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
width: 90%;
11+
height: 100%;
612
}
713

814
.sprout {
@@ -58,8 +64,8 @@
5864
border-radius: 50%;
5965
background-size: scale-down;
6066
&:hover {
61-
background-color: $hover;
62-
opacity: 0.85;
63-
animation: none;
64-
}
65-
}
67+
background-color: $hover;
68+
opacity: 0.85;
69+
animation: none;
70+
}
71+
}

‎app/stylesheets/Contact.scss

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,13 @@
88
align-items: center;
99
justify-content: center;
1010
justify-items: center;
11-
position: absolute;
12-
margin-left: 50px;
1311
top: 0;
1412
left: 0;
15-
width: 100vw;
16-
height: 100vh;
13+
min-height: 100vh;
1714
opacity: 1;
1815
vertical-align: top;
1916
justify-content: center;
20-
align-items: center;;
17+
align-items: center;
2118
color: $background;
2219
}
2320
.contact-border {
@@ -30,8 +27,9 @@
3027
border: none;
3128
box-shadow: $boxshadow2;
3229
padding: 30px;
33-
width: 50%;
34-
margin: 25% 25%;
30+
min-width: 421px;
31+
max-width: 600px;
32+
margin: 100px 20px;
3533

3634
&:hover {
3735
background-color: rgba(255, 255, 255, 0.1);
@@ -59,28 +57,34 @@
5957
align-self: flex-start;
6058
padding: 0px 20px;
6159
margin: 0;
62-
min-width: 50%;
63-
64-
textarea {
65-
font-size: 16px;
66-
}
67-
68-
input {
69-
font-size: 16px;
70-
color: $header;
71-
}
72-
73-
input[type='text'] {
74-
width: 60%;
75-
color: $header;
76-
}
77-
78-
#subject {
79-
width: 300px;
80-
}
81-
82-
#email {
83-
width: 300px;
60+
width: 100%;
61+
form {
62+
width: 100%;
63+
label {
64+
display: flex;
65+
flex-direction: column;
66+
width: 100%;
67+
input {
68+
width: 100%;
69+
color: $header;
70+
font-size: 16px;
71+
padding: 6px;
72+
&[type='file'] {
73+
width: 226px;
74+
cursor: pointer;
75+
}
76+
}
77+
textarea {
78+
font-size: 16px;
79+
width: 100%;
80+
min-width: 100%;
81+
max-width: 100%;
82+
height: 150px;
83+
min-height: 50px;
84+
max-height: 300px;
85+
padding: 6px;
86+
}
87+
}
8488
}
8589

8690
#messageLabel {
@@ -99,7 +103,6 @@
99103
color: $background;
100104
}
101105

102-
103106
#contact-submit {
104107
border: none;
105108
color: $background;
@@ -119,7 +122,7 @@
119122

120123
input[type='file'] {
121124
border: none;
122-
125+
123126
&:hover {
124127
border: none;
125128
}
@@ -152,8 +155,9 @@ input[type='file'] {
152155

153156
#issueLink {
154157
color: $header;
155-
text-decoration: none;
158+
cursor: pointer;
159+
text-decoration: underline;
156160
&:hover {
157-
color: $gblue;
161+
color: blue !important;
158162
}
159-
}
163+
}

‎app/stylesheets/Occupied.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
width: 100%;
3333
align-items: center;
3434
margin: 0;
35-
margin-top: 33px;
35+
margin-top: 40px;
3636
}
3737

3838
#listIcon {
@@ -293,7 +293,7 @@ button {
293293
background: none;
294294
border: 0;
295295
outline: none;
296-
box-shadow: none;
296+
box-shadow: none;
297297
transform: translateX(-40px);
298298
filter: none;
299299
&:hover {
@@ -373,8 +373,6 @@ select:-webkit-autofill:focus {
373373
align-self: center;
374374
width: 80%;
375375
margin-top: 50px;
376-
margin-left: 155px;
377-
margin-right: 160px;
378376
}
379377

380378
.card {

‎app/stylesheets/TitleBarContainer.scss renamed to ‎app/stylesheets/WindowBar.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
width: calc(100% - #{$sidebarWidth});
1010
-webkit-app-region: drag;
1111
z-index: 3;
12+
transform: translateX(140px);
13+
height: 40px;
1214
.button {
1315
margin: 9px 7px 0px;
1416
-webkit-app-region: no-drag;

‎app/stylesheets/scrollBar.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* width */
2+
::-webkit-scrollbar {
3+
width: 10px;
4+
}
5+
6+
/* Track */
7+
::-webkit-scrollbar-track {
8+
background: #f1f1f1;
9+
}
10+
11+
/* Handle */
12+
::-webkit-scrollbar-thumb {
13+
background: #888;
14+
}
15+
16+
/* Handle on hover */
17+
::-webkit-scrollbar-thumb:hover {
18+
background: #555;
19+
}
20+
21+
body {
22+
height: 100vh;
23+
&::-webkit-scrollbar {
24+
display: none;
25+
}
26+
#app {
27+
height: 100vh;
28+
overflow-y: scroll;
29+
overflow-x: hidden;
30+
&::-webkit-scrollbar {
31+
width: 10px;
32+
}
33+
}
34+
}

0 commit comments

Comments
 (0)