diff --git a/src/components/RightMenu/RightMenu.scss b/src/components/RightMenu/RightMenu.scss
index a0e02196a2ec076b0a86bd6b30e47f7c9e62dc8a..4c907e01289ca4d41abf79bbdc39f0e85d568440 100644
--- a/src/components/RightMenu/RightMenu.scss
+++ b/src/components/RightMenu/RightMenu.scss
@@ -4,9 +4,17 @@
padding-left: 5px;
width: 100%;
//word-break: break-all;
+
+ border-left: unset;
+ color: #6f7e8c;
+
&.selected,
&:hover {
- border-left: 2px #b2bac2 solid;
- color: #6f7e8c;
+ border-left-width: 2px;
+ border-left-style: solid;
+ color: rgb(0, 114, 229);
+ &.darkmode {
+ color: rgb(102, 178, 255);
+ }
}
}
diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
index 10a6ec8ed0ecdbe0eaf8253e33f6db95ce478205..e5f351116af1c18cd939911e33aca3d6c4d63001 100644
--- a/src/components/RightMenu/RightMenu.tsx
+++ b/src/components/RightMenu/RightMenu.tsx
@@ -3,8 +3,11 @@ import ListSubheader from "@mui/material/ListSubheader/ListSubheader";
import * as React from "react";
import { RightMenuProps } from "./RightMenuProps";
import "./RightMenu.scss";
+import { UserContext } from "../../globals/contexts/UserContext";
const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
const { items, width, selectedItemProp: selectedItem = 0 } = props;
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
const handleClickAnchor = (
e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -12,10 +15,14 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
id: number
) => {
onClick?.();
-
};
const finalSelectedId = selectedItem;
+
+ const darkmodeClassName = darkMode
+ ? "right-menu-anchor-item darkmode"
+ : "right-menu-anchor-item";
+ //const darkmodeClassName = darkMode?"":"";
return (
<List
// className="section-container"
@@ -33,8 +40,8 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
items.map(({ isSelected, label, onClick, referTo, id }, index) => {
const classNameForAnchor: string =
finalSelectedId === id
- ? "right-menu-anchor-item selected"
- : "right-menu-anchor-item";
+ ? `${darkmodeClassName} selected`
+ : darkmodeClassName;
return (
<li key={index} style={{ listStyle: "none", margin: 0 }}>
<a
diff --git a/src/components/codeHighlight/CodeHighlight.scss b/src/components/codeHighlight/CodeHighlight.scss
index e875b170c843463ab98650c48816681030c3165f..665381cee39f632effbb87a178062be432155075 100644
--- a/src/components/codeHighlight/CodeHighlight.scss
+++ b/src/components/codeHighlight/CodeHighlight.scss
@@ -5,7 +5,7 @@
font-size: 0.9125rem;
padding: 0px 5px;
line-height: 1.6;
- &.dark-mode{
+ &.darkmode {
color: #fff;
background-color: rgba(102, 178, 255, 0.15);
}
diff --git a/src/components/codeHighlight/CodeHighlight.tsx b/src/components/codeHighlight/CodeHighlight.tsx
index 4b0e79ecd708b56f99a999d06cadfa73a434dcf4..57c65895ddf05ed2c3138929506e79c9f1e04c7a 100644
--- a/src/components/codeHighlight/CodeHighlight.tsx
+++ b/src/components/codeHighlight/CodeHighlight.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import "./CodeHighlight.scss";
interface CodeHighlightProps {
@@ -8,11 +9,13 @@ interface CodeHighlightProps {
const CodeHighlight: React.FC<CodeHighlightProps> = (
props: CodeHighlightProps
) => {
- const { children, darkMode } = props;
- return (
- <code className={darkMode ? "code-highlight dark-mode" : "code-highlight"}>
- {children}
- </code>
- );
+ const { children } = props;
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+ const finaldarkmodeclassName = !darkMode
+ ? "code-highlight"
+ : "code-highlight darkmode";
+
+ return <code className={finaldarkmodeclassName}>{children}</code>;
};
export default CodeHighlight;
diff --git a/src/components/demo-components/desc-paragraph/DescParagraphProps.scss b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
index fc473fdf90cb127c79fcd6d6662b97d26df788b8..18a88260cdde29668d5817ee93a713d3f72e2bae 100644
--- a/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
+++ b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
@@ -5,7 +5,7 @@
font-weight: 400;
margin-bottom: 16px;
margin-top: 0;
- color: #1a2027;
+ // color: #1a2027;
word-break: break-word;
&.dark-mode{
color: rgba(255, 255, 255, 0.7);
diff --git a/src/components/demo-components/icons/JSIcon.jsx b/src/components/demo-components/icons/JSIcon.jsx
index 4d2eaa1a68f4b3bc3e073c051bbbea11c6fa2bb2..f4a219decbcf1e54a213d213dbcf7890ff3f2611 100644
--- a/src/components/demo-components/icons/JSIcon.jsx
+++ b/src/components/demo-components/icons/JSIcon.jsx
@@ -9,6 +9,7 @@ const JSIcon = ({ size = "20px", color = "black" }) => {
viewBox="0 0 24 24"
height={size}
width={size}
+ fill={color}
>
<path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path>
</svg>
diff --git a/src/components/demo-components/icons/TSIcon.jsx b/src/components/demo-components/icons/TSIcon.jsx
index 9b66ec6cb8833277c3bbceacc9544084864df3f6..889c378bc50c3323227ade6bdd0a14fa07ca55d5 100644
--- a/src/components/demo-components/icons/TSIcon.jsx
+++ b/src/components/demo-components/icons/TSIcon.jsx
@@ -8,6 +8,7 @@ const TSIcon = ({ size = "20px", color = "black" }) => {
viewBox="0 0 24 24"
height={size}
width={size}
+ fill={color}
>
<path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path>
</svg>
diff --git a/src/components/demo-components/sub-title/SubTitle.scss b/src/components/demo-components/sub-title/SubTitle.scss
index 99458b7cafcd94b17a35a2ae267f8f5a753f77b8..7c0ffd8e1a3959bcd4a64f68d5c30163dd1ba4ef 100644
--- a/src/components/demo-components/sub-title/SubTitle.scss
+++ b/src/components/demo-components/sub-title/SubTitle.scss
@@ -2,8 +2,8 @@
font-size: 1.5rem;
line-height: 1.5;
letter-spacing: 0.1px;
- color: #1a2027;
+ //color: #1a2027;
&.dark-mode{
- color:rgba(255, 255, 255, 0.7);
+ //color:rgba(255, 255, 255, 0.7);
}
}
diff --git a/src/components/layout-pages/LayoutPage.scss b/src/components/layout-pages/LayoutPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f435c42dba715fb939824fa771825ec76ee6681
--- /dev/null
+++ b/src/components/layout-pages/LayoutPage.scss
@@ -0,0 +1,6 @@
+.files-ui-layout {
+ color: #1a2027;
+ &.darkmode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+}
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index fa6eb44b072ba27e5bff57df09fdc8bbe8c569ce..b675529241bf8ef3b236ef206724fd21c390855b 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -1,14 +1,23 @@
import { Stack } from "@mui/material";
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import NavBarTemplate from "../../templates/NavBarTemplate";
+import "./LayoutPage.scss";
-const MainLayoutPage = ({
- children,
- selectedIndex,
-}) => {
+const MainLayoutPage = ({ children, selectedIndex }) => {
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+
+ const finalClassName = darkMode
+ ? "files-ui-layout darkmode"
+ : "files-ui-layout";
return (
<NavBarTemplate selectedIndex={selectedIndex}>
- <Stack direction={"row"} sx={{ position: "relative" }}>
+ <Stack
+ direction={"row"}
+ sx={{ position: "relative" }}
+ className={finalClassName}
+ >
{children}
</Stack>
</NavBarTemplate>
diff --git a/src/components/main-title/MainTitle.tsx b/src/components/main-title/MainTitle.tsx
index 6c177be9925baa24dcab1c56a7c90cb9184f97ed..6224733d5b70fb13db365e32096a3003bfbd921e 100644
--- a/src/components/main-title/MainTitle.tsx
+++ b/src/components/main-title/MainTitle.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
interface MainTitleProps {
children?: React.ReactNode;
style?: React.CSSProperties;
@@ -6,13 +7,17 @@ interface MainTitleProps {
}
const MainTitle: React.FC<MainTitleProps> = (props: MainTitleProps) => {
const { children, className, style } = props;
+ const [usuario, dispatch] = React.useContext(UserContext);
+
+ // const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const darkMode = usuario.darkMode;
return (
<h1
style={{
fontSize: "2.25rem",
letterSpacing: "0.2px",
lineHeight: "1.22222",
- color: "#0a1929",
+ color: darkMode ? "rgba(255, 255, 255, 0.7)" : "#0a1929",
wordBreak: "break-word",
...style,
}}
diff --git a/src/components/paragraph-main/MainParagraph.scss b/src/components/paragraph-main/MainParagraph.scss
index 288709a0fbfeda2a9dfd7079cd48155072d24e36..468d12247467ed7ece56162add48a7358c1d99d8 100644
--- a/src/components/paragraph-main/MainParagraph.scss
+++ b/src/components/paragraph-main/MainParagraph.scss
@@ -5,5 +5,8 @@
font-weight: 400;
margin-bottom: 16px;
margin-top: 0;
- color: #1A2027;
+ //color: #1A2027;
+ .darkmode{
+ color: rgba(255, 255, 255, 0.7);
+ }
}
diff --git a/src/components/paragraph-main/MainParagraph.tsx b/src/components/paragraph-main/MainParagraph.tsx
index 3722b44c8301dd3cedd7dbc19055e6dc994d8ff5..51291c55a2bd8f31ae0f0dbb89211261845a2598 100644
--- a/src/components/paragraph-main/MainParagraph.tsx
+++ b/src/components/paragraph-main/MainParagraph.tsx
@@ -1,10 +1,15 @@
import * as React from "react";
import { ParagraphMainProps } from "./MainParagraphProps";
import "./MainParagraph.scss";
+import { UserContext } from "../../globals/contexts/UserContext";
const MainParagraph: React.FC<ParagraphMainProps> = (
props: ParagraphMainProps
) => {
const { content, children } = props;
- return <p className="paragraph-main">{children || content}</p>;
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkModeOn = usuario.darkMode;
+ const className = darkModeOn ? "paragraph-main darkmode" : "paragraph-main";
+
+ return <p className={className}>{children || content}</p>;
};
export default MainParagraph;
diff --git a/src/components/show-demo-code/ShowDemoCode.tsx b/src/components/show-demo-code/ShowDemoCode.tsx
index d79f7fe4a0aa906a73c778f0dec0b3bc05651e4d..36771202a70560907337211a7e8c61be3edac61f 100644
--- a/src/components/show-demo-code/ShowDemoCode.tsx
+++ b/src/components/show-demo-code/ShowDemoCode.tsx
@@ -6,6 +6,7 @@ import * as React from "react";
import JSIcon from "../demo-components/icons/JSIcon";
import TSIcon from "../demo-components/icons/TSIcon";
import { Highlighter } from "rc-highlight";
+import { UserContext } from "../../globals/contexts/UserContext";
interface ShowDemoCodeProps {
codeSandboxJS?: string;
codeSandboxTS?: string;
@@ -30,6 +31,9 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
const [showComplete, setShowComplete] = React.useState(false);
const [showJS, setShowJS] = React.useState(true);
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+
const code: string = showComplete
? showJS
? codeCompleteJS
@@ -60,7 +64,7 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
//startIcon={}
onClick={() => setShowJS(true)}
>
- <JSIcon />
+ <JSIcon color={darkMode?"rgb(178, 186, 194)":"rgb(45, 56, 67)"}/>
</Button>
<Button
size="small"
@@ -70,7 +74,7 @@ const ShowDemoCode: React.FC<ShowDemoCodeProps> = (
// endIcon={}
onClick={() => setShowJS(false)}
>
- <TSIcon />
+ <TSIcon color={darkMode?"rgb(178, 186, 194)":"rgb(45, 56, 67)"}/>
</Button>
</ButtonGroup>
)}
diff --git a/src/components/typeHighlight/TypeHighlight.scss b/src/components/typeHighlight/TypeHighlight.scss
index fbedd9c38bbdde86e5ea2967dbbcf935488e9c38..09626fc33465a15c129168eb98a4473e16731623 100644
--- a/src/components/typeHighlight/TypeHighlight.scss
+++ b/src/components/typeHighlight/TypeHighlight.scss
@@ -1,5 +1,7 @@
.type-highlight {
color: rgb(147, 41, 129);
+ //color: #ef7ed1;
+
font-size: 0.9125rem;
line-height: 1.6;
// word-break: break-all;
@@ -8,4 +10,7 @@
&.np{
padding: 0;
}
+ &.darkmode{
+ color: #ffb6ec;
+ }
}
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
index 2451fe4c1c0d58e0e689a2ae42aa74b67e528e4b..6db48043435e129a85b09138cf76c5430eb6b503 100644
--- a/src/components/typeHighlight/TypeHighlight.tsx
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -1,20 +1,28 @@
import * as React from "react";
+import { UserContext } from "../../globals/contexts/UserContext";
import "./TypeHighlight.scss";
interface TypeHighlightProps {
children?: React.ReactNode;
np?: boolean;
size?: string;
+ darkMode?: boolean;
}
const TypeHighlight: React.FC<TypeHighlightProps> = (
props: TypeHighlightProps
) => {
const { children, np, size } = props;
+ const [usuario, dispatch] = React.useContext(UserContext);
+ const darkMode = usuario.darkMode;
+ const finaldarkmodeclassName = !darkMode
+ ? "type-highlight"
+ : "type-highlight darkmode";
+ const finalNpclassName = np
+ ? `${finaldarkmodeclassName} np`
+ : finaldarkmodeclassName;
+
return (
- <div
- className={np ? "type-highlight np" : "type-highlight"}
- style={{ fontSize: size }}
- >
+ <div className={finalNpclassName} style={{ fontSize: size }}>
{children}
</div>
);
diff --git a/src/data/ExtFileAPIRows.tsx b/src/data/ExtFileAPIRows.tsx
index 35b4ccae1551cef747bfd7fa045e6269956e0449..146e804fecb8447e5667a73c79691d11419a492b 100644
--- a/src/data/ExtFileAPIRows.tsx
+++ b/src/data/ExtFileAPIRows.tsx
@@ -1,59 +1,62 @@
import CodeHighlight from "../components/codeHighlight/CodeHighlight";
import TypeHighlight from "../components/typeHighlight/TypeHighlight";
import AnchorToTab from "../components/util-components/AnchorToTab";
-export const ExtFileAPIRows = [
+export const ExtFileAPIRows = (darkMode = false) => [
{
name: "id",
type: (
<>
{" "}
- <TypeHighlight np>{"string"}</TypeHighlight> {" | "}
- <TypeHighlight np>{"number"}</TypeHighlight>
+ <TypeHighlight darkMode={darkMode} np>
+ {"string"}
+ </TypeHighlight>{" "}
+ {" | "}
+ <TypeHighlight darkMode={darkMode} np>{"number"}</TypeHighlight>
</>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The identifier of the file</>,
},
{
name: "file",
- type: <TypeHighlight np>{"File"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"File"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The file object obtained from client drop or selection</>,
},
{
name: "name",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The name of the file</>,
},
{
name: "type",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The file mime type.</>,
},
{
name: "size",
- type: <TypeHighlight np>{"number"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"number"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The size of the file in bytes.</>,
},
{
name: "valid",
- type: <TypeHighlight np>{"boolean"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
If present, it will show a valid or rejected message ("valid",
- "denied"). By default valid is <CodeHighlight>undefined</CodeHighlight>.
+ "denied"). By default valid is <CodeHighlight darkMode={darkMode}>undefined</CodeHighlight>.
</>
),
},
{
name: "errors",
- type: <TypeHighlight np>{"string[]"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The list of errors according to the validation criteria or the result of
@@ -64,29 +67,27 @@ export const ExtFileAPIRows = [
{
name: "uploadStatus",
type: (
- <TypeHighlight np>
- <AnchorToTab href="/types#uploadstatus">
- {"UPLOADSTATUS"}
- </AnchorToTab>
+ <TypeHighlight darkMode={darkMode} np>
+ <AnchorToTab href="/types#uploadstatus">{"UPLOADSTATUS"}</AnchorToTab>
</TypeHighlight>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The current upload status. (e.g. "uploading").</>,
},
{
name: "uploadMessage",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>A message that shows the result of the upload process.</>,
},
{
name: "imageUrl",
- type: <TypeHighlight np>{"string"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"string"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
A string representation or web url of the image that will be set to the
- "src" prop of an <CodeHighlight>{"<img/>"}</CodeHighlight> tag. If
+ "src" prop of an <CodeHighlight darkMode={darkMode}>{"<img/>"}</CodeHighlight> tag. If
given, the component will use this image source instead of reading the
image file.
</>
@@ -94,8 +95,8 @@ export const ExtFileAPIRows = [
},
{
name: "downloadUrl",
- type: <TypeHighlight np>string</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>string</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The url to be used to perform a GET request in order to download the
@@ -105,8 +106,8 @@ export const ExtFileAPIRows = [
},
{
name: "progress",
- type: <TypeHighlight np>number</TypeHighlight>,
- default: <TypeHighlight np>undefined</TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>number</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np>undefined</TypeHighlight>,
description: (
<>
The current percentage of upload progress. This value will have a higher
@@ -116,8 +117,8 @@ export const ExtFileAPIRows = [
},
{
name: "extraUploadData",
- type: <TypeHighlight np>{"Record<string, any>"}</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>{"Record<string, any>"}</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
The additional data that will be sent to the server when files are
@@ -127,26 +128,26 @@ export const ExtFileAPIRows = [
},
{
name: "extraData",
- type: <TypeHighlight np>Object</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>Object</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>Any kind of extra data that could be needed.</>,
},
{
name: "serverResponse",
type: (
- <TypeHighlight np>
+ <TypeHighlight darkMode={darkMode} np>
<AnchorToTab href="/api/dropzone#serverresponse">
ServerResponse
</AnchorToTab>
</TypeHighlight>
),
- default: <TypeHighlight np></TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: <>The upload response from server.</>,
},
{
name: "xhr",
- type: <TypeHighlight np>XMLHttpRequest</TypeHighlight>,
- default: <TypeHighlight np></TypeHighlight>,
+ type: <TypeHighlight darkMode={darkMode} np>XMLHttpRequest</TypeHighlight>,
+ default: <TypeHighlight darkMode={darkMode} np></TypeHighlight>,
description: (
<>
A reference to the XHR object that allows the upload, progress and abort
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
index d0ef2fe468d0e95fee16737845122b72fbe1485c..42f4a4c4d17e236abdb27f7246c28bb858ec8912 100644
--- a/src/files-ui/components/material-button/MaterialButton.scss
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -1,3 +1,5 @@
+//@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+
.material-button-root {
border: 0;
cursor: pointer;
diff --git a/src/globals/contexts/UserContext.ts b/src/globals/contexts/UserContext.ts
index b8e7421dd75e9477da2a2fbaa3d142db3e4c0496..5a10fd7aa613248e538f571ce0fba1ac1e1643df 100644
--- a/src/globals/contexts/UserContext.ts
+++ b/src/globals/contexts/UserContext.ts
@@ -1,8 +1,7 @@
import * as React from "react";
-import { initialUserValue } from "../initialValues/userInitialValue";
+import { FuiAction } from "../types/FuiAction";
import { UserFilesUi } from "../types/UserFilesUi";
-
-export const UserContext=
- React.createContext({});
+export const UserContext: React.Context<[UserFilesUi, React.Dispatch<FuiAction> | undefined]> =
+ React.createContext([{} as UserFilesUi, undefined as React.Dispatch<FuiAction> | undefined]);
diff --git a/src/globals/providers/UserProvider.tsx b/src/globals/providers/UserProvider.tsx
index f065bfcc9f8da44475171269eca903b5e851ee7f..a421f69e33a2e8e91dc895f1ba0dc2c50c9c145c 100644
--- a/src/globals/providers/UserProvider.tsx
+++ b/src/globals/providers/UserProvider.tsx
@@ -1,9 +1,10 @@
import { UserContext } from "../contexts/UserContext";
import * as React from "react";
import { UserFilesUi } from "../types/UserFilesUi";
-import { FilesUIAction, userInitializer, userReducer } from "../reducers/userReducer";
+import { userInitializer, userReducer } from "../reducers/userReducer";
import { ThemeProvider } from "@emotion/react";
import { MUItheme } from "../../theme/mainTheme";
+import { FuiAction } from "../types/FuiAction";
export const UserProvider = (props: {
children: React.ReactNode;
@@ -11,7 +12,7 @@ export const UserProvider = (props: {
}) => {
const { children, valorInicial } = props;
- const [usuario, dispatch]: [UserFilesUi, React.Dispatch<FilesUIAction>] =
+ const [usuario, dispatch]: [UserFilesUi, React.Dispatch<FuiAction>] =
React.useReducer(userReducer, valorInicial, userInitializer);
React.useEffect(() => {
diff --git a/src/globals/reducers/userReducer.ts b/src/globals/reducers/userReducer.ts
index 86c9d6ab8c9b1839a33eebe1ac94be54b7ed45ee..edf3f35833a326d8180a774f1505293e3d59c437 100644
--- a/src/globals/reducers/userReducer.ts
+++ b/src/globals/reducers/userReducer.ts
@@ -1,9 +1,9 @@
+
+import { FuiAction } from "../types/FuiAction";
import { UserFilesUi } from "../types/UserFilesUi";
-export interface FilesUIAction {
- type?: string; payload?: UserFilesUi;
-}
-export const userReducer = (state: UserFilesUi, action: FilesUIAction): UserFilesUi => {
+
+export const userReducer = (state: UserFilesUi, action: FuiAction): UserFilesUi => {
const { type = "", payload = {} } = action;
console.log("userReducer", state, action);
switch (type) {
diff --git a/src/globals/types/FilesUIAction.ts b/src/globals/types/FilesUIAction.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ac078bbd147eeb6a25a7560e3b6a0991288c9d9
--- /dev/null
+++ b/src/globals/types/FilesUIAction.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "./UserFilesUi";
+
+export type FilesUIAction = {
+ type?: string;
+ payload?: UserFilesUi;
+}
\ No newline at end of file
diff --git a/src/globals/types/FuiAction.ts b/src/globals/types/FuiAction.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8973ad6492eb7115e8c9e2b01f8da5f4759f02b
--- /dev/null
+++ b/src/globals/types/FuiAction.ts
@@ -0,0 +1,6 @@
+import { UserFilesUi } from "./UserFilesUi";
+
+export type FuiAction = {
+ type?: string;
+ payload?: UserFilesUi;
+}
\ No newline at end of file
diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
index 1140eb3019ec12f6b1c7569b4b181abc03ac349b..245164b445052f4c7fc722271f84ec3e74a20907 100644
--- a/src/pages/api/PropsTableApi.jsx
+++ b/src/pages/api/PropsTableApi.jsx
@@ -47,6 +47,8 @@ export default function PropsTableApi({
desc=<></>,
omitDefault = false,
}) {
+
+
const [sorted, setSorted] = React.useState(false);
const [localRows, setLocalRows] = React.useState(rows);
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 96e159c68bd486175a0796f324560ba0a33a15fa..64640a975a1dfb9346dce0db8151d977414bf1d2 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -748,4 +748,9 @@ const rightMenuItems = [
label: "Localization",
referTo: "/components/dropzone#localization",
},
+ {
+ id: 8,
+ label: "API",
+ referTo: "/components/dropzone#api",
+ },
];
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 6e4586b3015cbc23b253d515d97cbe70bd3f3ea0..8fb9c108a7d19dd966ba0f276b062c572b5fd554 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -537,4 +537,9 @@ const rightMenuItems = [
label: "Localization",
referTo: "/components/fileinputbutton#localization",
},
+ {
+ id: 8,
+ label: "API",
+ referTo: "/components/fileinputbutton#api",
+ },
];
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index 74d99bd03f64de6dd146260fe76cb3a6aac4ba4b..1f5057c3ef2481832169f03f9d3dd9c5b89353ef 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -17,6 +17,7 @@ import MainContentContainer from "../../components/layout-pages/MainContentConta
import MainTitle from "../../components/main-title/MainTitle";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import { scrollHandler } from "../../utils/scrollHandler";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
const GettingStartedPage = ({ darkModeOn }) => {
const [selectedItem, setSelectedItem] = React.useState(0);
@@ -62,8 +63,8 @@ const GettingStartedPage = ({ darkModeOn }) => {
<SubTitle content="Peer dependency" />
<DescParagraph>
- <code className="code">react </code> {">= 17.0.0 "}and{" "}
- <code className="code">react-dom</code>
+ <CodeHighlight>react </CodeHighlight> {">= 17.0.0 "}and{" "}
+ <CodeHighlight>react-dom</CodeHighlight>
{" >= 17.0.0 "} are peer dependencies.
</DescParagraph>
</section>
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 90bdd76b474d8e0681b2ea66f7be558d5029b102..21ca8465d6a66ccf299aa7cb62103d8bf16b33ec 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -17,6 +17,7 @@ import { HeaderConfigAPIRows } from "../../data/HeaderConfigAPIRows";
import { ServerResponseAPIRows } from "../../data/ServerResponseAPIRows";
import { UploadConfigAPIRows } from "../../data/UploadConfigAPIRows";
import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
+import { UserContext } from "../../globals/contexts/UserContext";
import { scrollHandler } from "../../utils/scrollHandler";
import PropsTableApi from "../api/PropsTableApi";
@@ -69,6 +70,10 @@ const rightMenuItems = [
];
const TypesPage = (props) => {
+
+const [user,dispatch] = React.useContext(UserContext);
+const darkMode = user.darkMode;
+
const [selectedItem, setSelectedItem] = React.useState(0);
React.useEffect(() => {
@@ -105,7 +110,7 @@ const TypesPage = (props) => {
</>
}
omitDefault
- rows={ExtFileAPIRows}
+ rows={ExtFileAPIRows(darkMode)}
/>
</section>
<section id="validatefileresponse">
diff --git a/src/styles/GettingStartedPage.scss b/src/styles/GettingStartedPage.scss
index 1c82c86302e16b4ed88454b620ca9bcf5017b613..0f0848900b90f04ece0369b7a3329b04ff95f694 100644
--- a/src/styles/GettingStartedPage.scss
+++ b/src/styles/GettingStartedPage.scss
@@ -8,7 +8,7 @@
}
}
.clipboard-container {
- background-color: rgb(1, 4, 9);
+ background-color: #1e1e1e;
border-radius: 8px;
position: relative;
display: flex;
@@ -23,7 +23,7 @@
box-sizing: border-box;
background-color: gray;
padding: 6px 5px;
- border-radius: 4px;
+ border-radius: 8px;
cursor: pointer;
display: flex;
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index c1ab7ebde89e2d77e9d78e8e09a58b51f18c7da9..5fe7b9a0b5f3ef8474dda5554cb6a17e2cdc2116 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -7,7 +7,7 @@ import Drawer from "@mui/material/Drawer";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
-import logoLight from "../static/files-ui-logo-blue-wbg.png";
+import logoLight from "../static/files-ui-logo-blue-dark.png";
import logo_blue from "../static/files-ui-logo-blue.png";
import { IconButton, Stack, styled, Tooltip } from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
@@ -71,11 +71,13 @@ function NavBarTemplate(props) {
marginRight: "5px",
}}
className="filesui-nav-logo"
+ //src={logo_blue }
src={!darkModeOn ? logo_blue : logoLight}
alt="files-ui-main-logo"
/>
<img
src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
+ // src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
alt="files-ui-main-logo-text"
height={16}
/>
@@ -100,7 +102,7 @@ function NavBarTemplate(props) {
window !== undefined ? () => window().document.body : undefined;
return (
- <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
+ <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } ,transition:"all 0.4s ease-in-out"}}>
<CssBaseline />
<AppBar
className="section-container"
@@ -124,7 +126,8 @@ function NavBarTemplate(props) {
</IconButton>
<StyledImage
- src={!darkModeOn ? logo_blue : logoLight}
+ src={ logo_blue }
+ //src={!darkModeOn ? logo_blue : logoLight}
alt="files-ui-main-logo"
/>
diff --git a/src/theme/mainTheme.js b/src/theme/mainTheme.js
index 7283c812afd6f3229667610dbc5a1930ab101964..abf5413b22021680cd4b54145ed9eb924d173f75 100644
--- a/src/theme/mainTheme.js
+++ b/src/theme/mainTheme.js
@@ -6,7 +6,7 @@ export const MUItheme = (modeLight = "light") =>
mode: modeLight,
primary: {
// light: will be calculated from palette.primary.main,
- main: "#042354",
+ main: modeLight === "light" ? "#042354" : "#55b4f2",
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
},