search

gosqasorg / asset-provenance-tracking

Node.js implementation, using Azure as a backend, of a system for Global Distributed Tracking, a free-of-charge, free-software system for building up a provenance or history of objects/assets/devices.
https://gosqas.org/
GNU Affero General Public License v3.0
4 stars 3 forks source link

Update font sizes, line heights, and spacing to match Figma design #189

Open judithweng opened 1 week ago

judithweng commented 1 week ago

Front page needs some styling fixes. Below is a screenshot of the required font sizes and line heights

image
chihlinc commented 6 days ago

@judithweng I can write the codes like the font size below. Frontpage - Global Distributed Tracking: Heading 1 About, Sample devices, contact: Heading 2 New device, new container: Heading 3 Create new device, device image(optional), Device name, device description, choose files: Heading 4

The Global Open Source Quality Assurance System (GOSQAS) provides the opportunity to create truthful, transparent documentation via our open source provenance tracker, Global Distributed Tracking (GDT). Designed specifically for low-resource settings, GDT allows anyone with simple website access to securely record their project data. Our development philosophy of “Trust Through Transparency” (TTT) encourages better global communication within diverse communities- to include humanitarian response, open source hardware, and scientific research: Heading 5

judithweng commented 6 days ago

@chihlinc That's perfect! Thank you!

judithweng commented 6 days ago

@chihlinc Katie made some recent changes in PR #194. You can continue to fix the font on the other pages but most importantly try to fix the spacing for the front page. Nina provides the exact padding for each component in Figma.

chihlinc commented 6 days ago

What spacing are you referring to? Could you elaborate?

judithweng commented 6 days ago

@chihlinc Spacing between each text, buttons and fields. For example, the button "Create Device" currently has a gap between the button and the end of the blue form. This gap looks bigger than the one pictured in Figma. See images below (tops is current site and bottom is figma)

If you could double check if the padding is correct and code it in (if not already), that would be perfect.

gdt-local gdt-figma