Color Theme 1

Color Theme 2

Color Theme 3

Color Theme 4

A video of the change can be found here

@jonatoni @jflory7 your thoughts on this please.
If this is something that can be taken up, I would like to take this up and move forward with it :smiley: :smiley: :smiley: :smiley: :smiley:

@phoenixabhishek thanks a lot for your suggestions :smile:
Regarding the colour, we will use the same - please check the guidelines here: https://fedoraproject.org/wiki/Logo/UsageGuidelines#Colors

Can you please explain a bit more in details what other changes you want to make, apart from the background colour? For example, making the buttons from rectangle to oval etc.

Regarding the colour, we will use the same - please check the guidelines here: https://fedoraproject.org/wiki/Logo/UsageGuidelines#Colors

@jonatoni , I checked the guidelines, any possibilities of using the Secondary colors (Friends Magenta, Features Orange , or Freedom Purple ) ?

Can you please explain a bit more in details what other changes you want to make, apart from the background colour? For example, making the buttons from rectangle to oval etc.

Yes,
Firstly, I made an identifier for the page that we are currently on to represent it on the sidebar (in image, 'What are happiness Packets?').
So, this will highlight the page we are currently on like inspiration, FAQs, Archive, etc.

Secondly, the login and Send some happiness now! buttons' font have been made bigger and given a thicker border, so as to grab the user attention, because these are our 'Call to action' buttons.

Also, these buttons have been given an interactive hover effect.
For 'Login', on hover, the font becomes bold, and the background changes to white color, while the internal text will have the theme color.
For 'Send some happiness now!', the background changes to white color, while the internal text will have the theme color, and the mail icon will become a bit bigger while simultaneously making a smooth 360deg turn.

These interactions can be seen in this video.

The fonts too have been modified to a sans-serif type.

I have some ideas for the footer too, but that would depend on the main site design,

Is this taken?

@severusho yes, currently I am looking into this :smile: :smile: :smile: :smile: :smile:

@jonatoni , I checked the guidelines, any possibilities of using the Secondary colors (Friends Magenta, Features Orange , or Freedom Purple ) ?

@phoenixabhishek I think it is best to use the Fedora Blue or Fedora Dark Blue colors for the website to maintain the identity of the Fedora brand. However, I am not a professional designer. I would ask in #fedora-design for feedback on color scheme. Or maybe @duffy @mleonova @maryshak1996 could offer pointers here in the ticket.

Firstly, I made an identifier for the page that we are currently on to represent it on the sidebar (in image, 'What are happiness Packets?').

Secondly, the login and Send some happiness now! buttons' font have been made bigger and given a thicker border

Also, these buttons have been given an interactive hover effect.

The fonts too have been modified to a sans-serif type.

@phoenixabhishek The rest of these changes are acceptable to me. As much as possible, I think all of these changes should be sent upstream where possible. For now, I'd like to avoid changing the color scheme until we get more feedback on Fedora brand usage.

@jflory7 okk, so I do have the code that would be needed for these changes.
Once things with the design team are final, just let me know so that I can go ahead and make the changes.

Also, I was thinking of making the css better in some aspects.
Like, using variables for color properties to avoid typing the same value at multiple places.
Then we can also make use of LESS/SASS for the css.
This will avoid repetition of code.

This can be either done with this, or once this is done, it can be addressed in another PR.

Thoughts on this..???

Like, using variables for color properties to avoid typing the same value at multiple places.

I like this idea for simplicity. I would like to see this change in a pull request by itself.

Then we can also make use of LESS/SASS for the css.

I'm not personally familiar with this, but I'm happy to learn. These all sound like good candidates to send to upstream too.

This can be either done with this, or once this is done, it can be addressed in another PR.

I prefer smaller, incremental pull requests wherever possible. Better explained by some Twitter humor. :grin:

I prefer smaller, incremental pull requests wherever possible. Better explained by some Twitter humor. 😁

I remember RTing that :laughing: :laughing: :laughing: :laughing: :laughing:

Okk, so I'll start with analyzing the current css and making use of variables where possible.

Will open a PR once done, and post it here to, so that others too remain in the knowing. :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup:

PR made for css variables.

Issue#50 opened in upstream too.

PR#151 made for button style changes.

Current Styles

New styles

Hover effects

@phoenixabhishek Do you have any other changes you plan to make for this ticket? I re-read the original ticket and I wasn't clear what else you are thinking to do. It would help to have a bullet-point list of any remaining work you want to do for this ticket.

@jflory7 yes, there are a few.
To list them down:

• Have a design for the active sidebar element. (currently blocked by this PR)
• Remove the shadow above the footer.
• Change the font to an appropriate sans-serif font, and have hierarchical font-sizes.

(Optional / TBD)

• Redesign the footer.
• After login, the contents on the sidebar increase, so an appropriate design for the same.
• Migrate from CSS to LESS/SASS (CSS pre-processors) for features that will make the CSS structure more readable and easier to maintain.

Remove the shadow above the footer.
Change the font to an appropriate sans-serif font, and have hierarchical font-sizes.
Redesign the footer.
After login, the contents on the sidebar increase, so an appropriate design for the same.

@phoenixabhishek Could you help me better understand your motivation for these changes?

@jflory7 yes, sure.

Remove the shadow above the footer.

This needs to be done because the whole website is a flat design currently. We don't use shadows or gradients on any visual part.
So the shadow can be removed for that purpose.
Also, with shadows, they are used to give an elevated feel to an element. The footer doesn't need any elevation.

Change the font to an appropriate sans-serif font, and have hierarchical font-sizes.

Conventionally, Sans-Serif fonts are easier to read than Serif fonts on the web, while Serif fonts work better on print.
So we can change out fonts to a Sans-Serif font.
Also, the upstream project too uses Sans-Serif fonts for their content across the website.
For the hierarchy, on the homepage, the block that starts with

People are generally much more loved than they think...

has a bigger font-size than the paragraph just beneath it.
Although, there seems to be no actual difference in the kind of message that both these paragraphs convey, they still have different font-sizes.

Also, the smaller font is carried along to the rest of the content, and is not very easy to read and is too small.

The three headings:

What are Fedora Happiness Packets?

How does it work?

Happiness Archive

All don't have the same sizes.
This hierarchy of font sizes is better implemented in our FAQ page .

The following can be discussed, and if concluded as not required, can be skipped.

Redesign the footer.

In the footer, the content we have, can be seen as two categories.
Social (#wearefedora links and social links) and Project based (Need help and fork info).
This can be made to appear as two blocks.
On the left, we can have project details, and on the right we can have the social links.

This can be skipped if it doesn't feel right.

After login, the contents on the sidebar increase, so an appropriate design for the same.

Looking at other discussions on Issues, we can see that after login, atleast three new sections will be added; user name, packets sent, packets received.

These can be stacked one over the other, just like the current design.
But can also have a better layout so that if in future more content gets added (like profile image, and user links) those can be integrated with ease

I hope I was able to put forward my thoughts in a clear manner :smile: :smile: :smile: :smile: :smile:

I hope I was able to put forward my thoughts in a clear manner 😄 😄 😄 😄 😄

Thanks for the clarification @phoenixabhishek. Your explanations make sense.

Remove the shadow above the footer.
Change the font to an appropriate sans-serif font, and have hierarchical font-sizes.

Your explanations for these tasks makes sense. Feel free to proceed to work on implementing the above items. :thumbsup:

In the footer, the content we have, can be seen as two categories.
Social (#wearefedora links and social links) and Project based (Need help and fork info).
This can be made to appear as two blocks.
On the left, we can have project details, and on the right we can have the social links.
This can be skipped if it doesn't feel right.

After login, the contents on the sidebar increase, so an appropriate design for the same.

Looking at other discussions on Issues, we can see that after login, atleast three new sections will be added; user name, packets sent, packets received.
These can be stacked one over the other, just like the current design.
But can also have a better layout so that if in future more content gets added (like profile image, and user links) those can be integrated with ease

For these, your explanations make sense but I'd like to see a wireframe or sketch of the changes to understand your vision. Could you work on a wireframe / sketch / mock-up of these two changes and post them here in the ticket?

If you need some pointers on making wireframes or mock-ups, don't hesitate to ask. :smiley:

Your explanations for these tasks makes sense. Feel free to proceed to work on implementing the above items. 👍

@jflory7 thank you :smile: :smile: :smile: :smile: :smile:
I'll get on these right away.

For these, your explanations make sense but I'd like to see a wireframe or sketch of the changes to understand your vision. Could you work on a wireframe / sketch / mock-up of these two changes and post them here in the ticket?

Sure, I'll make the mockup and post here :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup:

Have a design for the active sidebar element.

@jflory7 PR#178 has been made for this change.

Outcome

The active sidebar element is protruding in the pages where the footer is not appropriately sticking at the bottom. Snapshot for the same is attached below.
I suspect the issue has more to do with improper footer implementation than the active sidebar element. Just thought I'll bring it to light :)

@shraddhaag thank you for pointing this out :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup:
This looks like an issue with the z-index of footer since this behavior was not seen on other parts.

This can be a good first issue for someone to take up.
I'll open a PR with the details once I confirm this behavior.

Update

The issue can be resolved by adding a style rule of position: relative for the footer element in custom.css

Issue #188 made to address this change.
This will be an open good first issue for someone to take up :smile: :smile: :smile: :smile: :smile:

@jflory7 for the sidemenu, this can be one possible layout.

After login, but before clicking on username (the arrow indicates that it can be expanded)

After login, after clicking on username (the arrow indicates that it can be collapsed)

If the logout button is not acceptable on the expanded sidemenu, we can swap it with Send Some happiness menu item.

Thoughts..???

@phoenixabhishek I love this idea! :thumbsup:

@jflory7 that's great :smile: :smile: :smile: :smile: :smile:

I'll do some digging in at #47 for the appropriate solution, and then I'll take this up.

Sounds reasonable..???

@jflory7 that's great 😄 😄 😄 😄 😄
I'll do some digging in at #47 for the appropriate solution, and then I'll take this up.

Sure – you can post your findings for #47 when you have time. For now, I prefer for you to wrap up this ticket if possible by the end of the Outreachy application cycle on March 26th. :thumbsup:

@jflory7 while trying to implement the above sub-menu design, I came across a position issue which is causing the menu to appear as such.

It will most probably need a bigger css code refactor to correct this.

Till then since this is a issue of concern, will something like this work in the mean time..???
(I am still to add the arrow icon, so ignore that for these images please :sweat_smile: )

Also, I think it will it make sense to put the Send some happiness! link inside this user sub-menu.

What do you think..???

@jflory7 Thoughts on this :point_up:

I also noticed that the second option has a better consistency over smaller screens.

Hi @phoenixabhishek, thanks for your patience.

I think a vertical drop-down menu for the user pages is a good idea. I think it accomplishes the same outcome to simplify the menu and if it scales better on mobile devices, that's a plus.

I disagree with moving the Send some happiness! option underneath the menu though. Since page is our application's most important call-to-action, I think it should always be visible. If a user not already logged in wants to send a Happiness Packet, this link should also prompt them to log in (as it does now).

Is this feedback helpful?

@jflory7
Yes, thank you :smiley: :smiley: :smiley: :smiley: :smiley:

I'll post the PR in some time now :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup:

I noticed some issue with the :focus on sidebar elements, Adding this fix in the PR too

@jflory7 PR#204 made for the user sub-menu change.

Since we merged the last PR, I am going to close this issue as complete. If we have specific ideas on more improvements, we can file them as a new ticket and track progress there.

@phoenixabhishek Thanks for your work on these improvements! :tada: :100: :tada: