search

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 - Required for Workspace/PDF Viewer #165

Closed nillabeanrc88 closed 11 months ago

nillabeanrc88 commented 1 year ago

Loom Video: https://www.loom.com/share/292f524a831a479f9e7e192129d6d12b Figma Design: Right Pane: https://www.figma.com/file/gtUCnDgI1V61kDL2YD2GfO/Style-Guide---DeSci-Nodes?type=design&node-id=18%3A20293&t=WbsU9Xp90L9hGFsG-1 Figma Design: Workspace Editor (Entire View) https://www.figma.com/file/fq5PkOL7FNMDTCf1BQMRz1/DeSci-Nodes-(Beta)?type=design&node-id=6329%3A315463&t=c5g3hf1hWWhoXFd4-1

Description: This ticket outlines changes needed for the workspace and the PDF viewer interface. Tasks:

  1. Avatar Spacing: The avatars in the right pane should be spaced 16 pixels apart instead of 20.
  2. Pane Text Size: In the pane, where it says "edit node," the text size should be increased from 14px to 18px, which will be the highest level of text in this pane. All other text in the pane should be smaller.
  3. Alignment: The "edit node" text needs to be aligned perfectly with the 'X' icon to the left of it. Currently, it is not lined up correctly.
  4. Header Size: The header is currently too short. The "edit node" text is not lined up with the 'X' button. The header size should be increased.
  5. Segmented Control: This control size needs to be adjusted. Currently, it is set to 26 pixels high in development, but in the design, it is 34 pixels high. Consider adjusting this to 32 pixels to adhere to multiples of eight.
  6. Segmented Control Text: Inside the segmented control, change the text from "components" to "current". All text should be in bold and background turn completely black when selected.
  7. Navigate Plus Icon: The "navigate" feature should not have a plus icon. Instead, reserve this area for an info icon that provides additional details about the feature.
  8. Component Icons: Within the research report, the icons should have a teal border instead of a white one.
  9. CCBY Button Text Alignment: The CCBY text within the button is not centered. It should be corrected and the text should be 10 pixels, corresponding to our extra small size.
  10. Style Guide Type Scale Sizes: Review and adhere to the style guide type scale sizes.
  11. Annotation Function: Test the annotation function to ensure it's working correctly.