Add SVG icon styled for macOS Big Sur

[elsiehupp]

Fixes #3294 (kind of: I say "kind of" because it still needs to be integrated into CMake)

This is a 100% vector icon that I largely wrote in the SVG markup itself, and I tried to format it so it's easier to understand and easier to tweak. I mention this because AFAIK Inkscape doesn't have a GUI for the sorts of filter effects I used, and editing this in Inkscape would probably wildly reformat the syntax. By contrast if you tweak individual parameters in the code itself, the Git diff should be much more legible.

The only really messy bit is the "squircle" outline itself, as SVG doesn't include a superellipse element, so it's just baked as a path instead.

If you'd like me to make additional platform-specific variations of this with outlines other than the macOS Big Sur "squircle", just let me know which ones you'd like me to do.

EDIT

Here's an embedded preview of the file in this pull request:

[jancborchardt]

I'd still say the icon shouldn't have a shadow as it looks a bit off-brand, but the rest is great. :)

Also cc @karlitschek @marcoambrosini cause you use MacOS.

[marcoambrosini]

Looks good :)
but I agree about the shadow on the logo, could you please remove that @elsiehupp?

[elsiehupp]

Looks good :) but I agree about the shadow on the logo, could you please remove that @elsiehupp?

Fully flat color-on-color logos don't follow the macOS icon design guidelines. To quote my original Issue:

Expected Behavior

Nextcloud Desktop should have an icon that conforms with Apple's icon design guidelines for macOS Big Sur:

• Generally follow the supellipse outline from the icon template.
• Use the predefined drop shadow.
• Use more definition and shadow on macOS than on iOS.
• [Implied] Use generally vivid colors, with a vertical gradient that may or may not create the illusion of depth.
• Prefer using a Big-Sur-style icon on older versions of macOS to using an older-style icon on Big Sur.

Example Icons

Actual Behavior

Nextcloud Desktop’s icon on macOS is identical to its icons on Windows and Linux. In particular:

• The icon uses a circular outline.
• The icon does not use the predefined drop shadow.
• The glyph is flat, solid white and has no definition or shadow.
• The background gradient is on a diagonal and, while high-saturation, is not particularly vivid.
• The icon design style passingly resembles the guidelines from macOS Mojave, rather than using the current guidelines across all versions of macOS.

Indeed, looking at most third-party applications with icons on both iOS and macOS, one sees slightly more defined 3D on the macOS icons than on their iOS counterparts. For example, Element Messenger:

Incidentally, as I mentioned in my Pull Request on Element Desktop from last year, the official Element Mac icon itself does not follow the Element brand guidelines (which actually specify a green circle inside a larger white shape on platforms with non-circular icons, furthermore with different proportions than those used in the official icon)—EDIT: I just checked, and the Element brand guidelines have been updated to match the Element iOS icon but still not the Element macOS one—and AFAIK these guidelines are actually significantly more prescriptive than Nextcloud's. If we don't follow Apple's design guidelines, what would be next, a full-color Nextcloud logo in the Finder sidebar? Incidentally, @claucambra mentioned liking the slightly tweaked Finder-sidebar icon in #4367, so there's that.

While I am open to making additional tweaks to this Pull Request, more broadly I would like the final version to still follow Apple's macOS icon design guidelines. Also, in terms of resolving any conflict between Apple's icon design guidelines and Nextcloud's (apparently non-formalized) brand guidelines, I would be most happy to defer to the opinions of Nextcloud team members who regularly use Nextcloud Desktop for Mac (as @karlitschek and @marcoambrosini apparently do).

[marcoambrosini]

Ok fine by me if this are explicit apple's guidelines, but in this case I would at least increase the blur of the shadow, similar to the Element logo you posted above. It just seems too much in those screenshots, I would make it less prominent.

Another example of more blurred shadows from my launchpad here

[codecov]

Codecov Report

Merging #4631 (3097054) into master (f27aa4f) will decrease coverage by 0.09%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #4631      +/-   ##
==========================================
- Coverage   56.52%   56.42%   -0.10%     
==========================================
  Files         138      138              
  Lines       17071    17071              
==========================================
- Hits         9649     9632      -17     
- Misses       7422     7439      +17     

Impacted Files	Coverage Δ
src/libsync/clientsideencryption.cpp	25.27% <ø> (ø)
src/libsync/syncresult.cpp	9.57% <0.00%> (ø)
src/libsync/theme.h	33.33% <ø> (ø)
src/libsync/vfs/cfapi/hydrationjob.cpp	52.68% <0.00%> (-3.77%)	⬇️
src/libsync/vfs/cfapi/vfs_cfapi.cpp	83.84% <0.00%> (-2.63%)	⬇️
src/libsync/vfs/cfapi/cfapiwrapper.cpp	75.42% <0.00%> (-1.93%)	⬇️
src/libsync/syncengine.cpp	85.19% <0.00%> (-0.55%)	⬇️
src/libsync/propagatedownload.cpp	65.18% <0.00%> (+1.03%)	⬆️

[elsiehupp]

if these are explicitly apple's guidelines

Here are the relevant bits from Apple's guidelines (bold text from original; italics added):

Create a design that works well on multiple platforms so that it feels at home on each. If your app or game runs on more than one platform, use a similar image and color palette for all icons while rendering them in the style that’s appropriate for each platform. For example, in iOS and watchOS, the Mail app icon uses a streamlined, graphical style to depict the white envelope on a blue background; macOS uses a similar blue background, adding depth and detail to the envelope, giving it a realistic weight and texture.

In macOS, app icons share a common set of visual attributes, including a rounded-rectangle shape, front-facing perspective, level position, and uniform drop shadow. Rooted in the macOS design language, these attributes showcase the lifelike rendering style people expect in macOS while presenting a harmonious user experience.

Consider using interior shadows and highlights to add definition and realism. For example, the Mail app icon uses both shadows and highlights to give the envelope authenticity and to suggest that the flap is slightly open. In icons that include a tool that floats above a background — such as TextEdit or Xcode — interior shadows can strengthen the perception of depth and make the tool look real. Shadows and highlights should suggest a light source that faces the icon, positioned just above center and tilted slightly downward.

And here's the updated icon (left) compared to the previous version (right):

It turned out that I had also not correctly set up the main drop shadow (but hadn't noticed this due to the dark background).

If you'd like me to tweak any other parameters with the shadow (like the blur or the opacity), it should be extremely straightforward for me to do so.

Also IMHO the background gradient could stand to be ever so slightly more pronounced, though this is the version of the gradient you selected from the set in the original Issue. Partially I think the softer shadow visually flattens the gradient behind it, and enhancing the gradient would counteract that effect.

(The main complication with revisions is that I haven't squashed my commits because doing so would break the inline images, though I guess I could replace the embeds with versions mirrored as GitHub gists.)

Also, yes, I noticed that I messed up my merge commit. Could you figure out fixing it for me? Thanks!

[mgallien]

@elsiehupp I cleaned up history and made it only one commit with your changes in it (even double checked that I was getting the proper icon result at the end)

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[nextcloud-desktop-bot]

AppImage file: Nextcloud-PR-4631-30970547fc0c09da31303b40f84dfb9e29d8a3d5-x86_64.AppImage

To test this change/fix you can simply download above AppImage file and test it.

Please make sure to quit your existing Nextcloud app and backup your data.

[elsiehupp]

Okay, I guess you (@mgallien) liked it as-is! But everyone else feel free to let me know if you'd like tweaks to this or any other icon! (I could also with not too much difficulty make slight variations of this for the most popular Linux icon themes.)

Note that this version is extremely "parametric" in a way that makes it extremely conducive to subtle tweaks, though I didn't annotate it quite as much as I could, and some aspects could probably be made less redundant. (I could always do another pull request adding a bunch of inline XML comments to help other people work with the SVG source.)