[UX/UI] IA Reader design adjustments

wrenaria commented 3 weeks ago

IA Reader mostly looks good, but I have a few design quibbles:

There is currently no whitespace between the top of the IA reader / below the blue block containing search. There should be. -- Ideally a little whitespace either side of an item that fills width would be nice as well, but this is less important to me.
The text on headers is huuuuge. Please adjust to match intended design.
The chevron/circle button doesn't look proportionally correct to me?? Is that just a chevron icon placed inside of a circle? The design is using the circle-chevron-left icon, so it's an all-in-one solution.
the blue of the "search inside" button in its default state should match the other blue buttons in the UI. Right now it is too dark.

Figma design: https://www.figma.com/design/0HdrTzkUb4E9L0DROYdmIw/DAMS?node-id=600-13028&t=m0faZLdLw36Wnl4w-1

Screenshot 2024-10-31 at 2 07 56 PM

Screenshot 2024-10-31 at 2 22 04 PM

UcDust commented 2 weeks ago

@wrenaria I think this should be deployed on dev now.

wrenaria commented 2 weeks ago

@UcDust Looking better, but that circle-chevron button still looks like the wrong icon to me. Are you pulling from the correct Font Awesome set? We should be primarily using Font Awesome v6 icons; is it pulling from v5 or something?

Also it reads as comically large on small viewports, so can you make it 1.75 rem so it scales with the text?

UcDust commented 1 week ago

@wrenaria this should be deployed now on dev.

ucd-library / dams

[UX/UI] IA Reader design adjustments #218