[WIP]: Fix layout for darkmode and upload demo components

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx

@@ -39,14 +39,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
     console.log("delete button clicked on file: " + id);
   };
   return (
-    <>
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
       <div
         style={{
           display: "flex",
           justifyContent: "center",
-          width: "50%",
           backgroundColor: "white",
-          padding: "10px 0",
+          padding: "25px 0",
+          flexGrow:1
         }}
       >
         <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
@@ -55,18 +55,17 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
         style={{
           display: "flex",
           justifyContent: "center",
-          width: "50%",
-          backgroundColor: "#121212",
-          padding: "10px 0",
+          backgroundColor: "white",
+          padding: "25px 0",
+          flexGrow:1
         }}
       >
         <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
       </div>
-    </>
+    </div>
   );
 };
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
-`;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
 
 const completeCodeTS = (card?: boolean) => `import * as React from "react";
 import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
@@ -82,14 +81,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
     console.log("delete button clicked on file: " + id);
   };
   return (
-    <>
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
       <div
         style={{
           display: "flex",
           justifyContent: "center",
-          width: "50%",
           backgroundColor: "white",
-          padding: "10px 0",
+          padding: "25px 0",
+          flexGrow:1
         }}
       >
         <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
@@ -98,15 +97,14 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
         style={{
           display: "flex",
           justifyContent: "center",
-          width: "50%",
-          backgroundColor: "#121212",
-          padding: "10px 0",
+          backgroundColor: "white",
+          padding: "25px 0",
+          flexGrow:1
         }}
       >
         <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
       </div>
-    </>
+    </div>
   );
 };
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;
-`;
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;

src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx

@@ -19,9 +19,8 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           style={{
             display: "flex",
             justifyContent: "center",
-            minWidth: "50%",
             backgroundColor: "white",
-            padding: "15px 0",
+            padding: "25px 0",
             flexGrow:1
           }}
         >
@@ -31,9 +30,8 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
           style={{
             display: "flex",
             justifyContent: "center",
-            minWidth: "50%",
             backgroundColor: "#121212",
-            padding: "15px 0",
+            padding: "25px 0",
             flexGrow: 1,
           }}
         >

src/components/demo-components/filemosaic-demo/DemoFileMosaicUpload.scss

+/* .flex-container-group-group {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+} */
+.flex-container-group-card {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.flex-container-group-mosaic {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }
+  

src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx

@@ -7,8 +7,8 @@ import {
   FileCard,
 } from "../../../files-ui";
 import TypeHighlight from "../../typeHighlight/TypeHighlight";
-import DemoContainerFileMosaic from "./DemoContainerFileMosaic";
 
+import "./DemoFileMosaicUpload.scss";
 const DemoFileMosaicUploadStatus = (props: { card?: boolean }) => {
   const progress = useFakeProgress();
 
@@ -95,14 +95,20 @@ export default DemoFileMosaicUploadStatus;
 const FlexRowContainer = (props: {
   children: React.ReactNode;
   card?: boolean;
-  title?:string
+  title?: string;
 }) => {
+  const { children, card, title } = props;
   return (
     <React.Fragment>
-      <TypeHighlight>{props.title}</TypeHighlight>
-      <DemoContainerFileMosaic card={props.card}>
-        {props.children}
-      </DemoContainerFileMosaic>
+      {!card && <h4 style={{ margin: 0 }}>{title}</h4>}
+      <div
+        className={
+          card ? "flex-container-group-card" : "flex-container-group-mosaic"
+        }
+      >
+        {card && <h4 style={{ margin: 0 }}>{title}</h4>}
+        {children}
+      </div>
     </React.Fragment>
   );
 };

src/pages/demo/FileCardDemoPage.jsx

@@ -217,19 +217,9 @@ const FileCardDemoPage = (props) => {
             <TypeHighlight>true</TypeHighlight>.
           </DescParagraph>
 
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "column",
-              gap: "20px",
-            }}
-          >
+          <div style={{ display: "flex", flexWrap: "wrap" }}>
             <DemoFileMosaicDarkMode card />
-          </Paper>
+          </div>
 
           <CodeJSFileMosaicDarkMode card />
         </section>