🩹(frontend) improve minor ux/ui

- Better logo resolution (x4)
- Remove floating bar when printing a doc
- Add loader during doc import
This commit is contained in:
Anthony LC
2026-03-02 11:49:21 +01:00
parent a30384573e
commit c9f42e7924
8 changed files with 18 additions and 6 deletions

View File

@@ -98,7 +98,7 @@ test.describe('Home page', () => {
style: { width: '110px', height: 'auto' },
},
icon: {
src: '/assets/icon-docs-v2.svg',
src: '/assets/icon-docs-dsfr-v2.png',
style: {
width: '100px',
height: 'auto',

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -16,6 +16,7 @@ const PRINT_ONLY_CONTENT_CSS = `
/* Hide non-essential elements for printing */
.--docs--header,
.--docs--floating-bar,
.--docs--resizable-left-panel,
.--docs--doc-editor-header,
.--docs--doc-header,

View File

@@ -39,7 +39,12 @@ export const DocsGrid = ({
}: DocsGridProps) => {
const { t } = useTranslation();
const [isDragOver, setIsDragOver] = useState(false);
const { getRootProps, getInputProps, open } = useImport({
const {
getRootProps,
getInputProps,
open,
isPending: isImportPending,
} = useImport({
onDragOver: (dragOver: boolean) => {
setIsDragOver(dragOver);
},
@@ -94,7 +99,7 @@ export const DocsGrid = ({
$align="center"
className="--docs--doc-grid"
>
<DocsGridLoader isLoading={isRefetching || loading} />
<DocsGridLoader isLoading={isRefetching || loading || isImportPending} />
<Card
data-testid="docs-grid"
$height="100%"

View File

@@ -225,7 +225,13 @@ export const DocsGridItemDate = ({
}
return (
<Text $size="xs" $layer="background" $theme="neutral" $variation="primary">
<Text
$size="xs"
$layer="background"
$theme="neutral"
$variation="primary"
$shrink="0"
>
{dateToDisplay}
</Text>
);

View File

@@ -110,7 +110,7 @@ export const useImport = ({ onDragOver }: UseImportProps) => {
},
noClick: true,
});
const { mutate: importDoc } = useImportDoc();
const { mutate: importDoc, isPending } = useImportDoc();
return { getRootProps, getInputProps, open };
return { getRootProps, getInputProps, open, isPending };
};