Update mobile footer

[fady-json]

Summary
Update mobile footer

Impacted URL
https://dashboard.test.keep.network/

Steps to reproduce

1. Visit Keep Dashboard on mobile or Chrome (you can follow these steps)
2. Scroll to the bottom of the page to find footer

---

Proposed Change Description

• Footer does not meet minimum font size (see CSS suggested changes below)
• Footer is unreadable on mobile so there is room for UX improvement

Proposed Change Figma, Screenshot or Video

• For reference to the following points, please consult this Figma link.

1. Change the following H5 to the following CSS

.h5 {
  font-family: Work Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
}

2. Add the class mobile-footer-signature to parent div element of the signature. To change the footer's signature add the following CSS

@media screen and (mobile breakpoint) {
  mobile-footer-signature {
    text-align: left;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
  }
}

3. Add the class mobile-footer-svg to the SVG html tag. In order to change the footer's SVG (for the Keep icon) add following CSS

@media screen and (mobile breakpoint) { 
  .mobile-footer-svg {
      align-self: start;
  }
}

*Current footer

Proposed Design

[liz-shinn]

Thanks @Fadyazmy for submitting this issue! I 100% agree that on mobile (and on desktop on well it's a bit small) that there's a contrast issue with text here. However, in the latest releases on the token dashboard, we are changing the treatment of the footer.

This is what we have for the desktop menu, and the footer is on the bottom lefthand within this main nav:

It's in the community design system Figma here

I hadn't considered actually how this would appear on mobile though, since the mobile menu is collapsible... Hmm... Any thoughts here?

[liz-shinn]

Maybe on mobile the footer content should stay at the foot of the screen always versus collapsing in a hamburger menu.

[fady-json]

Ah I hadn't come across this desktop menu before. It would be tricky to incorporate that style to mobile, since indeed the footer on the desktop version is part of the menu, and the menu is a collapsible one.

If I understand your second comment, you're suggesting to have mobile footer at the foot of the screen (i.e same location to how it is on mobile, at the bottom), is that correct? If so, that's how I'm also suggesting the footer to be, at the foot of the screens like here.

[fady-json]

We can also have the footer to be just on the mobile menu screen, but it would need to include a lot of info.

If you wanted to convert the desktop menu to mobile directly, it'd look something like this (put them side to side). This method does miss key links such as whitepaper, team, advisors, blog, twitter, telegram and reddit.