diff --git a/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
index 28c80a99aa1a359b9754a87fe28a643b5be0adc7..303b726f48acf510a69ff307e3a61a46f247547a 100644
--- a/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
+++ b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
@@ -1,4 +1,4 @@
-import { asureColor, colourNameToHex, hexColorToRGB } from "../../../core";
+import { completeAsureColor } from "../../../core";
import { DEFAULT_BORDER_RADIUS } from "../../dropzone/components/dropzone/DropzoneProps";
export const dropLayerDynamicStyle = (styleId: string, color: string | undefined, isDragging: boolean | undefined) => {
@@ -10,19 +10,15 @@ export const dropLayerDynamicStyle = (styleId: string, color: string | undefined
className: `dropzone-ui-layer`,
rules: {
- backgroundColor: hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 0.4
- ), borderRadius: DEFAULT_BORDER_RADIUS,
+ backgroundColor:
+ completeAsureColor(color, 0.4),
+ borderRadius: DEFAULT_BORDER_RADIUS,
position: "absolute",
left: 0,
top: 0,
width: "0%",
height: "0%",
- border: isDragging ? `2px dashed ${hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 1
- )}` : undefined,
+ border: isDragging ? `2px dashed ${completeAsureColor(color, 1)}` : undefined,
zIndex: 20,
},
diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
index 4cf167d5c94836731f333ac4b95d41af8b344ec4..e4709b2e35e83274ecf879934eed4fd857934f2d 100644
--- a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
@@ -45,7 +45,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
}
const finalClassName = resetStyles
? className
- : addClassName("files-ui-footer files-ui-footer-border", className);
+ : addClassName("files-ui-footer files-ui-footer-border-bg-color", className);
const finalStyle = resetStyles
? style
diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
index 26b60638d46b34d4e0cccb74b942f124d2240431..d93cb00f694220a64e48152abcc1bbde8c7c8b0f 100644
--- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -24,6 +24,7 @@ export type DropzoneHeaderProps = {
style?: React.CSSProperties;
className?: string;
resetStyles?: boolean;
+ color?:string;
};
const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
@@ -43,6 +44,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
style,
className = "",
resetStyles,
+ color
} = props;
const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -60,12 +62,12 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
if (onUploadStart && urlPresent && numberOfValidFiles) {
if (isUploading) {
- result.push(<UploadingProcess spin={true} color="#646c7f" />);
+ result.push(<UploadingProcess spin={true} color={color} />);
} else {
result.push(
<React.Fragment>
<>{DropzoneHeaderLocalizer.uploadFilesMessage}</>
- <Upload color="#646c7f" onClick={handleStartUploading} />
+ <Upload color={color} onClick={handleStartUploading} />
</React.Fragment>
);
}
@@ -90,13 +92,13 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
//clean not valid files on click
if (onClean) {
result.push(
- <Clean color="#646c7f" onClick={handleClean} size="semi-medium" />
+ <Clean color={color} onClick={handleClean} size="semi-medium" />
);
}
if (onReset) {
result.push(
<Cancel
- color="#646c7f"
+ color={color}
onClick={() => onReset?.()}
// colorFill="rgba(255,255,255,0.8)"
/>
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
index 657f0dd194f2ef15c9e832c2c931943dfe78747e..84ad391cce571f4c81e18682c4b1a061c37760c3 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
@@ -17,7 +17,7 @@
//padding: 23px 0px;
/// label
- color: #646c7f;
+ //color: #646c7f;
text-rendering: optimizeLegibility;
font-size: 1.5em;
font-family: inherit;
@@ -65,7 +65,7 @@
font-family: inherit;
//padding-right: 10px;
font-size: 1rem;
- background-color: rgba(0, 128, 128, 0.249);
+ //background-color: rgba(0, 128, 128, 0.249);
@media (max-width: 960px) {
//width: calc(100% - 1px);
//padding-right: 1px;
@@ -89,7 +89,7 @@
align-items: flex-start;
justify-content: center;
border-top: 1px dotted grey;
- background-color: #80808021;
+ //background-color: rgba(128, 128, 128, 0.129);
font-family: "Poppins", sans-serif;
font-family: inherit;
padding-left: 10px;
@@ -103,7 +103,7 @@
-webkit-box-orient: vertical;
- background-color: rgba(0, 128, 128, 0.249);
+ //background-color: rgba(0, 128, 128, 0.249);
@media (max-width: 960px) {
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index c0c64b12ab8f382e7ef0dd7c14db7820db1554de..8f2a0aff7af84db883413552f546dcf7990fbd85 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -51,6 +51,7 @@ import useDropzoneFileListUpdater from "../../../../hooks/useDropzoneFileUpdater
import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
+import { completeAsureColor } from "../../../../core";
//import { print_manager } from "../../../../../utils";
@@ -691,8 +692,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
<div
ref={fuiRippleRefAbs}
className="dropzone-ui-base-ripple-absolute"
- style={{borderRadius:style?.borderRadius}}
-
+ style={{ borderRadius: style?.borderRadius }}
>
<div
ref={fuiRippleRefRel}
@@ -707,6 +707,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
<>{customHeader}</>
) : (
<DropzoneHeader
+ color={completeAsureColor(color)}
style={styleHeader}
className={classNameHeader}
resetStyles={resetStylesHeader}
@@ -773,7 +774,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
className={dropLayerClassName}
onDragLeave={handleDragLeave}
onDrop={kamui}
- style={{borderRadius:style?.borderRadius}}
+ style={{ borderRadius: style?.borderRadius }}
/>
)}
diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts
index 70c5e8c84269504e3ca35d2148230b85c93a72c1..67565ef6f48360f3dbca72a7f20c9982de469cdf 100644
--- a/src/files-ui/components/dropzone/useDropzoneClassName.ts
+++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts
@@ -1,6 +1,6 @@
import { DynamicSheet, DynamicSheetRule, DynamiCSS } from "@dynamicss/dynamicss";
import * as React from "react";
-import { asureColor, colourNameToHex, hexColorToRGB } from "../../core";
+import { completeAsureColor } from "../../core";
import { DEFAULT_BORDER_RADIUS } from "./components/dropzone/DropzoneProps";
export default function useDropzoneClassName(
@@ -96,20 +96,19 @@ const makeDynamicDropzoneStyleSheet = (
const rootColorBorderStyle: DynamicSheetRule = {
className: `files-ui-dropzone-extra`,
rules: {
- border: `1px dashed ${isDragging?"transparent":hexColorToRGB(
- asureColor(colourNameToHex(color)),
- 1
- )}`,
+ color: completeAsureColor(color),
+ border: `1px dashed ${isDragging ? "transparent" : completeAsureColor(color)}`,
borderRadius: DEFAULT_BORDER_RADIUS,
backgroundColor: backgroundColor,
minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
},
};
const footerBorderStyle: DynamicSheetRule = {
- className: `files-ui-footer-border`,
+ className: `files-ui-footer-border-bg-color`,
rules: {
"border-bottom-left-radius": DEFAULT_BORDER_RADIUS,
"border-bottom-right-radius": DEFAULT_BORDER_RADIUS,
+ backgroundColor: completeAsureColor(color, 0.129)
},
};
const headerBorderStyle: DynamicSheetRule = {