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

Added tinted and dark AppIcon #385

Merged
merged 4 commits into from
Oct 16, 2024
Merged

Conversation

iammajid
Copy link
Contributor

@iammajid iammajid commented Oct 9, 2024

This update adds dark and tinted app icon to support the new customization options introduced in iOS 18.

@tobihagemann
Copy link
Member

Can you please post some screenshots? That would make a review easier. 😁

And I noticed in the tinted version that in Cryptobot's "chin" area, there is a transparent spot that probably shouldn't be there.

@iammajid
Copy link
Contributor Author

@tobihagemann Makes sense to share some screenshots, my fault! 😅 Oh, thanks for the hint, didn’t even notice the transparent spot on the chin!

Screenshots

Copy link

coderabbitai bot commented Oct 11, 2024

Walkthrough

The changes involve updating the Contents.json file for the app icon set by renaming an existing image and adding two new image entries for different appearances. The filename for the existing image is changed from Icon.png to LightIcon.png, while new entries for dark and tinted appearances are added with filenames DarkIcon.png and TintedIcon.png, respectively. Additionally, modifications are made to the Fastfile to accommodate the new icon file paths, and the script create-app-icon.sh is updated to copy the new icons to the specified directory.

Changes

File Change Summary
SharedResources/Assets.xcassets/AppIcon.appiconset/Contents.json Updated existing image filename from Icon.png to LightIcon.png and added new entries for DarkIcon.png and TintedIcon.png.
fastlane/Fastfile Replaced APP_ICON_FILE_PATH with APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH in multiple lanes.
fastlane/.env.freemium Removed APP_ICON_FILE_PATH and added APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH.
fastlane/.env.premium Removed APP_ICON_FILE_PATH and added APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH.
fastlane/scripts/create-app-icon.sh Changed the destination filename for the copied icon to LightIcon.png and added commands to copy to DarkIcon.png and TintedIcon.png.

Poem

In the garden where icons play,
New images bloom, brightening the day.
Dark and tinted, they join the cheer,
A colorful world, oh so near!
With a hop and a skip, we celebrate,
These changes sweet, we can’t wait! 🐇✨


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@tobihagemann
Copy link
Member

Looking good! However, I noticed something very specific that needs to be solved somehow. We're always distributing both the freemium and the premium version. Unfortunately, Apple forces us to have different icons between these versions, because they are essentially "different" apps.

If you search for APP_ICON_FILE_PATH in the project, you can get an idea on how that works. We should apply the same to dark/tinted as well. Regarding design, I guess we have to discuss this internally.

@tobihagemann tobihagemann added this to the 2.6.3 milestone Oct 16, 2024
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (3)
fastlane/scripts/create-app-icon.sh (1)

1-6: Approve changes with suggestions for improvement

The modifications to copy Light, Dark, and Tinted icons align well with the PR objectives. However, I have a few suggestions to improve the script's robustness and documentation:

  1. Update the comment to reflect the new functionality of the script.
  2. Add argument validation to ensure the correct number of arguments are provided.
  3. Consider adding error handling for the copy operations.

Here's a suggested improvement:

 #!/bin/sh

-# Path is relative to the fastlane folder
+# Copy Light, Dark, and Tinted app icons to the AppIcon.appiconset directory
+# Usage: ./create-app-icon.sh <light_icon> <dark_icon> <tinted_icon>
+
+if [ "$#" -ne 3 ]; then
+    echo "Error: Exactly 3 arguments are required."
+    echo "Usage: $0 <light_icon> <dark_icon> <tinted_icon>"
+    exit 1
+fi
+
+DEST_DIR="../SharedResources/Assets.xcassets/AppIcon.appiconset"
+
+copy_icon() {
+    if ! cp "$1" "$DEST_DIR/$2"; then
+        echo "Error: Failed to copy $1 to $DEST_DIR/$2"
+        exit 1
+    fi
+}
+
+copy_icon "${1}" "LightIcon.png"
+copy_icon "${2}" "DarkIcon.png"
+copy_icon "${3}" "TintedIcon.png"
+
+echo "App icons successfully copied."
-cp "${1}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/LightIcon.png
-cp "${2}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/DarkIcon.png
-cp "${3}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/TintedIcon.png

This improved version:

  • Updates the comment to describe the new functionality
  • Adds argument validation
  • Introduces error handling for copy operations
  • Uses a function to reduce code duplication
  • Provides a success message upon completion

Would you like assistance in updating the Fastfile to accommodate these changes?

fastlane/Fastfile (2)

43-43: LGTM! Consider alphabetizing the environment variables list.

The addition of APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH aligns with the PR objective of introducing dark and tinted app icons. This change ensures that the beta lane has access to all necessary icon variants.

For improved readability and easier maintenance, consider alphabetizing the list of environment variables.


92-101: LGTM! Consider adding error handling to the app icon creation script.

The changes in the apply_config lane correctly implement the new app icon variants:

  1. Environment variables are updated to include APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH.
  2. The app icon creation script call is updated to use all three new file paths.

These modifications align with the PR objective of introducing dark and tinted app icons.

To improve robustness, consider adding error handling and file path validation to the app icon creation script call. For example:

icon_paths = [app_icon_light_file_path, app_icon_dark_file_path, app_icon_tinted_file_path]
if icon_paths.all? { |path| File.exist?(path) }
  sh("./scripts/create-app-icon.sh #{icon_paths.join(' ')}")
else
  UI.user_error!("One or more app icon files are missing. Please check the file paths.")
end

This change ensures that the script is only called if all required icon files exist, preventing potential errors during the build process.

Also applies to: 270-270

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between bf34100 and 56ef284.

⛔ Files ignored due to path filters (10)
  • SharedResources/Assets.xcassets/AppIcon.appiconset/DarkIcon.png is excluded by !**/*.png
  • SharedResources/Assets.xcassets/AppIcon.appiconset/LightIcon.png is excluded by !**/*.png
  • SharedResources/Assets.xcassets/AppIcon.appiconset/TintedIcon.png is excluded by !**/*.png
  • fastlane/config/freemium/DarkIcon.png is excluded by !**/*.png
  • fastlane/config/freemium/LightIcon.png is excluded by !**/*.png
  • fastlane/config/freemium/TintedIcon.png is excluded by !**/*.png
  • fastlane/config/premium/DarkIcon.png is excluded by !**/*.png
  • fastlane/config/premium/Icon.png is excluded by !**/*.png
  • fastlane/config/premium/LightIcon.png is excluded by !**/*.png
  • fastlane/config/premium/TintedIcon.png is excluded by !**/*.png
📒 Files selected for processing (3)
  • SharedResources/Assets.xcassets/AppIcon.appiconset/Contents.json (1 hunks)
  • fastlane/Fastfile (4 hunks)
  • fastlane/scripts/create-app-icon.sh (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • SharedResources/Assets.xcassets/AppIcon.appiconset/Contents.json
🧰 Additional context used
🔇 Additional comments (2)
fastlane/Fastfile (2)

80-80: LGTM! Consistent with the beta lane changes.

The update to the environment variables in the _app_store private lane mirrors the changes made in the beta lane, ensuring consistency across different deployment processes.

Please refer to the previous comment regarding alphabetizing the environment variables list for improved readability.


Line range hint 1-280: Overall assessment: Changes successfully implement new app icon variants.

The modifications to the Fastfile consistently implement the new app icon variants (light, dark, and tinted) across different lanes. This aligns well with the PR objective of introducing dark and tinted app icons for iOS 18 customization options.

Key points:

  1. Environment variables are consistently updated in all relevant lanes.
  2. The app icon creation script is modified to accommodate the new icon variants.

These changes provide a solid foundation for supporting the new app icon variants in the build and deployment process.

To ensure that the changes are correctly implemented across the project, run the following verification script:

This script verifies:

  1. The existence and executability of the app icon creation script.
  2. The content of the app icon creation script for new icon variant references.
  3. The presence of new app icon files in the project.
  4. The correct updating of the Contents.json file in the AppIcon.appiconset.

Run this script to ensure all aspects of the new app icon implementation are correctly in place.

Comment on lines 1 to +6
#!/bin/sh

# Path is relative to the fastlane folder
cp "${1}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/Icon.png
cp "${1}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/LightIcon.png
cp "${2}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/DarkIcon.png
cp "${3}" ../SharedResources/Assets.xcassets/AppIcon.appiconset/TintedIcon.png
Copy link

@coderabbitai coderabbitai bot Oct 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Icon differentiation for freemium and premium versions not maintained

Based on the verification, there is no evidence of distinct icons for freemium and premium versions in the current implementation. Please ensure that the new dark and tinted icons maintain this differentiation as required.

🔗 Analysis chain

Verify icon differentiation for freemium and premium versions

As per Tobihagemann's comment, there's a requirement to have different icons for the freemium and premium versions of the app. We should ensure that this differentiation is maintained for the new dark and tinted icons as well.

Let's check the current implementation of icon differentiation:

Based on the results of this verification, we may need to update the script to handle different icons for freemium and premium versions.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for icon differentiation in the Fastfile and project structure

# Test 1: Search for APP_ICON_FILE_PATH in Fastfile
echo "Searching for APP_ICON_FILE_PATH in Fastfile:"
rg "APP_ICON_FILE_PATH" fastlane/Fastfile

# Test 2: Check for different icon files in the project structure
echo "\nSearching for icon files in the project:"
fd -e png -e jpg -e jpeg "icon" --exec file {}

Length of output: 610


Script:

#!/bin/bash
# Description: Verify distinct icon file paths for freemium and premium versions

echo "Searching for freemium icon paths in Fastfile and related scripts:"
rg "FreemiumIcon" fastlane/

echo "\nSearching for premium icon paths in Fastfile and related scripts:"
rg "PremiumIcon" fastlane/

echo "\nListing all icon files related to freemium and premium versions:"
fd -e png -e jpg -e jpeg "FreemiumIcon\|PremiumIcon" .

Length of output: 542

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 3d31b0b

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tobihagemann, thank you for fixing the issue. The update looks great!

(^.^)/


If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
fastlane/.env.premium (1)

2-4: Consider freemium version and add explanatory comments

The changes look good for the premium version. However, there are a few additional considerations:

  1. As mentioned in the PR comments, there's a need for different icons for freemium and premium versions. Ensure that similar changes are made in the freemium configuration file if it exists.

  2. It would be helpful to add comments explaining the purpose of these new variables and when each icon should be used. This can improve maintainability and clarity for future developers.

Consider adding comments like this:

+# Dark mode app icon
 APP_ICON_DARK_FILE_PATH=config/premium/DarkIcon.png
+# Light mode app icon
 APP_ICON_LIGHT_FILE_PATH=config/premium/LightIcon.png
+# Tinted app icon for iOS 18+ customization
 APP_ICON_TINTED_FILE_PATH=config/premium/TintedIcon.png

Would you like me to draft changes for the freemium configuration file or generate more detailed comments for these variables?

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 56ef284 and 3d31b0b.

📒 Files selected for processing (2)
  • fastlane/.env.freemium (1 hunks)
  • fastlane/.env.premium (1 hunks)
🧰 Additional context used
🔇 Additional comments (3)
fastlane/.env.freemium (2)

Line range hint 5-13: LGTM: Existing configuration maintained

The rest of the configuration file remains unchanged, maintaining consistency in critical app properties such as bundle identifier, display name, and encryption compliance. This stability in the core configuration is good practice when introducing new features.


2-4: New app icon paths added for different themes

The addition of separate variables for dark, light, and tinted app icons aligns with the PR objective of introducing new customization options. This change supports the new features in iOS 18 and enhances the app's visual adaptability.

However, there's an important consideration raised in the PR comments:

We need to ensure that these icon paths are specific to the freemium version of the app, as per tobihagemann's comment about having different icons for freemium and premium versions due to Apple's distribution policies. Let's verify this:

This script will help us confirm if the icon paths are properly differentiated between freemium and premium versions.

✅ Verification successful

Icon configurations for freemium and premium versions are correctly set up

The icon paths for both freemium and premium versions are properly differentiated, ensuring compliance with the PR objectives and Apple's distribution policies.

  • Confirmed separate environment files for freemium and premium.
  • Verified distinct icon paths in both .env.freemium and .env.premium.
  • Ensured Fastfile correctly references the respective icon environment variables.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if there are separate icon configurations for freemium and premium versions

# Check for a premium environment file
if [ -f "fastlane/.env.premium" ]; then
    echo "Premium environment file exists. Checking for icon path differences:"
    diff -y --suppress-common-lines fastlane/.env.freemium fastlane/.env.premium | grep -E "ICON|icon"
else
    echo "No premium environment file found. Please ensure that separate configurations exist for freemium and premium versions."
fi

# Check the Fastfile for any logic handling different icons
echo "Checking Fastfile for icon handling logic:"
rg "APP_ICON" fastlane/Fastfile

Length of output: 1578

fastlane/.env.premium (1)

2-4: New app icon variables look good, but verify consistency across the project.

The addition of APP_ICON_DARK_FILE_PATH, APP_ICON_LIGHT_FILE_PATH, and APP_ICON_TINTED_FILE_PATH aligns well with the PR objectives of introducing dark and tinted app icons. The naming convention is consistent and clear.

To ensure these changes are consistent with other parts of the project, please run the following script:

This script will help us verify that:

  1. The new variables are being used in the project.
  2. There are no leftover references to the old APP_ICON_FILE_PATH.
  3. The Fastfile has been updated to use the new icon paths.
  4. The icon generation script (if it exists) has been updated accordingly.

Please review the output of this script to ensure all necessary updates have been made consistently across the project.

@tobihagemann tobihagemann merged commit 4cec926 into develop Oct 16, 2024
4 checks passed
@tobihagemann tobihagemann deleted the feature/tinted-and-dark-icon branch October 16, 2024 16:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants