fix(documents): improve upload modal and document theme

This commit is contained in:
Rafael Foster
2026-04-29 06:27:37 -03:00
parent 72fca92066
commit 1ca8110d56
20 changed files with 200 additions and 28 deletions
+71 -4
View File
@@ -33,18 +33,19 @@
.documents-toolbar__search-icon {
position: absolute;
left: var(--space-3);
left: var(--space-4);
top: 50%;
width: 16px;
height: 16px;
width: 18px;
height: 18px;
transform: translateY(-50%);
color: var(--color-text-tertiary);
pointer-events: none;
}
.documents-toolbar__search-input {
width: 100%;
min-height: var(--target-base);
padding: 0 var(--space-3) 0 var(--space-9);
padding: 0 var(--space-3) 0 calc(var(--space-10) + var(--space-1));
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-2);
@@ -223,7 +224,73 @@
font-size: var(--text-xs);
}
.document-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 148px;
padding: var(--space-5);
border: 1.5px dashed color-mix(in srgb, var(--module-accent) 48%, var(--color-border));
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--module-accent) 7%, var(--color-surface));
color: var(--color-text-secondary);
text-align: center;
cursor: pointer;
transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.document-dropzone:hover,
.document-dropzone--active {
border-color: var(--module-accent);
background: color-mix(in srgb, var(--module-accent) 12%, var(--color-surface));
}
.document-dropzone--active {
transform: translateY(-1px);
}
.document-dropzone__icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--module-accent);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.document-dropzone__icon svg {
width: 22px;
height: 22px;
}
.document-dropzone__title {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.document-dropzone__hint,
.document-dropzone__file {
max-width: 100%;
font-size: var(--text-xs);
overflow-wrap: anywhere;
}
.document-dropzone__file {
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
color: var(--module-accent);
background: color-mix(in srgb, var(--module-accent) 14%, transparent);
font-weight: var(--font-weight-semibold);
}
.document-member-picker {
margin-top: var(--space-2);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-3);