Change layout of AuthorEdit and add SchemaGuideLinks

[abelsiqueira]

Pull request details

List of related issues or pull requests

Refs:

• Add icon pattern for Authors screen #457 (part of it)

Describe the changes made in this pull request

Change the layout of AuthorEdit and add SchemaGuideLink.

I added the GuideLink inside the input because I couldn't make it look right otherwise.
I also increased the size and fixed the color of the info icon.

Instructions to review the pull request

cd $(mktemp -d --tmpdir cffinit-pr.XXXXXX)
git clone https://github.com/citation-file-format/cff-initializer-javascript .
git checkout <this branch>
npm clean-install
npm run dev
# go to localhost:8080, see if the app works correctly
npm run lint
npm run test:unit:ci

[jspaaks]

• "I added the GuideLink inside the input because I couldn't make it look right otherwise." that's alright, I had put the icons outside initially because I thought they woudl get in the way of the red circle that indicates a schema error. But as far as I can tell we don't generate any schema errors for name-suffix, family-names, and name-suffix, so no problem.
• "I also increased the size and fixed the color of the info icon." Nice, helps to create a more unified look.
• I did notice that the icon is currently included in the taborder order, not a huge problem but would be better if we can skip this somehow.
• The text color for the q-labels should be a bit lighter to be the same as the questions. If I remember correctly, the color is a quasar css variable named --q-dark

[abelsiqueira]

Thanks for the review. I've updated the taborder and the color of the labels.

[jspaaks]

Another great one, thanks Abel! 🍰 🎉

[abelsiqueira]

Thanks for the review 🍕