Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First proposal for change of Swal2 logo #81

Closed
wants to merge 23 commits into from

Conversation

@serenaperora
Copy link

serenaperora commented Jun 19, 2019

This include:

  • New logo (in SVG)
  • New SweetAlert2 png for the logo text
  • Bouncing animation for logo
  • Change of font for h1 and h2 tags (using Monserrat from Google fonts, which is the closest to the logo text)

TO DO:

  • Add bouncing path

image

  • Improve SVG style integration (currently part of the animation is in the CSS and part is embedded in SVG)
  • There is an issue with refreshing the page: the SVG animation doesn't get restarted

image

  • Test on different browsers / screen sizes:
    • Chrome
        • on Window
        • on Linux
        • on macOS
        • On Android
        • On IOS
    • Firefox
        • on Window
        • on Linux
        • on macOS
        • On Android
        • On IOS
    • Safari
        • on macOS
        • On IOS
      • IE11 (on Window)
      • Edge (on Window)
@serenaperora

This comment has been minimized.

Copy link
Author

serenaperora commented Jun 19, 2019

@limonte this is a first proposal for the new logo. There's still a number of things to do (e.g. color palette, match fonts, make logo responsive, etc), but we just wanted to check with you if you like the animation and the positioning of the logo.

@limonte

This comment has been minimized.

Copy link
Member

limonte commented Jun 19, 2019

Looks great so far! 💪 💪 💪

Animations are neat! 🥇

This version is centered on the center of the donut, to allow for
a smoother rotation aninmation. Also the colored part  inside is
slightly more offset towards the bottom right
@gverni gverni force-pushed the serenaperora:new-logo branch from 4ed3bc8 to 26ceb92 Jun 27, 2019
gverni added 3 commits Jun 28, 2019
This now applies directly to tghe embedded SVG
Moved from 50% to 100% of x axis. This makes for a smoother animation.
@gverni

This comment has been minimized.

Copy link
Member

gverni commented Jul 18, 2019

Sorry @limonte for the delay on this PR. We are still battling with making the bouncing path appears. We may have to drop it for now...

@limonte

This comment has been minimized.

Copy link
Member

limonte commented Jul 18, 2019

No problem @gverni

The new logo can wait as long as needed. I know how hard it is to predict when the inspiration will come :)

serenaperora and others added 5 commits Jul 19, 2019
And remove old (no longer used) logo SVGs
@gverni

This comment has been minimized.

Copy link
Member

gverni commented Jul 19, 2019

I know how hard it is to predict when the inspiration will come :)

Inspiration finally came @limonte 😄 We just updated the animation adding the bouncing track. Before we start testing on different browsers / sizes, can you have a look and let us know if you like it? Any suggestion is more than welcome!!

@gverni

This comment has been minimized.

Copy link
Member

gverni commented Jul 25, 2019

@limonte did you get a chance to look at the new animation? I just wanted your opinion before I start the browser testing...

@limonte

This comment has been minimized.

Copy link
Member

limonte commented Jul 25, 2019

did you get a chance to look at the new animation? I just wanted your opinion before I start the browser testing...

LGTM!

Upd: sorry for missing the previuos comment, thanks for pinging me again :)

@gverni

This comment has been minimized.

Copy link
Member

gverni commented Jul 25, 2019

sorry for missing the previuos comment, thanks for pinging me again :)sorry for missing the previuos comment, thanks for pinging me again :)

No worries... I've seen you had a pretty busy weekend 😉
I'll start browsers testings and report back in 1 or 2 days.

Change `visibility` end state to `visible` instead of `unset`
@gverni

This comment has been minimized.

Copy link
Member

gverni commented Jul 27, 2019

Browser testing is looking good at the moment. I'll have to wait until Monday to perform testing on windows.

On small screens (i.e. smartphone) donut and the path are a bit too high (one of the donut hair is touching the octocat). I'll have to tweak it a bit...

image

@gverni

This comment has been minimized.

Copy link
Member

gverni commented Aug 1, 2019

Sorry for slow update (bit of hectic period at work). On windows all the browsers work ok, except for IE11:

image

That definitely needs a bit of work 😢

@limonte

This comment has been minimized.

Copy link
Member

limonte commented Aug 1, 2019

@gverni don't bother yourself with IE11. It is our responsibility to make SweetAlert2 by itself work in IE11 and demonstrate that it's working, that's why we have the build step with webpack. But we do not have any responsibility to make the complex animated logo work in IE11.

I believe 0.56% of IE users will forgive and understand us for broken logo animation :)

image

But, of course, I'm not stopping you, you you feel like wrestling with IE11, please go ahead. I'm just saying that I'll approve this work even without IE11 compatibility.

@gverni

This comment has been minimized.

Copy link
Member

gverni commented Aug 2, 2019

Thanks @limonte! I further optimized and clean-up the embedded donut SVG. I think I'm done for now... As you suggested, I'll try to fix IE11 later on if I get some time. If you and @serenaperora are fine, I think we are ready to merge here...

@limonte limonte marked this pull request as ready for review Aug 2, 2019
@limonte limonte mentioned this pull request Aug 9, 2019
16 of 16 tasks complete
@limonte

This comment has been minimized.

Copy link
Member

limonte commented Aug 9, 2019

This PR has conflicts and in order to save @serenaperora from the painful process of rebasing and resolving conflicts, I copied the rebased PR with some coding style fixes to #96

@limonte limonte closed this Aug 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.