[WIP]: Improved File card and added upload layer, mising right part

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

 import * as React from "react";
-import { ExtFile, FileMosaic } from "../../../files-ui";
+import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
 
 const sampleFileProps: ExtFile = {
   id: "fileId",
@@ -7,10 +7,37 @@ const sampleFileProps: ExtFile = {
   type: "text/plain",
   name: "file created from props.jsx",
 };
-const DemoFileMosaicDarkMode = () => {
+const DemoFileMosaicDarkMode = (props: { card?: boolean }) => {
   const removeFile = (id: string | number | undefined) => {
     console.log("delete button clicked on file: " + id);
   };
+  if (props.card)
+    return (
+      <>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            width: "50%",
+            backgroundColor: "white",
+            padding: "15px 0",
+          }}
+        >
+          <FileCard {...sampleFileProps} info onDelete={removeFile} />
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            width: "50%",
+            backgroundColor: "#121212",
+            padding: "15px 0",
+          }}
+        >
+          <FileCard {...sampleFileProps} info darkMode onDelete={removeFile} />
+        </div>
+      </>
+    );
   return (
     <>
       <div

src/files-ui/components/file-card/FileCard.scss

 @import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
 .files-ui-file-card-main-container {
   border-radius: 8px;
+  overflow: hidden;
   color: rgba(0, 0, 0, 0.858);
   display: flex;
   flex-direction: row;
@@ -8,12 +9,130 @@
   margin: 10px;
   min-height: 100px;
   box-sizing: border-box;
-  padding: 10px;
   position: relative;
   font-size: 15px;
   font-weight: 400;
-  min-width: 280px;
+  width: 380px;
+  .files-ui-file-card-main-layer-container {
+    width: 380px;
+    box-sizing: border-box;
+    height: 100px;
+    box-sizing: border-box;
 
+    .file-card-main-layer {
+      box-sizing: border-box;
+
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-between;
+      .file-card-icon-container {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        position: relative;
+        box-sizing: border-box;
+
+        //background-color: aqua;
+        .file-card-icon-layer {
+          position: absolute;
+          left: 0;
+          right: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 5px;
+
+          img {
+            //filter: blur(0);
+            //margin: auto;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;
+          }
+          &.blur {
+            img {
+              filter: blur(4px);
+              width: 200%;
+              height: 200%;
+            }
+          }
+        }
+      }
+      .file-card-data {
+        line-height: 18px;
+        font-weight: 500;
+        width: 200px;
+        word-break: break-all;
+        color: black;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        height: 100%;
+        &.dark-mode {
+          color: rgba(255, 255, 255, 0.7);
+        }
+        .file-card-size {
+          font-weight: 400;
+          font-size: 0.95rem;
+        }
+        .file-card-name {
+          //margin-top: 3px;
+          letter-spacing: 0.125em;
+          font-size: 1rem;
+          //white-space: nowrap;
+          //padding: 0.5px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1; /* number of lines to show */
+          line-clamp: 1;
+          -webkit-box-orient: vertical;
+          &.not-allowed {
+            background-color: rgba(180, 16, 16, 0.7);
+          }
+        }
+      }
+    }
+    .file-card-upload-layer {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      box-sizing: border-box;
+      //background-color: rgba(0, 0, 0, 0.5);
+      background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.75),
+        rgba(0, 0, 0, 0.85),
+        rgba(0, 0, 0, 0.85),
+        rgba(0, 0, 0, 0.85),
+        rgba(0, 0, 0, 0.85),
+        rgba(0, 0, 0, 0.85)
+      );
+      color: rgba(255, 255, 255, 0.8);
+      font-weight: 500;
+      font-size: 1em;
+      position: relative;
+      overflow: hidden;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
   .file-card-data {
     line-height: 18px;
     font-weight: 500;

src/files-ui/components/file-card/FileCard.tsx

@@ -14,6 +14,9 @@ import MainLayerBodyNeo from "../file-item/components/FileItemMainLayer/MainLaye
 import useProgress from "../file-mosaic/hooks/useProgress";
 import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
 import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
+import LayerContainer from "../file-mosaic/components/file-mosaic-layer/LayerContainer";
+import Layer from "../file-mosaic/components/file-mosaic-layer/Layer";
+import FileMosaicImageLayer from "../file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer";
 
 const setFinalElevation = (elevation: string | number): number => {
   //  let finalElevation: number  = "";
@@ -96,7 +99,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
     onClick,
     onRightClick,
 
-    elevation=2,
+    elevation = 4,
 
     //} = mergeProps(props, FileCardPropsDefault);
   } = props;
@@ -238,10 +241,75 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
         className={finalClassName}
         style={style}
         onClick={handleClick}
+        onMouseEnter={handleOnHoverEnter}
+        onMouseLeave={handleOnHoverLeave}
         onDoubleClick={handleDoubleClick}
         onContextMenu={handleRightClick}
       >
-        <FileItemImage
+        <LayerContainer
+          className="files-ui-file-card-main-layer-container"
+          style={style}
+        >
+          <Layer className="file-card-main-layer" visible={true}>
+            {/** ICON/IMAGE LAYER */}
+            <div className="file-card-icon-container">
+              <LayerContainer className="file-card-icon-layer">
+                {/** IMAGE LAYER BLUR */}
+                <Layer
+                  className="file-card-icon-layer blur"
+                  visible={backgroundBlurImage}
+                >
+                  <FileMosaicImageLayer
+                    imageSource={imageSource}
+                    url={url}
+                    fileName={localName}
+                    isBlur={true}
+                  />
+                </Layer>
+                {/** IMAGE LAYER NO BLUR */}
+                <Layer className="file-card-icon-layer" visible={true}>
+                  <FileMosaicImageLayer
+                    imageSource={imageSource}
+                    url={url}
+                    fileName={localName}
+                    isBlur={false}
+                  />
+                </Layer>
+              </LayerContainer>
+            </div>
+
+            <div
+              className={
+                darkMode ? "file-card-data dark-mode" : "file-card-data"
+              }
+            >
+              <div className={"file-card-name"}>
+                {shrinkWord(localName, true)}
+              </div>
+
+              <div className={"file-card-size"}>{sizeFormatted}</div>
+              <div className={"file-card-size"}>{shrinkWord(localType)}</div>
+            </div>
+            <div className="files-ui-file-card-right">
+              <Clear
+                style={{ position: "absolute", right: 0, top: 0 }}
+                className={
+                  darkMode
+                    ? "files-ui-file-icon dark-mode"
+                    : "files-ui-file-icon"
+                }
+                color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+                onClick={handleDelete}
+                size="small"
+                colorFill="transparent"
+              />
+            </div>
+          </Layer>
+          <Layer className="file-card-upload-layer" visible={isUploading}>
+            Upload Layer
+          </Layer>
+        </LayerContainer>
+        {/* <FileItemImage
           imageSource={imageSource}
           url={url}
           fileName={localName}
@@ -277,7 +345,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
             hovering={true}
             onCancel={onCancel}
           />
-        </div>
+        </div> */}
       </div>
     );
   }

src/pages/demo/FileCardDemoPage.jsx

@@ -18,6 +18,9 @@ import { AlertTitle } from "@mui/material";
 import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
 import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
 import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
+import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
+import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
 
 const FileCardDemoPage = (props) => {
   return (
@@ -116,20 +119,114 @@ const FileCardDemoPage = (props) => {
             image preview will be shown in order to save memory.
           </Alert>
         </section>
-        <section id="validation">
-          <SubTitle content="Validation" />
+        {/** VALIDATION UPLOAD AND MORE */}
+        <section id="dark-mode">
+          <SubTitle content="Dark mode" />
           <DescParagraph>
-            The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
-            <TypeHighlight>true</TypeHighlight>,{" "}
-            <TypeHighlight>false</TypeHighlight> or{" "}
-            <TypeHighlight>undefined</TypeHighlight>
+            The <CodeHighlight>FileCard</CodeHighlight> component supports
+            dark mode by setting the prop{" "}
+            <TypeHighlight>darkMode</TypeHighlight> to{" "}
+            <TypeHighlight>true</TypeHighlight>.
           </DescParagraph>
 
-          <Paper variant="outlined" style={{ padding: "25px" }}>
-            {/* <BasicDemoDropzone /> */}
+          <Paper
+            variant="outlined"
+            style={{
+              //padding: "25px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+            }}
+          >
+            <DemoFileMosaicDarkMode card />
           </Paper>
-          <p></p>
-          {/* <BasicDropzoneCodeJS /> */}
+
+          <CodeJSFileMosaicDarkMode card />
+        </section>
+    {/*     <section id="localization">
+          <SubTitle content="Localization" />
+          <DescParagraph>
+            The <CodeHighlight>FileMosaic</CodeHighlight> component has
+            multilanguage support. You can change the language in wich labels
+            are displayed by setting the{" "}
+            <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
+            the following languages are supported:
+            <ul>
+              {[
+                "English",
+                "Spanish",
+                "French",
+                "Italian",
+                "Portuguese",
+                "Russian",
+                "Chinnese (simplified)",
+                "Chinnese (traditional)",
+              ].map((x) => (
+                <li>
+                  <TypeHighlight>{x}</TypeHighlight>
+                </li>
+              ))}
+            </ul>
+          </DescParagraph>
+
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "20px",
+            }}
+          >
+            <DemoFileMosaicLocalization />
+          </Paper>
+          <CodeJSFileMosaicLocalization />
+        </section>
+
+        <section id="file-icon">
+          <SubTitle content="File Icons (extensive list)" />
+          <DescParagraph>
+            The <CodeHighlight>FileMosaic</CodeHighlight> component supports
+            several file types to properly set a file icon. The complete list of
+            file icons is the following:
+          </DescParagraph>
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px 0",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              //flexDirection: "column",
+              gap: "10px",
+              flexWrap: "wrap",
+            }}
+          >
+            <DemoFileMosaicFileIcons />
+          </Paper>
+        </section> */}
+
+        <section id="api">
+          <SubTitle content="API" />
+          <DescParagraph>
+            See the documentation below for a complete reference to all of the
+            props available to the components mentioned here.
+          </DescParagraph>
+          <ul>
+            <li>
+              <AnchorToTab href="/api/filecard">
+                {"<FileMosaic/>"}
+              </AnchorToTab>
+            </li>
+            <li>
+              <AnchorToTab href="/api/fileinputbuttom">
+                {"<FileInputButton/>"}
+              </AnchorToTab>
+            </li>
+          </ul>
         </section>
       </MainContentContainer>
       <RightMenuContainer>