chore: changed font color of box example

Signed-off-by: Mdkaif-123 <[email protected]>
layer5io · Nov 5, 2024 · d204c77 · d204c77
1 parent bca574a
commit d204c77
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/sections/Projects/Sistent/components/box/code.js b/src/sections/Projects/Sistent/components/box/code.js
@@ -10,14 +10,14 @@ import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const codes = [
-  `           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  `           <SistentThemeProvider ini>
                 <Box sx={{ bgcolor: "#ffeb3b", padding: 4, height: "50vh" }}>
                   <p>
                     This is a Box component with custom background and padding.
                   </p>
                 </Box>
               </SistentThemeProvider>`,
-  `           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  `           <SistentThemeProvider ini>
                 <Box
                   sx={{
                     bgcolor: { xs: "#cfe8fc", md: "#ffeb3b" },
@@ -30,7 +30,7 @@ const codes = [
                   </p>
                 </Box>
               </SistentThemeProvider>`,
-  `           <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  `           <SistentThemeProvider ini>
                 <Box
                   sx={{
                     bgcolor: { xs: "#cfe8fc", md: "#ffeb3b" },
@@ -43,7 +43,7 @@ const codes = [
                   </p>
                 </Box>
               </SistentThemeProvider>`,
-  `          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  `          <SistentThemeProvider ini>
                 <Box
                   sx={{
                     bgcolor: "#cfe8fc",
@@ -144,7 +144,7 @@ export const BoxCode = () => {
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Box sx={{ bgcolor: "#ffeb3b", padding: 4, height: "50vh" }}>
-                  <p>
+                  <p style={{ color: "black" }}>
                     This is a Box component with custom background and padding.
                   </p>
                 </Box>
@@ -170,7 +170,7 @@ export const BoxCode = () => {
                     height: "50vh",
                   }}
                 >
-                  <p>
+                  <p style={{ color: "black" }}>
                     This Box is responsive, changing style based on screen size.
                   </p>
                 </Box>
@@ -201,7 +201,9 @@ export const BoxCode = () => {
                     },
                   }}
                 >
-                  <p>Hover over this Box to see the interactive effect.</p>
+                  <p style={{ color: "black" }}>
+                    Hover over this Box to see the interactive effect.
+                  </p>
                 </Box>
               </SistentThemeProvider>
             </div>

diff --git a/src/sections/Projects/Sistent/components/box/guidance.js b/src/sections/Projects/Sistent/components/box/guidance.js
@@ -87,7 +87,7 @@ export const BoxGuidance = () => {
                   "&:hover": { bgcolor: "primary.light" },
                 }}
               >
-                <p style={{ color: "white" }}>
+                <p style={{ color: "black" }}>
                   This is a responsive Box component.
                 </p>
               </Box>
@@ -119,7 +119,7 @@ export const BoxGuidance = () => {
                   borderRadius: 4,
                 }}
               >
-                <p style={{ color: "white" }}>
+                <p style={{ color: "black" }}>
                   Customized Box with shadow and color.
                 </p>
               </Box>
@@ -146,7 +146,7 @@ export const BoxGuidance = () => {
                 }}
               >
                 <Box sx={{ bgcolor: "info.main", padding: 2 }}>
-                  <p style={{ color: "white" }}>Nested Box layout example.</p>
+                  <p style={{ color: "black" }}>Nested Box layout example.</p>
                 </Box>
               </Box>
             </SistentThemeProvider>