[TB] Add Netlify badge to application

[aaronreed708]

Problem/Concern

According to https://www.netlify.com/legal/open-source-policy/, we need to add the Netlify badge to our application that, when clicked, will link the user to https://www.netlify.com. The open source policy link gives examples of projects that do so. We can use one of their badges or one of our own.

@lwnoble do you have a suggestion of where to put it? Pre-made badges are here: https://www.netlify.com/press/#badges (search for "netlify badges" in the page, reference is broke). The examples I see show it in the footer, but we don't have a footer.

Proposed Solution

[aaronreed708]

@aaronreed708 to meet with @lwnoble

[turnalfred]

Hello @aaronreed708 I was looking to pick this Up

Above is the proposed location I was thinking of placing the badge can you lemme know if that looks ok

[aaronreed708]

@turnalfred let us see if @lwnoble has any feedback since she is our designer.

Lise, any preference on where this goes? Should we introduce a section to hold it? Otherwise I think Alfred picked a good spot

[aaronreed708]

So I talked to Yessel today (a designer at Discover who is very familiar with Theme Builder) and she suggested putting the badge where you have it, at the bottom of the left nav bar, but with these changes:

• put a div containing the badge at the bottom of every left nav (those div's with className = "design-system-editor-left-nav"), not just on welcome page
• give it a fixed position, so that it doesn't move if the rest of the left nav content scrolls
• the div that the badge is on should be transparent
• Yessel suggested that using the "Light Badge" might be better than using the "Color Background Badge" from the page containing Netlify Badges because she is afraid that the "Built With" text on the left would be hard to see on a really dark background

@turnalfred what do you think? Does all of that sound good to you?

[turnalfred]

Hello @aaronreed708 I agree with all the assertions except the second one a fixed position can sometimes cause layout issues for the div later down the line as such I would suggest we use a flex column with space between justify for the Left nav-content and it's related badge footer see example in the PR I created

AS such I'll turn the badge into a small component to be reused across all sidebars as suggested.

[Turntabl-DorothyEwuah]

Picking this up to continue work on it while Alfred is unavailable.

[aaronreed708]

Yessel to create wireframes related to Auto Save issue (#544 ) and this Netlify issue where Netlify badge and Auto Save restore points both accessible from a new, ever present footer.

[aaronreed708]

If we want to support responsive design, then left nav column could change. If it changes, it'll look weird if the netlify image doesn't change so @lwnoble and I are now thinking that we should make a Netlify image component and put it at the bottom of each left nav.

[evangk6]

Need to assign Lise and Yessel to review design.

[aaronreed708]

@Chessel can you assign yourself to this task, please?

[Chessel]

I'll work on this!

[Chessel]

I wonder if it would be possible to add a max width to the logo of 90px. I read their logo guidelines and they didn't mentioned anything about minimum sizes.

Here is the proposed design, pretty similar to @turnalfred just with a light badge instead and a max width of 90px. I do agree that fixing it to the screen might create conflicts. One being when a section has a lot of items on that side bar

[PaulaPaul]

Paula to follow up with contacts -