[REF]: Change icons style location in a sass file. ALso overcome the issue when Mui sets box-sizing=inherit

Author: JinSSJ3

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

@@ -220,7 +220,7 @@
 }
 
 //// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
   font-size: 0.7rem;
   min-width: 19px;
   min-height: 19px;
@@ -229,6 +229,7 @@
   border-radius: 50%;
   background-color: rgba(32, 33, 36, 0.65);
   word-break: break-word;
+  box-sizing: content-box;
   &:hover {
     background-color: rgba(32, 33, 36, 0.85);
   }
@@ -238,4 +239,4 @@
       background-color: rgba(154, 160, 166, 0.85);
     }
   }
-}
+} */

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
+import "./../icons/IconStyles.scss";
 import "./components/FileCardPaper.scss";
 import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
 import useProgress from "../file-mosaic/hooks/useProgress";

src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss

@@ -173,7 +173,7 @@
 }
 
 //// ICONS
-.files-ui-file-icon {
+/* .files-ui-file-icon {
   font-size: 0.7rem;
   min-width: 19px;
   min-height: 19px;
@@ -182,6 +182,7 @@
   border-radius: 50%;
   background-color: rgba(32, 33, 36, 0.65);
   word-break: break-word;
+  box-sizing: content-box;
   &:hover {
     background-color: rgba(32, 33, 36, 0.85);
   }
@@ -192,3 +193,4 @@
     }
   }
 }
+ */

src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx

@@ -5,8 +5,9 @@ import {
   getLocalFileItemData,
   handleClickUtil,
 } from "../../../../core";
-import { FileMosaicProps } from "./FileMosaicProps";
 import "./FileMosaic.scss";
+import "./../../../icons/IconStyles.scss";
+import { FileMosaicProps } from "./FileMosaicProps";
 import LayerContainer from "../file-mosaic-layer/LayerContainer";
 import Layer from "../file-mosaic-layer/Layer";
 import FileMosaicName from "../FileMosaicName/FileMosaicName";
@@ -115,7 +116,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
   );
 
   //The size formatted and rounded in 2 decimals
-  const sizeFormatted: string| undefined = fileSizeFormater(localSize);
+  const sizeFormatted: string | undefined = fileSizeFormater(localSize);
   //alwaysActive
   const [showInfo, setShowInfo] = React.useState<boolean>(false);
 

src/files-ui/components/icons/Cancel/Cancel.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from "react";
+import * as React from "react";
 import { parseSize } from "../utils/utils";
 import { CancelProps } from "./CancelProps";
 import { handleClickUtil } from "../../../core";
 
-const Cancel: FC<CancelProps> = (props: CancelProps) => {
+const Cancel: React.FC<CancelProps> = (props: CancelProps) => {
   const { size, color, colorFill, onClick, style, className } = props;
   const finalSize = parseSize(size);
   const finalStyle = style ? style : {};

src/files-ui/components/icons/IconStyles.scss

@@ -0,0 +1,20 @@
+.files-ui-file-icon {
+  font-size: 0.7rem;
+  min-width: 19px;
+  min-height: 19px;
+  margin: 0;
+  padding: 2px 2px;
+  border-radius: 50%;
+  background-color: rgba(32, 33, 36, 0.65);
+  word-break: break-word;
+  box-sizing: content-box;
+  &:hover {
+    background-color: rgba(32, 33, 36, 0.85);
+  }
+  &.dark-mode {
+    background-color: rgba(154, 160, 166, 0.65);
+    &:hover {
+      background-color: rgba(154, 160, 166, 0.85);
+    }
+  }
+}