search

desci-labs / nodes-web

UI to create and consume interoperable research objects
https://nodes.desci.com
GNU Affero General Public License v3.0
11 stars 3 forks source link

UI Changes - Design Adjustments for 'My Collection' View on Nodes Dev #171

Closed nillabeanrc88 closed 9 months ago

nillabeanrc88 commented 1 year ago

Loom Video: https://www.loom.com/share/10529968a07541b0b6a297edfec7c0c7 Figma Designs: https://www.figma.com/file/fq5PkOL7FNMDTCf1BQMRz1/DeSci-Nodes-(Beta)?type=design&node-id=2675%3A347555&t=nzp4AmHXkwQBxQkm-1

Tasks:

  1. Adjust the height of the button style on the 'My Collection' view to 36 pixels.
  2. Double-check the pixel radius of the button (should be 8 pixels).
  3. Remove the text that says "a collection of your contributions" below the 'My Collection' header.
  4. The icon next to the 'My Collection' header should have a teal outline around it. The icon itself should be 39 by 39 pixels (40 by 40 is also fine). It should be within a bounding box that's 48 by 48 pixels, and the icon inside itself should be 20 pixels high by 18 pixels wide.
  5. The padding below the header to the line should be 24 pixels.
  6. Add a segmented control for my research (blue) and 'Community Contributions' (purple).
  7. Double-check the font sizes of the text in the black box on the node card.
  8. Change the title size from 20 pixels on the node card to 16 pixels. The font weight should be bold.
  9. Ensure the padding inside the node cards is 16 pixels all around.
  10. Adjust the pixel distance from the edge of the node card to 16 pixels (currently it seems to be 8 pixels).
  11. Change the font size of the 'Unpublished' and 'Published' indicators to 10 pixels, and the font weight should be bold instead of medium.

One thing not mentioned in the video: Please verify the default and hover states of the node card. It should not exhibit any outlines unless the mouse is hovering over it.