Skip to content

Commit 7e1b146

Browse files
ARYANSHAH1567ARYANSHAH1567
authored
Merge branch 'master' into aryanshah/fix_input_text_section
2 parents b8a7399 + 1aa3b2f commit 7e1b146

8 files changed

Lines changed: 299 additions & 71 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@
3535
"@fullcalendar/interaction": "^6.0.1",
3636
"@fullcalendar/react": "^6.1.8",
3737
"@layer5/meshery-design-embed": "^0.4.0",
38-
"@sistent/sistent": "^0.14.201",
3938
"@loadable/component": "^5.16.4",
4039
"@mdx-js/mdx": "1.6.22",
4140
"@mdx-js/react": "1.6.22",
4241
"@mediacurrent/gatsby-plugin-silence-css-order-warning": "^1.0.0",
4342
"@mui/icons-material": "^6.4.6",
4443
"@mui/material": "^5.15.11",
4544
"@react-icons/all-files": "^4.1.0",
45+
"@sistent/sistent": "^0.14.219",
4646
"@svgr/webpack": "^8.0.1",
4747
"@types/mui-datatables": "^4.3.12",
4848
"ajv": "^8.17.1",

‎src/html.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33

4-
54
export default function HTML(props) {
65
return (
76
<html lang="en" {...props.htmlAttributes}>
@@ -24,20 +23,45 @@ export default function HTML(props) {
2423
{props.headComponents}
2524
</head>
2625
<body {...props.bodyAttributes}>
27-
<script dangerouslySetInnerHTML={{
28-
__html:
29-
`(function() {
30-
try {
31-
var banner = sessionStorage.getItem('banner');
32-
if (banner === null)
33-
document.body.classList.add('banner1');
34-
else
35-
document.body.classList.add('banner' + banner);
36-
} catch (e) {
37-
return;
38-
}
39-
})();`,
40-
}}
26+
{/* Script for theme initialization - needs to run before React renders to prevent flicker */}
27+
<script
28+
dangerouslySetInnerHTML={{
29+
__html: `
30+
(function() {
31+
try {
32+
// Theme initialization
33+
const darkThemeKey = 'theme';
34+
let initialTheme = 'system';
35+
try {
36+
initialTheme = localStorage.getItem(darkThemeKey) || 'system';
37+
} catch (e) {}
38+
39+
// Determine initial dark mode
40+
let isDarkMode = false;
41+
if (initialTheme === 'dark') {
42+
isDarkMode = true;
43+
} else if (initialTheme === 'system') {
44+
isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
45+
}
46+
47+
// Set initial color mode
48+
document.documentElement.style.setProperty(
49+
'--initial-color-mode',
50+
isDarkMode ? 'dark' : 'light'
51+
);
52+
53+
// Banner initialization
54+
var banner = sessionStorage.getItem('banner');
55+
if (banner === null)
56+
document.body.classList.add('banner1');
57+
else
58+
document.body.classList.add('banner' + banner);
59+
} catch (e) {
60+
console.error('Error in theme initialization:', e);
61+
}
62+
})();
63+
`,
64+
}}
4165
/>
4266
{props.preBodyComponents}
4367
<div

‎src/sections/Devrel-platform/picture-slider.js‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import React from "react";
32
import Slider from "react-slick";
43
import styled from "styled-components";
@@ -7,25 +6,19 @@ import ChallangePNG from "./images/challange_mac.png";
76
import DesignPNG from "./images/design_mac.png";
87
import TutorialPNG from "./images/tutorial_mac.png";
98

10-
119
const PictureSliderWrapper = styled.div`
12-
display:flex;
13-
justify-content:center;
14-
align-items:center;
15-
text-align:center;
10+
width: 100%;
11+
max-width: 900px;
12+
margin: 0 auto;
13+
text-align: center;
1614
1715
.slick-slider {
1816
margin-top: 1rem;
19-
height:100%;
20-
width: 100%;
2117
22-
.slick-list{
23-
width:100%;
24-
}
25-
@media (max-width: 36rem) {
26-
margin: .5rem auto;
27-
max-width: 100%;
18+
.slick-list {
19+
width: 100%;
2820
}
21+
2922
.slick-prev,
3023
.slick-next {
3124
&:before {
@@ -39,30 +32,63 @@ const PictureSliderWrapper = styled.div`
3932
4033
.slick-slide {
4134
display: flex;
42-
height: auto;
4335
align-items: center;
4436
justify-content: center;
37+
38+
img {
39+
width: 100%;
40+
max-height: 500px;
41+
object-fit: contain;
42+
}
43+
}
44+
}
45+
46+
@media (max-width: 850px) {
47+
.slick-prev,
48+
.slick-next {
49+
display: none ;
4550
}
4651
}
4752
`;
4853

4954
const PictureSlider = () => {
5055
const data = [ChallangePNG, TutorialPNG, DesignPNG];
56+
5157
const settings = {
5258
dots: false,
5359
infinite: true,
5460
speed: 500,
5561
slidesToShow: 1,
5662
slidesToScroll: 1,
5763
autoplay: true,
58-
autoplaySpeed: 2000
64+
autoplaySpeed: 2000,
65+
responsive: [
66+
{
67+
breakpoint: 1024,
68+
settings: {
69+
slidesToShow: 1,
70+
slidesToScroll: 1,
71+
arrows: false,
72+
autoplay: true,
73+
},
74+
},
75+
{
76+
breakpoint: 600,
77+
settings: {
78+
slidesToShow: 1,
79+
slidesToScroll: 1,
80+
arrows: false,
81+
autoplay: true,
82+
},
83+
},
84+
],
5985
};
6086

6187
return (
6288
<PictureSliderWrapper>
6389
<Slider {...settings}>
6490
{data.map((image, index) => (
65-
<img key={index} src={image} alt="content" />
91+
<img key={index} src={image} alt={`slide-${index}`} />
6692
))}
6793
</Slider>
6894
</PictureSliderWrapper>

‎src/sections/Projects/Sistent/components/backdrop/guidance.js‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44
import { SistentLayout } from "../../sistent-layout";
55
import TabButton from "../../../../../reusecore/Button";
6+
import styled from "styled-components";
7+
8+
const StyledTable = styled.table`
9+
tr {
10+
background-color:${props => props.theme.grey121212ToWhite};
11+
}
12+
`;
613

714
const BackdropGuidance = () => {
815
const location = useLocation();
@@ -89,17 +96,17 @@ const BackdropGuidance = () => {
8996
</a>
9097
<p>Props of the Fade component are also available.</p>
9198

92-
<table>
99+
<StyledTable>
93100
<thead>
94-
<tr style={{ backgroundColor: "#121212" }}>
101+
<tr>
95102
<th>Name</th>
96103
<th>Type</th>
97104
<th>Default</th>
98105
<th>Description</th>
99106
</tr>
100107
</thead>
101108
<tbody>
102-
<tr style={{ backgroundColor: "#121212" }}>
109+
<tr>
103110
<td>
104111
<code>open*</code>
105112
</td>
@@ -111,7 +118,7 @@ const BackdropGuidance = () => {
111118
If <code>true</code>, the component is shown.
112119
</td>
113120
</tr>
114-
<tr style={{ backgroundColor: "#121212" }}>
121+
<tr>
115122
<td>
116123
<code>children</code>
117124
</td>
@@ -121,7 +128,7 @@ const BackdropGuidance = () => {
121128
<td>-</td>
122129
<td>The content of the component.</td>
123130
</tr>
124-
<tr style={{ backgroundColor: "#121212" }}>
131+
<tr>
125132
<td>
126133
<code>classes</code>
127134
</td>
@@ -134,7 +141,7 @@ const BackdropGuidance = () => {
134141
CSS classes API below for more details.
135142
</td>
136143
</tr>
137-
<tr style={{ backgroundColor: "#121212" }}>
144+
<tr>
138145
<td>
139146
<code>component</code>
140147
</td>
@@ -147,7 +154,7 @@ const BackdropGuidance = () => {
147154
an HTML element or a component.
148155
</td>
149156
</tr>
150-
<tr style={{ backgroundColor: "#121212" }}>
157+
<tr>
151158
<td>
152159
<code>components</code>
153160
</td>
@@ -164,7 +171,7 @@ const BackdropGuidance = () => {
164171
deprecated APIs for more details.
165172
</td>
166173
</tr>
167-
<tr style={{ backgroundColor: "#121212" }}>
174+
<tr>
168175
<td>
169176
<code>componentsProps</code>
170177
</td>
@@ -181,7 +188,7 @@ const BackdropGuidance = () => {
181188
prop instead. This prop will be removed in v7.
182189
</td>
183190
</tr>
184-
<tr style={{ backgroundColor: "#121212" }}>
191+
<tr>
185192
<td>
186193
<code>invisible</code>
187194
</td>
@@ -196,7 +203,7 @@ const BackdropGuidance = () => {
196203
popovers or custom selects.
197204
</td>
198205
</tr>
199-
<tr style={{ backgroundColor: "#121212" }}>
206+
<tr>
200207
<td>
201208
<code>slotProps</code>
202209
</td>
@@ -208,7 +215,7 @@ const BackdropGuidance = () => {
208215
</td>
209216
<td>The props used for each slot inside the component.</td>
210217
</tr>
211-
<tr style={{ backgroundColor: "#121212" }}>
218+
<tr>
212219
<td>
213220
<code>slots</code>
214221
</td>
@@ -220,7 +227,7 @@ const BackdropGuidance = () => {
220227
</td>
221228
<td>The components used for each slot inside.</td>
222229
</tr>
223-
<tr style={{ backgroundColor: "#121212" }}>
230+
<tr>
224231
<td>
225232
<code>sx</code>
226233
</td>
@@ -235,7 +242,7 @@ const BackdropGuidance = () => {
235242
details.
236243
</td>
237244
</tr>
238-
<tr style={{ backgroundColor: "#121212" }}>
245+
<tr>
239246
<td>
240247
<code>TransitionComponent</code>
241248
</td>
@@ -250,7 +257,7 @@ const BackdropGuidance = () => {
250257
component requirements.
251258
</td>
252259
</tr>
253-
<tr style={{ backgroundColor: "#121212" }}>
260+
<tr>
254261
<td>
255262
<code>transitionDuration</code>
256263
</td>
@@ -266,7 +273,7 @@ const BackdropGuidance = () => {
266273
</td>
267274
</tr>
268275
</tbody>
269-
</table>
276+
</StyledTable>
270277

271278
<a id="Labeling">
272279
<h2>Labeling</h2>

0 commit comments

Comments
 (0)