diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss index 5162e6eaeffacf045b5e444ff8361469fe51d168..24ecc2a46c95c074a07d6671261c4c17b0ee9d81 100644 --- a/src/files-ui/components/file-card/FileCard.scss +++ b/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); } } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx index 7dc71ff89002a3c34ea4ba125e2b92b5c84046fe..a4b68f6138f1cf87f7b000f36d10914d44d688a5 100644 --- a/src/files-ui/components/file-card/FileCard.tsx +++ b/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"; diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss index c6d2aaf3d6757ad6d02520895fd21d9b079762a2..2a96708b12cc32db423ebc2d275fa279ddb26cb3 100644 --- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss +++ b/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 @@ } } } + */ \ No newline at end of file diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx index 455a3af3a80d58acae140ea45299d490fe4c51b8..2cc106e334297eb186377ff435eecc9d18fcdeb0 100644 --- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx +++ b/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); diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx index 738852e46547149f2729e84d2c0d94e43fd1702c..77709d16585b7c9c661cb50d285e93a4fb35ac96 100644 --- a/src/files-ui/components/icons/Cancel/Cancel.tsx +++ b/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 : {}; diff --git a/src/files-ui/components/icons/IconStyles.scss b/src/files-ui/components/icons/IconStyles.scss new file mode 100644 index 0000000000000000000000000000000000000000..03d0a0d90a04908379159c2bafb2ada540399169 --- /dev/null +++ b/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); + } + } +}