QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 23:00:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: style tweaks in dropzoen accept/reject modes

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-08-14 16:12:13 +02:00
parent 9b8b51cb91
commit f97b127a69
2 changed files with 12 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/webapp/src/components/Dropzone/Dropzone.module.css
View File

@@ -1,6 +1,6 @@
.root { .root {
padding: 20px; padding: 20px;
border: 2px dashed #c5cbd3; /* Changed from dotted to dashed for better visibility */ border: 2px dotted #c5cbd3;
border-radius: 6px; border-radius: 6px;
min-height: 200px; min-height: 200px;
display: flex; display: flex;
@@ -8,31 +8,13 @@
background: #fff; background: #fff;
position: relative; position: relative;
transition: background-color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dropzoneActive { &.dropzoneAccept {
background-color: rgba(0, 123, 255, 0.15); border-color: rgb(0, 82, 204);
border-color: #007bff; background: rgba(0, 82, 204, 0.05);
} }
&.dropzoneReject {
.dropzoneActive .content { border-color: #AC2F33;
color: #007bff; /* Change text color to match the border when active */ background: rgba(172, 47, 51, 0.05)
} }
}
.content {
position: relative;
z-index: 20;
transition: color 0.3s ease;
}
.dropzoneActive:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 123, 255, 0.3); /* This creates a full overlay effect */
z-index: 10;
border-radius: 6px; /* Ensures the overlay matches the container's rounded corners */
}

5
packages/webapp/src/components/Dropzone/Dropzone.tsx
View File

@@ -238,7 +238,8 @@ export const Dropzone = (_props: DropzoneProps) => {
className: clsx( className: clsx(
styles.root, styles.root,
{ {
[styles.dropzoneActive]: isDragAccept || isDragReject, [styles.dropzoneAccept]: isDragAccept,
[styles.dropzoneReject]: isDragReject
}, },
classNames?.root classNames?.root
), ),
@@ -274,8 +275,6 @@ Dropzone.Idle = DropzoneIdle;
Dropzone.Reject = DropzoneReject; Dropzone.Reject = DropzoneReject;
type PossibleRef<T> = Ref<T> | undefined; type PossibleRef<T> = Ref<T> | undefined;
export function assignRef<T>(ref: PossibleRef<T>, value: T) { export function assignRef<T>(ref: PossibleRef<T>, value: T) {