Connect Admin UI to landing page

[humphd]

We don't currently have a way for an admin to get to the Admin page. This adds another card to the landing page when a suer is an admin.

I've also cleaned up a few things in the landing page. However, the responsive widths aren't perfect, so maybe one of you could advise me on how to get it to wrap sooner.

Regular User

Admin User

[Eakam1007]

I believe this should make them more responsive. I tested this on my PC:

[humphd]

@Eakam1007 I'm stuck on how to do the selectors I need for these links to the instructions pages in testing now.

[humphd]

I've redone the landing page cards as actual cards, which seems to work better.

[Eakam1007]

@Eakam1007 I'm stuck on how to do the selectors I need for these links to the instructions pages in testing now.

Since the links are no longer part of the paragraph now, I think this would be good solution getByRole('link', { name: 'these instructions' }).first() for the first link
and getByRole('link', { name: 'these instructions' }).nth(1) for the second.

[Eakam1007]

We could extend these to the admin cards but we do not have a way to mock login as admin yet

[humphd]

@Eakam1007 I'm stuck on how to do the selectors I need for these links to the instructions pages in testing now.

Since the links are no longer part of the paragraph now, I think this would be good solution getByRole('link', { name: 'these instructions' }).first() for the first link and getByRole('link', { name: 'these instructions' }).nth(1) for the second.

Great, thank you. Fixed!

[Eakam1007]

One small question, rest looks great!

I have created #531 to allow tests to login in as admin. Could you please create an issue for adding tests for the admin card?