Skip to content

Commit de148a6

Browse files
lauraaforlauraafor
committed
styling update
1 parent 3def788 commit de148a6

File tree

19 files changed

+3629
-2098
lines changed

19 files changed

+3629
-2098
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
@@ -484,11 +484,11 @@ const useStyles = makeStyles((theme: Theme) => ({
484484
width: '100%'
485485
},
486486
rootCheckBox: {
487-
borderColor: '#186BB4',
487+
borderColor: '#46C0A5',
488488
padding: '0px'
489489
},
490490
rootCheckBoxLabel: {
491-
borderColor: '#186BB4'
491+
borderColor: '#46C0A5'
492492
},
493493
panelWrapper: {
494494
width: '100%',
@@ -512,8 +512,8 @@ const useStyles = makeStyles((theme: Theme) => ({
512512
alignItems: 'center',
513513
textAlign: 'center',
514514
width: '500px',
515-
backgroundColor: '#186BB4',
516-
border: '5px solid #186BB4'
515+
backgroundColor: '#46C0A5',
516+
border: '5px solid #46C0A5'
517517
},
518518
panelSubheader: {
519519
textAlign: 'center',
@@ -541,7 +541,7 @@ const useStyles = makeStyles((theme: Theme) => ({
541541
fontSize: '90%',
542542
textAlign: 'center',
543543
margin: '-20px 0px 5px 150px',
544-
border: ' 1px solid #186BB4',
544+
border: ' 1px solid #46C0A5',
545545
transition: '0.3s'
546546
},
547547
rootToggle: {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const useStyles = makeStyles((theme) => ({
152152
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
153153
},
154154
rootLight: {
155-
backgroundColor: '#003366'
155+
backgroundColor: '#1e8370'
156156
},
157157
bottomHeader: {
158158
flex: 1,
@@ -211,7 +211,7 @@ const useStyles = makeStyles((theme) => ({
211211
marginLeft: '10px'
212212
},
213213
projectSelector: {
214-
backgroundColor: '#0099E6',
214+
backgroundColor: '#29a38a',
215215
color: 'white'
216216
}
217217
}));

‎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
@@ -21,7 +21,7 @@ function CanvasContainer(props): JSX.Element {
2121

2222
const canvasContainerStyle: React.CSSProperties = {
2323
width: '100%',
24-
backgroundColor: 'lightgrey',
24+
backgroundColor: 'rgba(25, 25, 25)',
2525
border: '2px solid grey',
2626
borderBottom: 'none',
2727
overflow: 'auto'
@@ -37,7 +37,7 @@ function CanvasContainer(props): JSX.Element {
3737
color: '#ffffff',
3838
backgroundColor: '#151515',
3939
zIndex: 0,
40-
border: '2px solid #186BB4'
40+
border: '2px solid #46C0A5'
4141
} as const;
4242

4343
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
@@ -52,7 +52,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
5252
const interactiveStyle = {
5353
border:
5454
state.canvasFocus.childId === childId
55-
? '4px solid #186BB4'
55+
? '4px solid #46C0A5'
5656
: '1px solid grey'
5757
};
5858

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

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

@@ -190,7 +190,7 @@ function DirectChildHTMLNestable({
190190
>
191191
<span>
192192
<strong style={{ color: 'white' }}>{HTMLType.placeHolderShort}</strong>
193-
<strong style={{ color: '#0099E6' }}>
193+
<strong style={{ color: '#29a38a' }}>
194194
{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
195195
</strong>
196196
{routeButton}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,11 +306,11 @@ const useStyles = makeStyles({
306306
width: '100%'
307307
},
308308
rootCheckBox: {
309-
borderColor: '#186BB4',
309+
borderColor: '#46C0A5',
310310
padding: '0px'
311311
},
312312
rootCheckBoxLabel: {
313-
borderColor: '#186BB4'
313+
borderColor: '#46C0A5'
314314
},
315315
newComponent: {
316316
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)