Skip to content

Commit 27410c8

Browse files
lauraaforlauraafor
committed
styling and icon issues
1 parent d261cb8 commit 27410c8

File tree

9 files changed

+110
-110
lines changed

9 files changed

+110
-110
lines changed

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ const DragDropPanel = (props): JSX.Element => {
3333
return (
3434
<div className={'HTMLItems'}>
3535
<div id="HTMLItemsTopHalf">
36-
<h3 style={{ color: '#ffffff' }}> &lt; HTML Elements &gt; </h3>
36+
<h3 style={{ color: '#ffffff' }}> HTML Elements </h3>
3737
<Grid
3838
container
39-
spacing={{ xs: 0.5, md: 0.5 }}
40-
columns={{ xs: 4, sm: 4, md: 4 }}
39+
// spacing={{ xs: 0.5, md: 0.5 }}
40+
// columns={{ xs: 4, sm: 4, md: 4 }}
4141
justifyContent="center"
4242
>
4343
{htmlTypesToRender.map((option) => {
@@ -47,26 +47,24 @@ const DragDropPanel = (props): JSX.Element => {
4747
)
4848
) {
4949
return (
50-
<Grid item xs={2} sm={2} md={2} key={option.name}>
5150
<HTMLItem
5251
name={option.name}
5352
key={`html-${option.name}`}
5453
id={option.id}
5554
Icon={option.icon}
5655
handleDelete={handleDelete}
5756
/>
58-
</Grid>
5957
);
6058
}
6159
})}
6260
</Grid>
6361
{state.projectType === 'Classic React' ? (
64-
<h3 style={{ color: '#C6C6C6' }}>React Router</h3>
62+
<h3 style={{ color: '#ffffff' }}>React Router</h3>
6563
) : null}
6664
<Grid
6765
container
68-
spacing={{ xs: 0.5, md: 0.5 }}
69-
columns={{ xs: 4, sm: 4, md: 4 }}
66+
// spacing={{ xs: 0.5, md: 0.5 }}
67+
// columns={{ xs: 4, sm: 4, md: 4 }}
7068
justifyContent="center"
7169
>
7270
{htmlTypesToRender.map((option) => {
@@ -77,15 +75,13 @@ const DragDropPanel = (props): JSX.Element => {
7775
state.projectType === 'Classic React'
7876
) {
7977
return (
80-
<Grid item xs={2} sm={2} md={2} key={option.name}>
8178
<HTMLItem
8279
name={option.name}
8380
key={`html-${option.name}`}
8481
id={option.id}
8582
Icon={option.icon}
8683
handleDelete={handleDelete}
8784
/>
88-
</Grid>
8985
);
9086
}
9187
})}

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

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,17 @@ import CodeIcon from '@mui/icons-material/Code';
1515

1616
const useStyles = makeStyles({
1717
HTMLPanelItem: {
18-
color: '#8F8F8F',
19-
height: '35px',
20-
width: '90px',
21-
fontSize: '80%',
18+
height: 'auto',
19+
width: 'auto',
20+
fontSize: 'medium',
2221
display: 'flex',
23-
flexDirection: 'column',
24-
justifyContent: 'center',
22+
flexDirection: 'row',
23+
justifyContent: 'space-evenly',
2524
textAlign: 'center',
26-
margin: '7px auto',
27-
marginLeft: '30px',
2825
cursor: 'grab',
29-
'& > h3': {
30-
display: 'inline-block'
31-
}
26+
// '& > h3': {
27+
// display: 'inline-block'
28+
// }
3229
},
3330
lightThemeFontColor: {
3431
color: '#8F8F8F'
@@ -44,6 +41,7 @@ const HTMLItem: React.FC<{
4441
Icon: any;
4542
handleDelete: (id: number) => void;
4643
}> = ({ name, id, Icon, handleDelete }) => {
44+
console.log("Icon: ", Icon);
4745
const classes = useStyles();
4846
const [modal, setModal] = useState(null);
4947
const [{ isDragging }, drag] = useDrag({
@@ -122,18 +120,16 @@ const HTMLItem: React.FC<{
122120
// updated the id's to reflect the new element types input and label
123121
return (
124122
// HTML Elements
125-
<Grid item xs={5} key={`html-g${name}`}>
123+
<Grid item xs={5} key={`html-g${name}`} id="HTMLgrid">
126124
{id <= 20 && (
127125
<div
128126
ref={drag}
129-
style={{ borderColor: '#C6C6C6' }}
127+
style={{ borderColor: '#C6C6C6', }}
130128
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
131129
id="HTMLItem"
132130
>
133-
<a>
134-
<Icon fontSize="small" align-items="center" />
131+
{/* <Icon fontSize="small" align-items="center" /> */}
135132
{name}
136-
</a>
137133
</div>
138134
)}
139135
{id > 20 && (
@@ -145,9 +141,8 @@ const HTMLItem: React.FC<{
145141
id="HTMLItem"
146142
>
147143
<h3>
148-
<CodeIcon fontSize="small" align-items="center" />
149144
{name}
150-
</h3>
145+
</h3>
151146
</div>
152147
<button
153148
id="newElement"

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,30 +53,33 @@ const Sidebar: React.FC<SidebarProps> = ({
5353
gap: '50px',
5454
width: 67,
5555
background: '#151515',
56-
height: '100vh'
56+
height: '100vh',
5757
}}
5858
>
5959
<Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
6060
<Tab
6161
sx={{
62-
color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',
63-
'&.Mui-selected': { color: '#C6C6C6' }
62+
color: activeTab === 0 ? '#a5ead6' : '#4A4A4A',
63+
'&.Mui-selected': { color: '#a5ead6' },
64+
'&:hover': { color: '#d2f5eb' }
6465
}}
6566
icon={<AddBoxIcon sx={{ fontSize: '36px' }} />}
6667
value={0}
6768
/>
6869
<Tab
6970
sx={{
70-
color: activeTab === 1 ? '#C6C6C6' : '#4A4A4A',
71-
'&.Mui-selected': { color: '#C6C6C6' }
71+
color: activeTab === 1 ? '#a5ead6' : '#4A4A4A',
72+
'&.Mui-selected': { color: '#a5ead6' },
73+
'&:hover': { color: '#d2f5eb' }
7274
}}
7375
icon={<IoMdCube style={{ fontSize: '33px' }} />}
7476
value={1}
7577
/>
7678
<Tab
7779
sx={{
78-
color: activeTab === 2 ? '#C6C6C6' : '#4A4A4A',
79-
'&.Mui-selected': { color: '#C6C6C6' }
80+
color: activeTab === 2 ? '#a5ead6' : '#4A4A4A',
81+
'&.Mui-selected': { color: '#a5ead6' },
82+
'&:hover': { color: '#d2f5eb' }
8083
}}
8184
icon={<PeopleIcon sx={{ fontSize: '36px' }} />}
8285
value={2}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ function Canvas(props: {}): JSX.Element {
124124
const defaultCanvasStyle: React.CSSProperties = {
125125
width: '100%',
126126
minHeight: '100%',
127-
backgroundColor: isOver ? '#191919' : '#191919',
127+
backgroundColor: isOver ? '#242323' : '#191919',
128128
// borderStyle: isOver ? 'dotted' : 'solid',
129129
aspectRatio: 'auto 774 / 1200',
130130
boxSizing: 'border-box'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function DirectChildHTMLNestable({
2828
children,
2929
name,
3030
attributes
31-
}: ChildElement): JSX.Element {
31+
}: ChildElement): React.JSX.Element {
3232
const state = useSelector((store: RootState) => store.appState);
3333
const contextParam = useSelector((store: RootState) => store.contextSlice);
3434

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ const ComponentPanelItem: React.FC<{
5050
ref={drag}
5151
xs={8}
5252
style={{
53-
color: isThemeLight ? 'black' : 'white',
53+
color: 'white',
5454
backgroundColor: 'transparent',
55-
border: isThemeLight ? '2px solid black' : '2px solid white',
55+
border: '2px solid',
5656
borderRadius: '4px',
57-
borderColor: '#000000',
57+
borderColor: '#d2f5eb',
5858
margin: '5px 0px',
5959
wordBreak: 'break-all',
6060
width: '10rem'
@@ -69,21 +69,21 @@ const ComponentPanelItem: React.FC<{
6969
};
7070
const useStyles = makeStyles({
7171
activeFocus: {
72-
backgroundColor: 'rgba(1,212,109,0.3)'
72+
backgroundColor: 'rgba (0, 0, 0, 0.54)', //this doesnt do anything....
7373
},
7474
focusMark: {
75-
backgroundColor: 'red',
75+
backgroundColor: '#29A38A',
7676
justifySelf: 'left',
77-
width: '12px',
78-
height: '12px',
77+
width: '14px',
78+
height: '14px',
7979
borderRadius: '25px',
8080
position: 'absolute' //so it doesn't cause the containing box to jiggle when selected due to change in size
8181
},
8282
lightTheme: {
8383
color: 'rgba (0, 0, 0, 0.54)'
8484
},
8585
darkTheme: {
86-
color: '#fff'
86+
color: '#ffffff'
8787
}
8888
});
8989
export default ComponentPanelItem;

‎app/src/interfaces/Interfaces.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export interface Component {
5252
id: number;
5353
name: string;
5454
style: {};
55+
icon?: any;
5556
attributes?: object;
5657
events: object;
5758
code: string;
@@ -91,9 +92,10 @@ export interface HTMLType {
9192
tag: string;
9293
name: string;
9394
style: any;
94-
placeHolderShort: string | JSX.Element;
95+
placeHolderShort: string | React.JSX.Element;
9596
placeHolderLong: string;
9697
// ? == optional type part of icon, cant comment out icon and it works
98+
Icon?: any;
9799
icon?: any;
98100
framework: string;
99101
nestable: boolean;

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

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ span.material-symbols-outlined {
152152
.column.left::-webkit-scrollbar-thumb {
153153
transition: .3s ease all;
154154
border-color: transparent;
155-
background-color: rgba(255, 255, 255, 0.1);
155+
background-color: #1e83714b;
156156
z-index: 40;
157157
}
158158

@@ -175,23 +175,23 @@ span.material-symbols-outlined {
175175
flex-direction: column;
176176
justify-content: space-around;
177177
flex-wrap: wrap;
178-
width: 90%;
178+
width: 100%;
179179
flex-grow: 1;
180-
/* border: 3px solid #C6C6C6; */
180+
border: 1px solid #C6C6C6;
181181
/* border-radius: 10px; */
182182
}
183183

184-
.HTMLItems::-webkit-scrollbar {
184+
/* .HTMLItems::-webkit-scrollbar {
185185
width: .5rem;
186186
height: .5rem;
187-
}
187+
} */
188188

189-
.HTMLItems::-webkit-scrollbar-thumb {
189+
/* .HTMLItems::-webkit-scrollbar-thumb { //not accessing due to cascade, refer to HTMLItemTopHalf
190190
transition: .3s ease all;
191191
border-color: transparent;
192192
background-color: #1c695ccc;
193193
z-index: 40;
194-
}
194+
} */
195195

196196
.HTMLItemsDark {
197197
display: flex;
@@ -205,31 +205,31 @@ span.material-symbols-outlined {
205205
#HTMLItemsTopHalf {
206206
display: flex;
207207
flex-direction: column;
208-
align-items: center;
209-
padding-right: 20px;
210208
justify-content: top;
211-
height: 52vh;
209+
height: 60vh;
212210
text-align: center;
213211
overflow-x: hidden;
214212
overflow-y: auto;
215213
}
216214

217215
#HTMLItemsTopHalf::-webkit-scrollbar {
218-
width: .5rem;
216+
width: .8rem;
219217
height: .5rem;
220218
}
221219

222220
#HTMLItemsTopHalf::-webkit-scrollbar-thumb {
223221
transition: .3s ease all;
224222
border-color: transparent;
225-
background-color: rgba(255, 255, 255, 0.1);
223+
background-color: #1e83714b;
224+
border-radius: 8px;
226225
z-index: 40;
227226
}
228227

229228
#CompBottomHalf {
230229
flex-grow: 1;
230+
text-align: center;
231+
overflow-x: hidden;
231232
overflow-y: auto;
232-
margin-bottom: 50%;
233233
}
234234

235235
.HTMLElements {
@@ -239,6 +239,10 @@ span.material-symbols-outlined {
239239
flex-wrap: wrap;
240240
}
241241

242+
#HTMLgrid {
243+
margin: 5px;
244+
}
245+
242246
#HTMLItemsGrid {
243247
display: flex;
244248
/* margin-left: 35px; */
@@ -253,8 +257,8 @@ span.material-symbols-outlined {
253257
}
254258

255259
#HTMLItem:hover {
256-
background-color: #424242bd;
257-
color: #257c74;
260+
background-color: #474545a8;
261+
color: #a5ead6;
258262
}
259263

260264
#submitButton {
@@ -481,7 +485,7 @@ RIGHT COLUMN
481485
display: flex;
482486
justify-content: center;
483487
align-content: center;
484-
border-color: #46C0A5;
488+
border-color: #46C0A5;
485489
}
486490

487491
.compPanelItem h3 {

0 commit comments

Comments
 (0)