Merge pull request #19 from files-ui/30-feat-add-context-for-darkmode-and-custom-image-icons

30 feat add context for darkmode and custom image icons

Author: JinSSJ3

public/other_icons/wordicon.png

@@ -128,6 +128,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 5,
       onClick: () => navigate("/localization"),
     },
+    
     /* {
       label: "Code Generator",
       index: 7,
@@ -154,6 +155,11 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 9,
       onClick: () => navigate("/file-download"),
     },
+    {
+      label: "Global config",
+      index: 10,
+      onClick: () => navigate("/global-config"),
+    },
   ];
 
   const [quickStartItems /* setQuickStartItems */] =

src/components/MainMenu/MainMenuSideBar.tsx

@@ -19,10 +19,10 @@ const splittedCodeJS = `<Dropzone
   onChange={updateFiles}
   minHeight="195px"
   value={extFiles}
+  accept="image/*, video/*"
   maxFiles={3}
-  // FmaxFileSize={2998000 * 20}
+  maxFileSize={2 * 1024*1024}
   label="Drag'n drop files here or click to browse"
-  // accept=".png,image/*, video/*"
   uploadConfig={{
     // autoUpload: true
     url: BASE_URL + "/file/28048465460",
@@ -37,7 +37,7 @@ const splittedCodeJS = `<Dropzone
     deleteButton: {},
     uploadButton: {},
   }}
-  >
+>
     {extFiles.map((file) => (
       <FileMosaic
         {...file}
@@ -121,27 +121,27 @@ export default function AdvancedDropzoneDemo() {
  return (
    <>
      <Dropzone
-      onChange={updateFiles}
-      minHeight="195px"
-      value={extFiles}
-      maxFiles={3}
-      // FmaxFileSize={2998000 * 20}
-      label="Drag'n drop files here or click to browse"
-      // accept=".png,image/*, video/*"
-      uploadConfig={{
-        // autoUpload: true
-        url: BASE_URL + "/file/28048465460",
-        cleanOnUpload: true,
-      }}
-      onUploadStart={handleStart}
-      onUploadFinish={handleFinish}
-      //fakeUpload
-      actionButtons={{
-        position: "after",
-        abortButton: {},
-        deleteButton: {},
-        uploadButton: {},
-      }}
+        onChange={updateFiles}
+        minHeight="195px"
+        value={extFiles}
+        accept="image/*, video/*"
+        maxFiles={3}
+        maxFileSize={2 * 1024*1024}
+        label="Drag'n drop files here or click to browse"
+        uploadConfig={{
+          // autoUpload: true
+          url: BASE_URL + "/file/28048465460",
+          cleanOnUpload: true,
+        }}
+        onUploadStart={handleStart}
+        onUploadFinish={handleFinish}
+        //fakeUpload
+        actionButtons={{
+          position: "after",
+          abortButton: {},
+          deleteButton: {},
+          uploadButton: {},
+        }}
      >
        {extFiles.map((file) => (
          <FileMosaic

src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx

@@ -63,8 +63,9 @@ export default function AdvancedDropzoneDemo() {
         onChange={updateFiles}
         minHeight="195px"
         value={extFiles}
+        accept="image/*, video/*"
         maxFiles={3}
-        // FmaxFileSize={2998000 * 20}
+        maxFileSize={2 * 1024*1024}
         label="Drag'n drop files here or click to browse"
         // accept=".png,image/*, video/*"
         uploadConfig={{
@@ -92,7 +93,6 @@ export default function AdvancedDropzoneDemo() {
             onAbort={handleAbort}
             onCancel={handleCancel}
             resultOnTooltip
-            alwaysActive
             preview
             info
           />

src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx

@@ -5,8 +5,8 @@ const BasicDropzoneCode = ({ splittedOnly = false, button = false }) => {
       splittedOnly={splittedOnly}
       codeCompleteJS={button ? completeCodeJSButton : completeCodeJS}
       codeCompleteTS={button ? completeCodeTSButton : completeCodeTS}
-      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
-      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxJS="https://codesandbox.io/s/basic-demo-js-blssi1"
+      codeSandboxTS="https://codesandbox.io/s/basic-demo-js-blssi1"
       codeSplittedJS={button ? splittedCodeJSButton : splittedCodeJS}
       codeSplittedTS={button ? splittedCodeTSButton : splittedCodeTS}
     />

src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx

@@ -48,6 +48,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
               onDelete={removeFile}
               info
               elevation={elevation as FileCardProps["elevation"]}
+              darkMode={false}
             />
           ))}
         </div>
@@ -88,7 +89,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           flexGrow: 1,
         }}
       >
-        <FileMosaic {...sampleFileProps} info onDelete={removeFile} />
+        <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode={false}/>
       </div>
       <div
         style={{