From 122e46ceefbac6902b6069274b35ef2717f01620 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 22 Mar 2023 18:21:25 -0500
Subject: [PATCH] [REF]: Change icons style location in a sass file. ALso
overcome the issue when Mui sets box-sizing=inherit
---
.../components/file-card/FileCard.scss | 5 +++--
.../components/file-card/FileCard.tsx | 1 +
.../components/file-mosaic/FileMosaic.scss | 4 +++-
.../components/file-mosaic/FileMosaic.tsx | 5 +++--
.../components/icons/Cancel/Cancel.tsx | 4 ++--
src/files-ui/components/icons/IconStyles.scss | 20 +++++++++++++++++++
6 files changed, 32 insertions(+), 7 deletions(-)
create mode 100644 src/files-ui/components/icons/IconStyles.scss
diff --git a/src/files-ui/components/file-card/FileCard.scss b/src/files-ui/components/file-card/FileCard.scss
index 5162e6e..24ecc2a 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 7dc71ff..a4b68f6 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 c6d2aaf..2a96708 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 455a3af..2cc106e 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 738852e..77709d1 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 0000000..03d0a0d
--- /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);
+ }
+ }
+}
--
GitLab