From aaec35f822d1d0b60ba8268b512bb385a193e29b Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 23 Mar 2023 00:07:08 -0500
Subject: [PATCH] [FEAT]: add darkmmode to all pages and refactor components to
get darkmode from context
---
src/components/RightMenu/RightMenu.scss | 12 ++-
src/components/RightMenu/RightMenu.tsx | 13 ++-
.../codeHighlight/CodeHighlight.scss | 2 +-
.../codeHighlight/CodeHighlight.tsx | 15 ++--
.../desc-paragraph/DescParagraphProps.scss | 2 +-
.../demo-components/icons/JSIcon.jsx | 1 +
.../demo-components/icons/TSIcon.jsx | 1 +
.../demo-components/sub-title/SubTitle.scss | 4 +-
src/components/layout-pages/LayoutPage.scss | 6 ++
.../layout-pages/MainLayoutPage.jsx | 19 +++--
src/components/main-title/MainTitle.tsx | 7 +-
.../paragraph-main/MainParagraph.scss | 5 +-
.../paragraph-main/MainParagraph.tsx | 7 +-
.../show-demo-code/ShowDemoCode.tsx | 8 +-
.../typeHighlight/TypeHighlight.scss | 5 ++
.../typeHighlight/TypeHighlight.tsx | 16 +++-
src/data/ExtFileAPIRows.tsx | 79 ++++++++++---------
.../material-button/MaterialButton.scss | 2 +
src/globals/contexts/UserContext.ts | 7 +-
src/globals/providers/UserProvider.tsx | 5 +-
src/globals/reducers/userReducer.ts | 8 +-
src/globals/types/FilesUIAction.ts | 6 ++
src/globals/types/FuiAction.ts | 6 ++
src/pages/api/PropsTableApi.jsx | 2 +
src/pages/demo/DropzoneDemoPage.jsx | 5 ++
src/pages/demo/FileInputButtonDemoPage.tsx | 5 ++
.../getting-started/GettingStartedPage.jsx | 5 +-
src/pages/types-page/TypesPage.jsx | 7 +-
src/styles/GettingStartedPage.scss | 4 +-
src/templates/NavBarTemplate.jsx | 9 ++-
src/theme/mainTheme.js | 2 +-
31 files changed, 188 insertions(+), 87 deletions(-)
create mode 100644 src/components/layout-pages/LayoutPage.scss
create mode 100644 src/globals/types/FilesUIAction.ts
create mode 100644 src/globals/types/FuiAction.ts
diff --git a/src/components/RightMenu/RightMenu.scss b/src/components/RightMenu/RightMenu.scss
index a0e0219..4c907e0 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 10a6ec8..e5f3511 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 e875b17..665381c 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 4b0e79e..57c6589 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 fc473fd..18a8826 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 4d2eaa1..f4a219d 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 9b66ec6..889c378 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 99458b7..7c0ffd8 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 0000000..9f435c4
--- /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 fa6eb44..b675529 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 6c177be..6224733 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 288709a..468d122 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 3722b44..51291c5 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 d79f7fe..3677120 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 fbedd9c..09626fc 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 2451fe4..6db4804 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 35b4cca..146e804 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 d0ef2fe..42f4a4c 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 b8e7421..5a10fd7 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 f065bfc..a421f69 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 86c9d6a..edf3f35 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 0000000..6ac078b
--- /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 0000000..f8973ad
--- /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 1140eb3..245164b 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 96e159c..64640a9 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 6e4586b..8fb9c10 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 74d99bd..1f5057c 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 90bdd76..21ca846 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 1c82c86..0f08489 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 c1ab7eb..5fe7b9a 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 7283c81..abf5413 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
},
--
GitLab