Skip to content

Commit 61c3259

Browse files
lauraaforlauraafor
authored
Merge pull request #3 from oslabs-beta/laura
Laura - style updates
2 parents 6602095 + 48830a2 commit 61c3259

File tree

19 files changed

+92
-113
lines changed

19 files changed

+92
-113
lines changed

‎app/src/Dashboard/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
}
7777

7878
.header {
79-
background-color: #0099E6;
79+
background-color: #29a38a;
8080
color: rgba(255, 255, 255, 0.897);
8181
width: 100%;
8282
position: relative;

‎app/src/components/App.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
setInitialState,
66
toggleLoggedIn
77
} from '../redux/reducers/slice/appStateSlice';
8-
import { useDispatch, useSelector } from 'react-redux';
8+
import { useDispatch } from 'react-redux';
99

1010
import AppContainer from '../containers/AppContainer';
1111
import Cookies from 'js-cookie';
@@ -99,12 +99,6 @@ export const App: React.FC = (): JSX.Element => {
9999

100100
return (
101101
<div className="app">
102-
<header
103-
style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
104-
>
105-
ReacType
106-
</header>
107-
108102
<AppContainer />
109103
</div>
110104
);

‎app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const AddContextForm = ({
129129
<Select
130130
required
131131
sx={{ width: 425 }}
132-
style={{ border: '1px solid #0099e6', color: color }}
132+
style={{ border: '1px solid #29a38a', color: color }}
133133
value={currentContext}
134134
label="Select Context"
135135
MenuProps={{ disablePortal: true }}

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -483,11 +483,11 @@ const useStyles = makeStyles((theme: Theme) => ({
483483
width: '100%'
484484
},
485485
rootCheckBox: {
486-
borderColor: '#186BB4',
486+
borderColor: '#46C0A5',
487487
padding: '0px'
488488
},
489489
rootCheckBoxLabel: {
490-
borderColor: '#186BB4'
490+
borderColor: '#46C0A5'
491491
},
492492
panelWrapper: {
493493
width: '100%',
@@ -511,8 +511,8 @@ const useStyles = makeStyles((theme: Theme) => ({
511511
alignItems: 'center',
512512
textAlign: 'center',
513513
width: '500px',
514-
backgroundColor: '#186BB4',
515-
border: '5px solid #186BB4'
514+
backgroundColor: '#46C0A5',
515+
border: '5px solid #46C0A5'
516516
},
517517
panelSubheader: {
518518
textAlign: 'center',
@@ -540,7 +540,7 @@ const useStyles = makeStyles((theme: Theme) => ({
540540
fontSize: '90%',
541541
textAlign: 'center',
542542
margin: '-20px 0px 5px 150px',
543-
border: ' 1px solid #186BB4',
543+
border: ' 1px solid #46C0A5',
544544
transition: '0.3s'
545545
},
546546
rootToggle: {

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ const useStyles = makeStyles((theme) => ({
156156
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
157157
},
158158
rootLight: {
159-
backgroundColor: '#003366'
159+
backgroundColor: '#1e8370'
160160
},
161161
bottomHeader: {
162162
flex: 1,
@@ -215,7 +215,7 @@ const useStyles = makeStyles((theme) => ({
215215
marginLeft: '10px'
216216
},
217217
projectSelector: {
218-
backgroundColor: '#0099E6',
218+
backgroundColor: '#29a38a',
219219
color: 'white'
220220
}
221221
}));

‎app/src/components/form/Selector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const FormSelector = (props): JSX.Element => {
3636
<div className={props.classes.configValue}>
3737
<FormControl variant="filled" className={props.classes.formControl}>
3838
<Select
39-
style={props.isThemeLight ? { border: '1px solid #0099e6' } : null }
39+
style={props.isThemeLight ? { border: '1px solid #46C0A5' } : null }
4040
value={props.selectValue}
4141
name={props.name}
4242
onChange={props.handleChange}

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ const useStyles = makeStyles({
339339
transition: '0.3s',
340340
borderRadius: '4px',
341341
alignSelf: 'center',
342-
border: '1px solid #186BB4'
342+
border: '1px solid #46C0A5'
343343
},
344344
lightThemeFontColor: {
345345
color: 'white',

‎app/src/components/main/CanvasContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function CanvasContainer(props): JSX.Element {
1919

2020
const canvasContainerStyle: React.CSSProperties = {
2121
width: '100%',
22-
backgroundColor: 'lightgrey',
22+
backgroundColor: 'rgba(25, 25, 25)',
2323
border: '2px solid grey',
2424
borderBottom: 'none',
2525
overflow: 'auto'
@@ -35,7 +35,7 @@ function CanvasContainer(props): JSX.Element {
3535
color: '#ffffff',
3636
backgroundColor: '#151515',
3737
zIndex: 0,
38-
border: '2px solid #186BB4'
38+
border: '2px solid #46C0A5'
3939
} as const;
4040

4141
return (

‎app/src/components/main/DirectChildComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function DirectChildComponent({
5151
const interactiveStyle = {
5252
border:
5353
state.canvasFocus.childId === childId
54-
? '3px solid #186BB4'
54+
? '3px solid #46C0A5'
5555
: '1px Solid grey',
5656
boxShadow:
5757
state.canvasFocus.childId === childId ? '1px 1px 3px #a7cced' : ''

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
4848
const interactiveStyle = {
4949
border:
5050
state.canvasFocus.childId === childId
51-
? '4px solid #186BB4'
51+
? '4px solid #46C0A5'
5252
: '1px solid grey'
5353
};
5454

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ function DirectChildHTMLNestable({
144144
const interactiveStyle = {
145145
border:
146146
state.canvasFocus.childId === childId
147-
? '3px solid #186BB4'
147+
? '3px solid #46C0A5'
148148
: '1px solid grey'
149149
};
150150

@@ -186,7 +186,7 @@ function DirectChildHTMLNestable({
186186
>
187187
<span>
188188
<strong style={{ color: 'white' }}>{HTMLType.placeHolderShort}</strong>
189-
<strong style={{ color: '#0099E6' }}>
189+
<strong style={{ color: '#29a38a' }}>
190190
{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
191191
</strong>
192192
{routeButton}

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,11 +310,11 @@ const useStyles = makeStyles({
310310
width: '100%'
311311
},
312312
rootCheckBox: {
313-
borderColor: '#186BB4',
313+
borderColor: '#46C0A5',
314314
padding: '0px'
315315
},
316316
rootCheckBoxLabel: {
317-
borderColor: '#186BB4'
317+
borderColor: '#46C0A5'
318318
},
319319
newComponent: {
320320
color: '#C6C6C6',

‎app/src/components/right/ComponentPanelRoutingItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const ComponentPanelRoutingItem: React.FC<{}> = () => {
8080
backgroundColor: 'transparent',
8181
height: '75px',
8282
marginBottom: '15px',
83-
border: '2px dotted #186BB4',
83+
border: '2px dotted #46C0A5',
8484
borderRadius: '8px'
8585
}}
8686
>

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1027,7 +1027,7 @@ const useStyles = makeStyles({
10271027
paddingRight: '20px'
10281028
},
10291029
saveButtonLight: {
1030-
border: '1px solid #186BB4',
1030+
border: '1px solid #46C0A5',
10311031
backgroundColor: 'rgba(0, 0, 0, 0.2)'
10321032
},
10331033
saveButtonDark: {

‎app/src/public/styles/style.css

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ body {
2222
padding: 0;
2323
font-family: 'Roboto', 'Raleway', sans-serif;
2424
font-size: 0.9 em;
25-
font-weight: 400;
25+
font-weight: normal;
2626
overflow: hidden;
2727
height: 100vh;
2828
width: 100vw;
@@ -241,26 +241,28 @@ span.material-symbols-outlined {
241241

242242
#HTMLItemsGrid {
243243
display: flex;
244-
245244
/* margin-left: 35px; */
246245
}
247246

248247
#HTMLItem {
249248
transition: 0.3s;
250-
border: 1px solid #8F8F8F;
249+
border: 1px solid #d2f5eb;
250+
color: #f2fbf8;
251+
padding: 10%;
252+
border-radius: 5px;
251253
}
252254

253255
#HTMLItem:hover {
254-
background-color: #383838;
255-
color: white;
256+
background-color: #333333;
257+
color: #257c74;
256258
}
257259

258260
#submitButton {
259261
margin-left: 5px;
260262
}
261263

262264
#submitButton:hover {
263-
background-color: #297ac2;
265+
background-color: #29a38a;
264266
color: white;
265267
border: none;
266268
cursor: pointer;
@@ -392,7 +394,7 @@ h1 {
392394
}
393395

394396
#export-modal:hover {
395-
background-color: #303f9f;
397+
background-color: #29a38a;
396398
cursor: pointer;
397399
}
398400

@@ -451,12 +453,12 @@ RIGHT COLUMN
451453
}
452454

453455
#addComponentButton {
454-
border: 2px solid #186BB4;
456+
border: 2px solid #46C0A5;
455457
border-radius: 4px;
456458
}
457459

458460
#addComponentButton:hover {
459-
background-color: #297ac2;
461+
background-color: #29a38a;
460462
color: white;
461463
border: none;
462464
cursor: pointer;
@@ -541,7 +543,6 @@ BOTTOM PANEL
541543

542544

543545
#resize-drag {
544-
545546
cursor: row-resize;
546547
height: 25px;
547548
width: 75px;
@@ -555,12 +556,11 @@ BOTTOM PANEL
555556
color: silver;
556557
user-select: none;
557558
z-index: 1;
558-
559559
}
560560

561561
.bottom-panel {
562562
transition: width 250ms ease-in-out;
563-
background-color: #003366;
563+
background-color: #1e8370;
564564
width: 100%;
565565
height: 100%;
566566
display: flex;
@@ -637,9 +637,9 @@ NAVBAR
637637
margin-left: 2vw;
638638
}
639639

640-
.main-logo h1 {
640+
/* .main-logo h1 {
641641
color: #013365;
642-
}
642+
} */
643643

644644
.main-navbar svg {
645645
width: 30px;
@@ -733,6 +733,8 @@ CANVAS WINDOW
733733
display: flex;
734734
flex-direction: column;
735735
align-items: center;
736+
font-family: 'Roboto', 'Raleway', sans-serif;
737+
height: 100%;
736738
}
737739

738740
/* Material-UI */
@@ -752,7 +754,7 @@ div.rst__rowContents {
752754
.rst__rowContentsDragDisabled {
753755
background-color: #333333;
754756
background-color: rgba(37, 37, 38, 0.4);
755-
}
757+
}
756758

757759
.rst__moveHandle,
758760
.rst__loadingHandle {
@@ -811,7 +813,7 @@ a.nav_link:hover {
811813
.useState-btn {
812814
color: rgb(241, 240, 240);
813815
background-color: rgba(0, 0, 0, 0.54);
814-
border: 1px solid #186bb4;
816+
border: 1px solid #46C0A5;
815817
border-radius: 3px;
816818
box-shadow: '2px 2px 2px #1a1a1a';
817819
font-family: Arial, Helvetica, sans-serif;
@@ -830,12 +832,12 @@ a.nav_link:hover {
830832

831833
.useState-header {
832834
font-size: 35px;
833-
background-color: #003366;
835+
background-color: #1e8370;
834836
color: rgb(241, 240, 240);
835837
width: 600px;
836838
border: 3px;
837839
border-style: solid;
838-
border-color: black;
840+
border-color: #1e8370;
839841
font-family: 'Open Sans', sans-serif;
840842
border-radius: 15px 15px 0px 0px;
841843
}

‎app/src/public/styles/theme.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export const theme1 = createTheme({
55
palette: {
66
mode: 'dark',
77
primary: {
8-
main: '#003366' // navy blue
8+
main: '#1e8370' // navy blue
99
},
1010
secondary: {
11-
main: '#0099e6' // light blue
11+
main: '#46C0A5' // light blue
1212
},
1313
background: {
1414
paper: '#ffffff'
@@ -20,10 +20,10 @@ export const theme2 = createTheme({
2020
palette: {
2121
mode: 'light',
2222
primary: {
23-
main: '#003366'
23+
main: '#1e8370'
2424
},
2525
secondary: {
26-
main: '#0099e6'
26+
main: '#46C0A5'
2727
},
2828
background: {
2929
paper: '#ffffff'

0 commit comments

Comments
 (0)