desci-labs / nodes-web

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

UI Changes - Drive UI Differences #174

Closed nillabeanrc88 closed 11 months ago

nillabeanrc88 commented 1 year ago

Loom Video: https://www.loom.com/share/fa690b45b47144a493e4f921e27ebe76 Figma: https://www.figma.com/file/fq5PkOL7FNMDTCf1BQMRz1/DeSci-Nodes-(Beta)?type=design&node-id=4403%3A758307&t=XfaFC5N6ZIbWNg34-1

Tasks:

  1. Update the header text size to 18 pixels instead of the current 28 pixels.
  2. Adjust the distance between the line and the header to 16 pixels instead of the current 35 pixels.
  3. Fix the distance between the header and the top navigation (sub nav) to 32 pixels instead of the current 50 pixels.
  4. Set the height of the button to 36 pixels as per the design.
  5. Ensure the distance between the two buttons is 4 pixels from the bounding box.
  6. Adjust the bounding box around the icon to 16 pixels.
  7. Size the icon inside the button appropriately.
  8. Verify that the text inside the button is 14 pixels.
  9. Make the padding between the text and the inside of the button even (16 pixels on both sides).
  10. Check and update the corner radius of the button to 8 pixels.
  11. Align the breadcrumbs and the button vertically and have them centered across from each other.
  12. Verify and adjust the padding between the left side of the star icon (inside table rows) to 13 pixels.
  13. Check and update the star icon bounding box to 20 pixels.
  14. Verify and adjust the icon size next to the text inside table rows to 24x24 pixels.
  15. Confirm and adjust the icon size inside the table rows to 18x17 pixels.
  16. Remove the unused outline icon on the far left of the file item.
  17. Size up the text next to the icon in table rows to 14 pixels.
  18. Set the header text in table columns to bold with a size of 14 pixels.
  19. Ensure the text below the headers in table columns is regular weight with a size of 14 pixels.
  20. Adjust the position of icons on the right side of the screen to be 16 pixels from the left.
  21. Set the distance between the icons on the right side of the screen to 24 pixels.
  22. Maintain consistency in spacing by using 8-pixel increments throughout the design.