diff --git a/Gemfile b/Gemfile index a376ef0b1..15a15e39e 100644 --- a/Gemfile +++ b/Gemfile @@ -3,4 +3,5 @@ source 'https://rubygems.org' ruby '2.7.5' gem 'cocoapods', '~> 1.11', '>= 1.11.2' -gem "fastlane" \ No newline at end of file +gem "fastlane" +gem "nokogiri" diff --git a/Gemfile.lock b/Gemfile.lock index 772033f7a..402b30e71 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -209,6 +209,7 @@ GEM memoist (0.16.2) mini_magick (4.11.0) mini_mime (1.1.2) + mini_portile2 (2.8.1) minitest (5.15.0) molinillo (0.8.0) multi_json (1.15.0) @@ -217,10 +218,14 @@ GEM nap (1.1.0) naturally (2.2.1) netrc (0.11.0) + nokogiri (1.14.2) + mini_portile2 (~> 2.8.0) + racc (~> 1.4) optparse (0.1.1) os (1.1.4) plist (3.6.0) public_suffix (4.0.7) + racc (1.6.2) rake (13.0.6) representable (3.2.0) declarative (< 0.1.0) @@ -279,6 +284,7 @@ PLATFORMS DEPENDENCIES cocoapods (~> 1.11, >= 1.11.2) fastlane + nokogiri RUBY VERSION ruby 2.7.5p203 diff --git a/README.md b/README.md index 9a9222e72..8f5aeaad0 100644 --- a/README.md +++ b/README.md @@ -127,33 +127,13 @@ git commit -a -m "Updated translations" ## Styling We're using Nativewind, a styling system for React Native based on Tailwind CSS. Check the [Nativewind documentation](https://www.nativewind.dev/) to see what styles can be used in RN. -## Creating custom icons +## Icons -We manage our custom font with Fontastic, so these steps can probably only be done by staff. +We have a custom set of icons stored as SVG files and compiled into a font. New icons should be included with issues in a ready-to-use form, but some editing may be required. -1. `npm install -f react-native-asset`. You'll need this to link assets. -1. Get the new icon as an SVG file. Make sure the file name matches the icon name and no prefixes like `icon-` or `icn-`. If the icon is called "shield" the file name should be `shield.svg`. -1. Add new icon to the iNaturalist icon set in Fontastic. **Don't change any of the existing names** and **don't change any of the existing selections** (this could mess with other projects using the font). Just add your new icon(s) to the selection. -1. Click the "Publish" tab and click the "DOWNLOAD" button to download the zip of the font. Unzip it. -1. Create a glyph file from the CSS file in the zip you just downloaded, using the following command (be sure to replace /path/to/styles with your path): - ``` - npx generate-icon /path/to/styles.css --componentName=INatIcon --fontFamily=inaturalisticons > src/components/SharedComponents/INatIcon/INatIcon.js - ``` -1. When adding new icons, go to `src/components/SharedComponents/INatIcon/INatIcon.js` and make two manual changes: - 1. First, edit the line `const iconSet = createIconSet( glyphMap, "inaturalisticons", "INatIcon.ttf" );` to `inaturalisticons.ttf` to match the name of the `.ttf` file you downloaded. There's a discrepency here because the `generate-icon` script makes an assumption that the name of the .ttf file is the same as the name of the component. Components need to start with a capital letter, and `inaturalisticons.tff` is likely not a name we want to change, since we're using it on the web too. We'll probably want to write our own `generate-icon` script to do this automatically. - 1. Second, add the following to your exports to make sure a user can see all custom iNat icons in the UI library: - ``` - export { - glyphMap - }; - ``` -1. Add `inaturalisticons.ttf`, to `assets/fonts`. -1. Clean build folders for iOS/Android with `rm -rf ios/build && rm -rf android/app/build`. -1. Run `npx react-native-asset` to link the new assets. -1. Add your icon somewhere in the app using `` where name is set to the name of your new custom icon. -1. Build the app on either platform, and you should see your custom icons. - -If anything goes wrong, check the [troubleshooting steps](https://github.com/oblador/react-native-vector-icons#troubleshooting) from `react-native-vector-icons` instructions on creating a glyph map. +1. Add / edit SVGs to / in `src/images/icons/` (`git add` any new icons) +1. `npm run icons` +1. Rebuild the app (you'll have newly-linked assets that won't hot reload) ## Troubleshooting diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf new file mode 100644 index 000000000..8d10d15d3 Binary files /dev/null and b/android/app/src/main/assets/fonts/INatIcon.ttf differ diff --git a/android/app/src/main/assets/fonts/inaturalisticons.ttf b/android/app/src/main/assets/fonts/inaturalisticons.ttf deleted file mode 100644 index be97f0c36..000000000 Binary files a/android/app/src/main/assets/fonts/inaturalisticons.ttf and /dev/null differ diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json index 26d5edf7f..40970cc47 100644 --- a/android/link-assets-manifest.json +++ b/android/link-assets-manifest.json @@ -1,6 +1,10 @@ { "migIndex": 1, "data": [ + { + "path": "assets/fonts/INatIcon.ttf", + "sha1": "47a247e3585aec0da80245083a706f676a7e01c0" + }, { "path": "assets/fonts/Whitney-BookItalic-Pro.otf", "sha1": "15854f60175a0e82b794c259431ec45ea4b40103" @@ -12,10 +16,6 @@ { "path": "assets/fonts/Whitney-Medium-Pro.otf", "sha1": "33ca073c11f46dc266a7dc1adeaa102891bd76d1" - }, - { - "path": "assets/fonts/inaturalisticons.ttf", - "sha1": "db15c060c16ae5364838d3222510575577869ede" } ] } diff --git a/assets/fonts/INatIcon.ttf b/assets/fonts/INatIcon.ttf new file mode 100644 index 000000000..8d10d15d3 Binary files /dev/null and b/assets/fonts/INatIcon.ttf differ diff --git a/assets/fonts/inaturalisticons.ttf b/assets/fonts/inaturalisticons.ttf deleted file mode 100644 index be97f0c36..000000000 Binary files a/assets/fonts/inaturalisticons.ttf and /dev/null differ diff --git a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj index ed92f14fa..e3ac9b875 100644 --- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj +++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj @@ -8,13 +8,13 @@ /* Begin PBXBuildFile section */ 00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; }; + 07603705D89842DD91992F31 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 374CB22F29943E63005885ED /* Whitney-BookItalic-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */; }; 7EBBE0515B6D88FD724A5C47 /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; - 9DD524C253234240A23EACC6 /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7036391F18E446B7BDBBADAD /* inaturalisticons.ttf */; }; A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */; }; BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */; }; /* End PBXBuildFile section */ @@ -42,7 +42,7 @@ 19A5877328F8E3310016D128 /* iNaturalistReactNative-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "iNaturalistReactNative-Bridging-Header.h"; sourceTree = ""; }; 27F9BBBBAB49ABBAF88433C9 /* Pods-iNaturalistReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.debug.xcconfig"; sourceTree = ""; }; 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Whitney-BookItalic-Pro.otf"; path = "../assets/fonts/Whitney-BookItalic-Pro.otf"; sourceTree = ""; }; - 7036391F18E446B7BDBBADAD /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = ""; }; + 3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = INatIcon.ttf; path = ../assets/fonts/INatIcon.ttf; sourceTree = ""; }; 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = iNaturalistReactNative/LaunchScreen.storyboard; sourceTree = ""; }; BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light-Pro.otf"; path = "../assets/fonts/Whitney-Light-Pro.otf"; sourceTree = ""; }; @@ -157,7 +157,7 @@ BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */, D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */, 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */, - 7036391F18E446B7BDBBADAD /* inaturalisticons.ttf */, + 3810FCEF1E284915A5A23AF5 /* INatIcon.ttf */, ); name = Resources; sourceTree = ""; @@ -258,7 +258,7 @@ 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */, BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */, - 9DD524C253234240A23EACC6 /* inaturalisticons.ttf in Resources */, + 07603705D89842DD91992F31 /* INatIcon.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/iNaturalistReactNative/Info.plist b/ios/iNaturalistReactNative/Info.plist index 54c2d057a..ef992379c 100644 --- a/ios/iNaturalistReactNative/Info.plist +++ b/ios/iNaturalistReactNative/Info.plist @@ -58,7 +58,7 @@ Whitney-Light-Pro.otf Whitney-Medium-Pro.otf Whitney-BookItalic-Pro.otf - inaturalisticons.ttf + INatIcon.ttf UILaunchStoryboardName LaunchScreen diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json index 26d5edf7f..40970cc47 100644 --- a/ios/link-assets-manifest.json +++ b/ios/link-assets-manifest.json @@ -1,6 +1,10 @@ { "migIndex": 1, "data": [ + { + "path": "assets/fonts/INatIcon.ttf", + "sha1": "47a247e3585aec0da80245083a706f676a7e01c0" + }, { "path": "assets/fonts/Whitney-BookItalic-Pro.otf", "sha1": "15854f60175a0e82b794c259431ec45ea4b40103" @@ -12,10 +16,6 @@ { "path": "assets/fonts/Whitney-Medium-Pro.otf", "sha1": "33ca073c11f46dc266a7dc1adeaa102891bd76d1" - }, - { - "path": "assets/fonts/inaturalisticons.ttf", - "sha1": "db15c060c16ae5364838d3222510575577869ede" } ] } diff --git a/package.json b/package.json index db494ba2f..1a84f4cbe 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "e2e:test:android": "npx detox test --configuration android.release", "e2e:test:ios": "npx detox test --configuration ios.release", "e2e:test": "npm run e2e:test:ios && npm run e2e:test:android", - "e2e": "npm run e2e:build && npm run e2e:test " + "e2e": "npm run e2e:build && npm run e2e:test", + "icons": "./scripts/update-icon-font.sh" }, "dependencies": { "@babel/eslint-parser": "^7.18.2", diff --git a/scripts/clean-icon-svgs.rb b/scripts/clean-icon-svgs.rb new file mode 100755 index 000000000..8743b66f1 --- /dev/null +++ b/scripts/clean-icon-svgs.rb @@ -0,0 +1,44 @@ +require "nokogiri" + +num_cleaned = 0 +[ARGV].flatten.each do | path | + unless path.end_with?( ".svg" ) + raise "#{path} is not a .svg file" + end + svg = File.read( path ) + doc = Nokogiri::XML( svg, &:noblanks ) + if doc.at( "svg" )["width"].to_i != 24 || doc.at( "svg" )["height"].to_i != 24 + raise "#{path} is not a 24x24 square" + end + doc.search( "//path" ).each do | path_node | + if path_node["fill-rule"] == "evenodd" || path_node["style"] =~ /fill-rule:\s+?evenodd/ + raise "#{path} has a path with evenodd. They should all have nonzero fill." + end + end + doc.at( "defs" )&.remove + if doc.namespaces.include?( "xmlns:sodipodi" ) + doc.search( "//sodipodi:namedview" ).each do | node | + node.remove + end + end + doc.traverse do | node | + next unless node.respond_to? :attributes + node.attributes.each do |key, val| + if ( + val&.namespace&.prefix == "sodipodi" || + val&.namespace&.prefix == "inkscape" || + %w(id style fill).include?( key ) + ) + val.remove + end + end + end + # doc.at("svg").remove_attribute "xmlns:inkscape" + # doc.at("svg").remove_attribute "xmlns:sodipodi" + doc.remove_namespaces! + File.open( path, "w" ) do | file | + file.write( doc.to_xml( indent: 2 ) ) + end + num_cleaned += 1 +end +puts "Cleaned #{num_cleaned} SVGs" diff --git a/scripts/update-icon-font.sh b/scripts/update-icon-font.sh new file mode 100755 index 000000000..f276f96f6 --- /dev/null +++ b/scripts/update-icon-font.sh @@ -0,0 +1,33 @@ +# Stop the script on error +set -e + +# Check for dependencies +if ! type fantasticon > /dev/null; then + echo "You need to npm install --location=global fantasticon for this to work" + exit +fi + +if ! type react-native-asset > /dev/null; then + echo "You need to npm install --location=global react-native-asset for this to work" + exit +fi + +bundle exec ruby scripts/clean-icon-svgs.rb src/images/icons/*.svg + +# Generate the font file and the glyphmap +fantasticon src/images/icons/ \ + --output assets/fonts/ \ + --font-types ttf \ + --name INatIcon \ + --asset-types json + +# Move the glyphmap into src +mv assets/fonts/INatIcon.json src/components/SharedComponents/INatIcon/glyphmap.json + +# Clean out the build folders +rm -rf ios/build && rm -rf android/app/build + +# Re-link the new font file asset +npx react-native-asset + +echo "Icons updated! Don't forget to rebuild the app." diff --git a/src/components/AddObsModal.js b/src/components/AddObsModal.js index f754fd391..e287d9c9a 100644 --- a/src/components/AddObsModal.js +++ b/src/components/AddObsModal.js @@ -91,14 +91,14 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => { {renderIconButton( - "pen-and-paper", + "noevidence", "mx-2", navToObsEdit, t( "Navigate-to-observation-edit-screen" ), "observe-without-evidence-button" )} {renderIconButton( - "close-button-x", + "close", "self-center h-24 w-24 rounded-[99px]", ( ) => closeModal( ), t( "Close-camera-options-modal" ), diff --git a/src/components/Camera/StandardCamera.js b/src/components/Camera/StandardCamera.js index 4af3f78e6..04f7458e9 100644 --- a/src/components/Camera/StandardCamera.js +++ b/src/components/Camera/StandardCamera.js @@ -171,11 +171,11 @@ const StandardCamera = ( ): Node => { let testID = ""; let accessibilityLabel = ""; switch ( icon ) { - case "flash-on-circle": + case "flash-on": testID = "flash-button-label-flash"; accessibilityLabel = t( "Flash-button-label-flash" ); break; - case "camera": + case "flash-off": testID = "flash-button-label-flash-off"; accessibilityLabel = t( "Flash-button-label-flash-off" ); break; @@ -213,8 +213,8 @@ const StandardCamera = ( ): Node => { {hasFlash ? ( {takePhotoOptions.flash === "on" - ? renderFlashButton( "flash-on-circle" ) - : renderFlashButton( "camera" )} + ? renderFlashButton( "flash-on" ) + : renderFlashButton( "flash-off" )} ) : ( @@ -227,7 +227,7 @@ const StandardCamera = ( ): Node => { @@ -275,7 +275,7 @@ const StandardCamera = ( ): Node => { setDiscardState( INITIAL_DISCARD_STATE )} accessibilityLabel={t( "Cancel" )} accessibilityState={{ disabled: false }} diff --git a/src/components/MediaViewer/MediaViewerModal.js b/src/components/MediaViewer/MediaViewerModal.js index fbfc7183a..334e35434 100644 --- a/src/components/MediaViewer/MediaViewerModal.js +++ b/src/components/MediaViewer/MediaViewerModal.js @@ -57,7 +57,7 @@ const MediaViewerModal = ( { hideDialog={hideDialog} /> diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js index 9f63de303..3ec0992a4 100644 --- a/src/components/ObsDetails/ObsDetails.js +++ b/src/components/ObsDetails/ObsDetails.js @@ -295,7 +295,7 @@ const ObsDetails = (): Node => { {/* TODO: a11y props are not passed down into this 3.party */} { onPress={openModal} className="flex-row flex-nowrap items-center" > - + {displayDate( ) || t( "Add-Date-Time" )} diff --git a/src/components/ObsEdit/EvidenceSection.js b/src/components/ObsEdit/EvidenceSection.js index 5582cbf97..b86a4a4f9 100644 --- a/src/components/ObsEdit/EvidenceSection.js +++ b/src/components/ObsEdit/EvidenceSection.js @@ -155,7 +155,7 @@ const EvidenceSection = ( { handleAddEvidence={handleAddEvidence} /> - + {currentObservation.place_guess} {shouldFetchLocation && } diff --git a/src/components/ObsEdit/Notes.js b/src/components/ObsEdit/Notes.js index b233856d9..b8ab9ae3c 100644 --- a/src/components/ObsEdit/Notes.js +++ b/src/components/ObsEdit/Notes.js @@ -21,7 +21,7 @@ const Notes = ( { addNotes, description, scrollToInput }: Props ): Node => { { > @@ -80,7 +80,7 @@ const OtherDataSection = ( { scrollToInput }: Props ): Node => { > diff --git a/src/components/Observations/ObsListToolbar.js b/src/components/Observations/ObsListToolbar.js index aca0e6ca6..3811e27f2 100644 --- a/src/components/Observations/ObsListToolbar.js +++ b/src/components/Observations/ObsListToolbar.js @@ -100,7 +100,7 @@ const Toolbar = ( { setLayout, layout }: Props ): Node => { {currentUser && ( navigation.navigate( "Explore" )} accessibilityLabel={t( "Explore" )} accessibilityHint={t( "Navigates-to-explore" )} diff --git a/src/components/Observations/ObsStatus.js b/src/components/Observations/ObsStatus.js index 2a56914d4..0dc7799bf 100644 --- a/src/components/Observations/ObsStatus.js +++ b/src/components/Observations/ObsStatus.js @@ -38,7 +38,7 @@ const ObsStatus = ( { return ( { return ( { setLoading( true ); diff --git a/src/components/PhotoImporter/GroupPhotos.js b/src/components/PhotoImporter/GroupPhotos.js index bc6d478bb..4ecd816f9 100644 --- a/src/components/PhotoImporter/GroupPhotos.js +++ b/src/components/PhotoImporter/GroupPhotos.js @@ -187,19 +187,19 @@ const GroupPhotos = (): Node => { {selectedObservations.length > 0 && ( combinePhotos()} disabled={noObsSelected || oneObsSelected} accessibilityLabel={t( "Combine-Photos" )} /> separatePhotos()} disabled={!obsWithMultiplePhotosSelected} accessibilityLabel={t( "Separate-Photos" )} /> removePhotos()} disabled={noObsSelected} accessibilityLabel={t( "Remove-Photos" )} diff --git a/src/components/SharedComponents/Buttons/AddObsButton.js b/src/components/SharedComponents/Buttons/AddObsButton.js index 8e55cbb9d..7f975d6d7 100644 --- a/src/components/SharedComponents/Buttons/AddObsButton.js +++ b/src/components/SharedComponents/Buttons/AddObsButton.js @@ -42,7 +42,7 @@ const AddObsButton = (): React.Node => { useAngle > - + diff --git a/src/components/SharedComponents/Buttons/CloseButton.js b/src/components/SharedComponents/Buttons/CloseButton.js index 901f9420e..00a1ce3e5 100644 --- a/src/components/SharedComponents/Buttons/CloseButton.js +++ b/src/components/SharedComponents/Buttons/CloseButton.js @@ -16,7 +16,7 @@ const CloseButton = ( { className }: Props ): Node => { return ( navigation.goBack( )} diff --git a/src/components/SharedComponents/INatIcon/INatIcon.js b/src/components/SharedComponents/INatIcon/INatIcon.js index a30a68925..a249cc1a0 100644 --- a/src/components/SharedComponents/INatIcon/INatIcon.js +++ b/src/components/SharedComponents/INatIcon/INatIcon.js @@ -1,80 +1,8 @@ -/** - * INatIcon icon set component. - * Usage: - */ - import createIconSet from "react-native-vector-icons/lib/create-icon-set"; -const glyphMap = { - "arrow-down": 57344, - "arrow-left": 57345, - "arrow-right": 57346, - "arrow-up": 57347, - "close-button-circle": 57348, - "copyright-circle": 57349, - "crop-photo-circle": 57350, - "close-button-x": 57351, - collapse: 57352, - "compass-rose": 57354, - expand: 57356, - "flash-on": 57357, - focus: 57358, - "icn-captive": 57360, - "icn-dna": 57361, - identification: 57362, - "icn-id-help": 57363, - "icn-layers": 57364, - "icn-leading-id": 57365, - "icn-location-none": 57366, - "icn-location-obscured": 57367, - "icn-location-private": 57369, - logomark: 57370, - "photo-grid": 57371, - "photo-quilt": 57372, - "species-unknown": 57373, - "iconic-amphibia": 57375, - "iconic-animalia": 57376, - "iconic-arachnida": 57377, - "iconic-aves": 57378, - "iconic-actinopterygii": 57379, - "iconic-fungi": 57380, - "iconic-insecta": 57381, - "iconic-chromista": 57382, - "iconic-mammalia": 57383, - "iconic-mollusca": 57384, - "iconic-plantae": 57385, - "iconic-protozoa": 57386, - "iconic-reptilia": 57387, - "iconic-unknown": 57388, - "icn-wild": 57389, - camera: 57392, - checkmark: 57393, - chatbubble: 57396, - comments: 57397, - plus: 57398, - trash: 57399, - "star-outline": 57402, - "triple-dots": 57404, - "pen-and-paper": 57407, - microphone: 57409, - "identification-solid": 57411, - "inat-wordmark": 57412, - "ios-calendar-outline": 57413, - people: 57414, - "notifications-bell": 57417, - treeview: 57418, - pencil: 57420, - "hamburger-menu": 57353, - "flag-outline": 57403, - "id-agree": 57359, - "arrow-up-plain": 57368, - "sparkly-label": 57355, - flag: 57374, - gallery: 57415, - taxarank: 57390 -}; +import glyphmap from "./glyphmap.json"; -const iconSet = createIconSet( glyphMap, "inaturalisticons", "inaturalisticons.ttf" ); +const iconSet = createIconSet( glyphmap, "INatIcon", "INatIcon.ttf" ); export default iconSet; export const { @@ -82,7 +10,3 @@ export const { getImageSource, getImageSourceSync } = iconSet; - -export { - glyphMap -}; diff --git a/src/components/SharedComponents/INatIcon/glyphmap.json b/src/components/SharedComponents/INatIcon/glyphmap.json new file mode 100644 index 000000000..232e5e4d8 --- /dev/null +++ b/src/components/SharedComponents/INatIcon/glyphmap.json @@ -0,0 +1,80 @@ +{ + "add-comment-outline": 61697, + "arcamera": 61698, + "arrow-down-bold-circle-outline": 61699, + "arrow-down-bold-circle": 61700, + "arrow-turn-down-right": 61701, + "arrow-up-bold-circle-outline": 61702, + "arrow-up-bold-circle": 61703, + "arrow-up-circle-dots": 61704, + "arrow-up-small": 61705, + "arrow-up": 61706, + "binoculars": 61707, + "book": 61708, + "camera": 61709, + "check": 61710, + "checkmark-circle-outline": 61711, + "checkmark-circle": 61712, + "chevron-left-circle": 61713, + "chevron-left": 61714, + "chevron-right-circle": 61715, + "circle-dots": 61716, + "clock-outline": 61717, + "close-bold": 61718, + "close": 61719, + "comments-outline": 61720, + "comments": 61721, + "compass-rose-outline": 61722, + "copyright": 61723, + "crop": 61724, + "flag": 61725, + "flash-off": 61726, + "flash-on": 61727, + "flip": 61728, + "gallery": 61729, + "globe-outline": 61730, + "grid-square": 61731, + "grid": 61732, + "hamburger-menu": 61733, + "help-circle-outline": 61734, + "help": 61735, + "id-agree": 61736, + "info-circle-outline": 61737, + "kebab-menu": 61738, + "label-outline": 61739, + "label": 61740, + "layers": 61741, + "leaf": 61742, + "list-square": 61743, + "location-crosshairs": 61744, + "magnifying-glass": 61745, + "map-marker-outline": 61746, + "microphone-circle": 61747, + "microphone": 61748, + "noevidence": 61749, + "notifications-bell": 61750, + "pause-circle": 61751, + "pencil-outline": 61752, + "pencil": 61753, + "person": 61754, + "photos-outline": 61755, + "photos": 61756, + "play-circle": 61757, + "play": 61758, + "plus-bold": 61759, + "plus": 61760, + "pot-outline": 61761, + "rotate-exclamation": 61762, + "rotate-right": 61763, + "rotate": 61764, + "sliders": 61765, + "sound-bold-outline": 61766, + "sound-outline": 61767, + "sounds": 61768, + "sparkly-label": 61769, + "star-bold-outline": 61770, + "star": 61771, + "trash-outline": 61772, + "trash": 61773, + "triangle-exclamation": 61774 +} \ No newline at end of file diff --git a/src/components/SharedComponents/INatIcon/index.js b/src/components/SharedComponents/INatIcon/index.js index 8b6e2b5aa..98f7f0b52 100644 --- a/src/components/SharedComponents/INatIcon/index.js +++ b/src/components/SharedComponents/INatIcon/index.js @@ -13,10 +13,77 @@ type Props = { size?: number }; +// Most of these are names for these icons used in design mapped to more +// consistent and deduped filenames. We might also put aliases of convenience +// here, e.g. "speech" and "chat" might both map to "comments" if we find +// ourselves forgetting the name "comments" +const ALIASES = { + addevidence: "plus", + "evidence-add": "plus-bold", + addid: "id-agree", + back: "chevron-left", + captive: "pot", + checkmark: "check", + "close-large": "close", + "close-small": "close-bold", + combine: "photos", + multiplephotos: "photos", + "multiplephotos-small": "photos-outline", + "comment-fill": "comments", + "comment-outline": "comments-outline", + copyrightcc: "copyright", + currentlocation: "location-crosshairs", + cv: "sparkly-label", + date: "clock", + delete: "trash-outline", + "downvote-active": "arrow-down-bold-circle", + "downvote-inactive": "arrow-down-bold-circle-outline", + notes: "pencil-outline", + edit: "pencil", + "evidence-close": "close-bold", + fail: "triangle-exclamation", + "fave-active": "star", + "fave-inactive": "star-bold-outline", + filters: "sliders", + flipcamera: "flip", + geoprivacy: "globe", + gridview: "grid-square", + listview: "list-square", + "help-circle": "help-circle-outline", + "id-large-fill": "label", + "id-small-outline": "label-outline", + journalposts: "book", + location: "map-marker-outline", + maplayers: "layers", + multiplesounds: "sounds", + notifications: "notifications-bell", + observations: "binoculars", + pass: "checkmark-circle", + recordsound: "microphone", + remark: "add-comment-outline", + reset: "rotate-right", + search: "magnifying-glass", + separate: "grid", + "sound-pause": "pause-circle", + "sound-play": "play-circle", + "sound-record": "microphone-circle", + "sound-small": "sound-bold-outline", + sound: "sound-outline", + species: "leaf", + sync: "rotate", + "sync-unsynced": "rotate-exclamation", + taxarankarrow: "info-circle-outline", + "upload-arrow": "arrow-up", + "upload-complete": "check", + "upload-saved": "arrow-up-circle-dots", + "upvote-active": "arrow-up-bold-circle", + "upvote-inactive": "arrow-up-bold-circle-outline" +}; + const INatIcon = ( { name, color, size }: Props ): Node => { const theme = useTheme(); // Use default color if none is specified - return ; + return ; }; export default INatIcon; diff --git a/src/components/SharedComponents/KebabMenu.js b/src/components/SharedComponents/KebabMenu.js index f162acceb..04b70c35b 100644 --- a/src/components/SharedComponents/KebabMenu.js +++ b/src/components/SharedComponents/KebabMenu.js @@ -18,7 +18,7 @@ const KebabMenu = ( { children, visible, setVisible }: Props ): Node => { const anchorButton = ( ); diff --git a/src/components/SharedComponents/PhotoCarousel.js b/src/components/SharedComponents/PhotoCarousel.js index 4d7a383c0..53c6159c9 100644 --- a/src/components/SharedComponents/PhotoCarousel.js +++ b/src/components/SharedComponents/PhotoCarousel.js @@ -113,7 +113,7 @@ const PhotoCarousel = ( { )} {( containerStyle === "camera" && deletePhotoMode ) && ( { accessibilityLabel={accessibilityLabelText()} className="relative items-center justify-center w-[49px] h-[67px]" > - {( progress < 0.05 ) - ? ( - <> - - - + {progress < 0.05 ? ( + <> + + + + + + + + ) : ( + <> + {progress < 1 ? ( - - ) - : ( - <> - {( progress < 1 ) - ? ( - - - - ) - : ( - - - - )} - - - )} + ) : ( + + + + )} + + + )} ); }; diff --git a/src/components/UiLibrary.js b/src/components/UiLibrary.js index afc4a4f32..9286f6e60 100644 --- a/src/components/UiLibrary.js +++ b/src/components/UiLibrary.js @@ -31,7 +31,7 @@ import { UserIcon } from "components/SharedComponents"; import AddObsButton from "components/SharedComponents/Buttons/AddObsButton"; -import { glyphMap } from "components/SharedComponents/INatIcon/INatIcon"; +import glyphmap from "components/SharedComponents/INatIcon/glyphmap.json"; import UserText from "components/SharedComponents/UserText"; import ViewWrapper from "components/SharedComponents/ViewWrapper"; import { fontMonoClass, ScrollView, View } from "components/styledComponents"; @@ -59,7 +59,7 @@ const UiLibrary = (): Node => { containerClass="mx-4 px-2 my-[100px]" > Floating Action Bar - + {/* TODO replace these text components with our typography header components */} @@ -182,7 +182,7 @@ const UiLibrary = (): Node => { Primary Alert.alert( "", "You tapped!" )} /> @@ -218,11 +218,7 @@ const UiLibrary = (): Node => { Custom iNaturalist Icons - - Make sure you're exporting glyphMap from components/INatIcon.js to see - all custom icons - - {Object.keys( glyphMap ) + {Object.keys( glyphmap ) .sort() .map( iconName => ( @@ -231,8 +227,9 @@ const UiLibrary = (): Node => { className="p-3" key={iconName} onPress={() => Alert.alert( "", `You tapped on the ${iconName} icon` )} - size={20} + size={14} /> + {" "} {iconName} ) )} diff --git a/src/images/icons/add-comment-outline.svg b/src/images/icons/add-comment-outline.svg new file mode 100644 index 000000000..29a58936a --- /dev/null +++ b/src/images/icons/add-comment-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arcamera.svg b/src/images/icons/arcamera.svg new file mode 100644 index 000000000..36943ae87 --- /dev/null +++ b/src/images/icons/arcamera.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/arrow-down-bold-circle-outline.svg b/src/images/icons/arrow-down-bold-circle-outline.svg new file mode 100644 index 000000000..94550c5df --- /dev/null +++ b/src/images/icons/arrow-down-bold-circle-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-down-bold-circle.svg b/src/images/icons/arrow-down-bold-circle.svg new file mode 100644 index 000000000..e1d937eaa --- /dev/null +++ b/src/images/icons/arrow-down-bold-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-turn-down-right.svg b/src/images/icons/arrow-turn-down-right.svg new file mode 100644 index 000000000..a758774e5 --- /dev/null +++ b/src/images/icons/arrow-turn-down-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up-bold-circle-outline.svg b/src/images/icons/arrow-up-bold-circle-outline.svg new file mode 100644 index 000000000..fd87a0fd6 --- /dev/null +++ b/src/images/icons/arrow-up-bold-circle-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up-bold-circle.svg b/src/images/icons/arrow-up-bold-circle.svg new file mode 100644 index 000000000..39de7af75 --- /dev/null +++ b/src/images/icons/arrow-up-bold-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up-circle-dots.svg b/src/images/icons/arrow-up-circle-dots.svg new file mode 100644 index 000000000..fa075113a --- /dev/null +++ b/src/images/icons/arrow-up-circle-dots.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up-small.svg b/src/images/icons/arrow-up-small.svg new file mode 100644 index 000000000..282349759 --- /dev/null +++ b/src/images/icons/arrow-up-small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..2af1e2c4a --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/binoculars.svg b/src/images/icons/binoculars.svg new file mode 100644 index 000000000..5f569bea6 --- /dev/null +++ b/src/images/icons/binoculars.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/book.svg b/src/images/icons/book.svg new file mode 100644 index 000000000..d88e3a68f --- /dev/null +++ b/src/images/icons/book.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/camera.svg b/src/images/icons/camera.svg new file mode 100644 index 000000000..7312e7002 --- /dev/null +++ b/src/images/icons/camera.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/check.svg b/src/images/icons/check.svg new file mode 100644 index 000000000..07e0601ce --- /dev/null +++ b/src/images/icons/check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/checkmark-circle-outline.svg b/src/images/icons/checkmark-circle-outline.svg new file mode 100644 index 000000000..ee03c6c15 --- /dev/null +++ b/src/images/icons/checkmark-circle-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/checkmark-circle.svg b/src/images/icons/checkmark-circle.svg new file mode 100644 index 000000000..b693707f8 --- /dev/null +++ b/src/images/icons/checkmark-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/chevron-left-circle.svg b/src/images/icons/chevron-left-circle.svg new file mode 100644 index 000000000..b198a1556 --- /dev/null +++ b/src/images/icons/chevron-left-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/chevron-left.svg b/src/images/icons/chevron-left.svg new file mode 100644 index 000000000..86893f837 --- /dev/null +++ b/src/images/icons/chevron-left.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/chevron-right-circle.svg b/src/images/icons/chevron-right-circle.svg new file mode 100644 index 000000000..fa4a9f524 --- /dev/null +++ b/src/images/icons/chevron-right-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/circle-dots.svg b/src/images/icons/circle-dots.svg new file mode 100644 index 000000000..90aa9966c --- /dev/null +++ b/src/images/icons/circle-dots.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/clock-outline.svg b/src/images/icons/clock-outline.svg new file mode 100644 index 000000000..c323d5df9 --- /dev/null +++ b/src/images/icons/clock-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/close-bold.svg b/src/images/icons/close-bold.svg new file mode 100644 index 000000000..8e55de795 --- /dev/null +++ b/src/images/icons/close-bold.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..24f2a321f --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/comments-outline.svg b/src/images/icons/comments-outline.svg new file mode 100644 index 000000000..80cc48e5c --- /dev/null +++ b/src/images/icons/comments-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/comments.svg b/src/images/icons/comments.svg new file mode 100644 index 000000000..d707effb5 --- /dev/null +++ b/src/images/icons/comments.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/compass-rose-outline.svg b/src/images/icons/compass-rose-outline.svg new file mode 100644 index 000000000..b61fb29b0 --- /dev/null +++ b/src/images/icons/compass-rose-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/copyright.svg b/src/images/icons/copyright.svg new file mode 100644 index 000000000..8bafd84fb --- /dev/null +++ b/src/images/icons/copyright.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/crop.svg b/src/images/icons/crop.svg new file mode 100644 index 000000000..ee11bfa63 --- /dev/null +++ b/src/images/icons/crop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/flag.svg b/src/images/icons/flag.svg new file mode 100644 index 000000000..dbccfb9c6 --- /dev/null +++ b/src/images/icons/flag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/flash-off.svg b/src/images/icons/flash-off.svg new file mode 100644 index 000000000..1fac72bfd --- /dev/null +++ b/src/images/icons/flash-off.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/flash-on.svg b/src/images/icons/flash-on.svg new file mode 100644 index 000000000..20c47e801 --- /dev/null +++ b/src/images/icons/flash-on.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/flip.svg b/src/images/icons/flip.svg new file mode 100644 index 000000000..d10e91ac5 --- /dev/null +++ b/src/images/icons/flip.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/gallery.svg b/src/images/icons/gallery.svg new file mode 100644 index 000000000..6beb4fb74 --- /dev/null +++ b/src/images/icons/gallery.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/globe-outline.svg b/src/images/icons/globe-outline.svg new file mode 100644 index 000000000..127db41dd --- /dev/null +++ b/src/images/icons/globe-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/grid-square.svg b/src/images/icons/grid-square.svg new file mode 100644 index 000000000..b176c469b --- /dev/null +++ b/src/images/icons/grid-square.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/grid.svg b/src/images/icons/grid.svg new file mode 100644 index 000000000..2f71e57c9 --- /dev/null +++ b/src/images/icons/grid.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/hamburger-menu.svg b/src/images/icons/hamburger-menu.svg new file mode 100644 index 000000000..1169bb23e --- /dev/null +++ b/src/images/icons/hamburger-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/help-circle-outline.svg b/src/images/icons/help-circle-outline.svg new file mode 100644 index 000000000..6a82fe9f9 --- /dev/null +++ b/src/images/icons/help-circle-outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/help.svg b/src/images/icons/help.svg new file mode 100644 index 000000000..c128430a6 --- /dev/null +++ b/src/images/icons/help.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/id-agree.svg b/src/images/icons/id-agree.svg new file mode 100644 index 000000000..d6f0c9227 --- /dev/null +++ b/src/images/icons/id-agree.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/info-circle-outline.svg b/src/images/icons/info-circle-outline.svg new file mode 100644 index 000000000..2d35e6280 --- /dev/null +++ b/src/images/icons/info-circle-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/kebab-menu.svg b/src/images/icons/kebab-menu.svg new file mode 100644 index 000000000..4e744f81d --- /dev/null +++ b/src/images/icons/kebab-menu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/label-outline.svg b/src/images/icons/label-outline.svg new file mode 100644 index 000000000..d90a63121 --- /dev/null +++ b/src/images/icons/label-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/label.svg b/src/images/icons/label.svg new file mode 100644 index 000000000..2a30266e3 --- /dev/null +++ b/src/images/icons/label.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/layers.svg b/src/images/icons/layers.svg new file mode 100644 index 000000000..9ad65ec70 --- /dev/null +++ b/src/images/icons/layers.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/leaf.svg b/src/images/icons/leaf.svg new file mode 100644 index 000000000..9843fbca5 --- /dev/null +++ b/src/images/icons/leaf.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/list-square.svg b/src/images/icons/list-square.svg new file mode 100644 index 000000000..66b222949 --- /dev/null +++ b/src/images/icons/list-square.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/location-crosshairs.svg b/src/images/icons/location-crosshairs.svg new file mode 100644 index 000000000..18c00ea80 --- /dev/null +++ b/src/images/icons/location-crosshairs.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/magnifying-glass.svg b/src/images/icons/magnifying-glass.svg new file mode 100644 index 000000000..c19e22783 --- /dev/null +++ b/src/images/icons/magnifying-glass.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/map-marker-outline.svg b/src/images/icons/map-marker-outline.svg new file mode 100644 index 000000000..b33ab6660 --- /dev/null +++ b/src/images/icons/map-marker-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/microphone-circle.svg b/src/images/icons/microphone-circle.svg new file mode 100644 index 000000000..90b72318e --- /dev/null +++ b/src/images/icons/microphone-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/microphone.svg b/src/images/icons/microphone.svg new file mode 100644 index 000000000..728006a98 --- /dev/null +++ b/src/images/icons/microphone.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/noevidence.svg b/src/images/icons/noevidence.svg new file mode 100644 index 000000000..d3dc44623 --- /dev/null +++ b/src/images/icons/noevidence.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/notifications-bell.svg b/src/images/icons/notifications-bell.svg new file mode 100644 index 000000000..9d567cae9 --- /dev/null +++ b/src/images/icons/notifications-bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/pause-circle.svg b/src/images/icons/pause-circle.svg new file mode 100644 index 000000000..5cd1c26f6 --- /dev/null +++ b/src/images/icons/pause-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/pencil-outline.svg b/src/images/icons/pencil-outline.svg new file mode 100644 index 000000000..3dbcd1c7a --- /dev/null +++ b/src/images/icons/pencil-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/pencil.svg b/src/images/icons/pencil.svg new file mode 100644 index 000000000..03c4c754a --- /dev/null +++ b/src/images/icons/pencil.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/person.svg b/src/images/icons/person.svg new file mode 100644 index 000000000..b6878d61f --- /dev/null +++ b/src/images/icons/person.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/photos-outline.svg b/src/images/icons/photos-outline.svg new file mode 100644 index 000000000..74b0b11c8 --- /dev/null +++ b/src/images/icons/photos-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/photos.svg b/src/images/icons/photos.svg new file mode 100644 index 000000000..fbd516926 --- /dev/null +++ b/src/images/icons/photos.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/play-circle.svg b/src/images/icons/play-circle.svg new file mode 100644 index 000000000..d8deb2a06 --- /dev/null +++ b/src/images/icons/play-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/play.svg b/src/images/icons/play.svg new file mode 100644 index 000000000..92e472f90 --- /dev/null +++ b/src/images/icons/play.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/plus-bold.svg b/src/images/icons/plus-bold.svg new file mode 100644 index 000000000..d5918fbec --- /dev/null +++ b/src/images/icons/plus-bold.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/plus.svg b/src/images/icons/plus.svg new file mode 100644 index 000000000..b2d705fea --- /dev/null +++ b/src/images/icons/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/pot-outline.svg b/src/images/icons/pot-outline.svg new file mode 100644 index 000000000..571bb6c63 --- /dev/null +++ b/src/images/icons/pot-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/rotate-exclamation.svg b/src/images/icons/rotate-exclamation.svg new file mode 100644 index 000000000..1bb427a67 --- /dev/null +++ b/src/images/icons/rotate-exclamation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/rotate-right.svg b/src/images/icons/rotate-right.svg new file mode 100644 index 000000000..04fa28423 --- /dev/null +++ b/src/images/icons/rotate-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/rotate.svg b/src/images/icons/rotate.svg new file mode 100644 index 000000000..7bf90409a --- /dev/null +++ b/src/images/icons/rotate.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/sliders.svg b/src/images/icons/sliders.svg new file mode 100644 index 000000000..b60ad1fe5 --- /dev/null +++ b/src/images/icons/sliders.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/sound-bold-outline.svg b/src/images/icons/sound-bold-outline.svg new file mode 100644 index 000000000..428d31478 --- /dev/null +++ b/src/images/icons/sound-bold-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/sound-outline.svg b/src/images/icons/sound-outline.svg new file mode 100644 index 000000000..c9d36cc1f --- /dev/null +++ b/src/images/icons/sound-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/sounds.svg b/src/images/icons/sounds.svg new file mode 100644 index 000000000..01b7a03b1 --- /dev/null +++ b/src/images/icons/sounds.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/sparkly-label.svg b/src/images/icons/sparkly-label.svg new file mode 100644 index 000000000..0802fd2fc --- /dev/null +++ b/src/images/icons/sparkly-label.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/star-bold-outline.svg b/src/images/icons/star-bold-outline.svg new file mode 100644 index 000000000..80bdf37a2 --- /dev/null +++ b/src/images/icons/star-bold-outline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/star.svg b/src/images/icons/star.svg new file mode 100644 index 000000000..7de92b66e --- /dev/null +++ b/src/images/icons/star.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/trash-outline.svg b/src/images/icons/trash-outline.svg new file mode 100644 index 000000000..ff11d6500 --- /dev/null +++ b/src/images/icons/trash-outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/trash.svg b/src/images/icons/trash.svg new file mode 100644 index 000000000..f09769938 --- /dev/null +++ b/src/images/icons/trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/triangle-exclamation.svg b/src/images/icons/triangle-exclamation.svg new file mode 100644 index 000000000..1f87859f5 --- /dev/null +++ b/src/images/icons/triangle-exclamation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js index 9fc10e36e..c73565341 100644 --- a/src/navigation/BottomTabNavigator/index.js +++ b/src/navigation/BottomTabNavigator/index.js @@ -49,7 +49,7 @@ const BottomTabs = () => { component={Explore} options={{ meta: { - icon: "compass-rose", + icon: "compass-rose-outline", testID: EXPLORE_SCREEN_ID, accessibilityLabel: t( "Explore" ), accessibilityHint: t( "Navigates-to-explore" ), diff --git a/tests/unit/components/INatIcon.test.js b/tests/unit/components/INatIcon.test.js index 3bbee6c52..bfd1a252c 100644 --- a/tests/unit/components/INatIcon.test.js +++ b/tests/unit/components/INatIcon.test.js @@ -1,6 +1,6 @@ import { render, screen } from "@testing-library/react-native"; import { INatIcon } from "components/SharedComponents"; -import { glyphMap } from "components/SharedComponents/INatIcon/INatIcon"; +import glyphmap from "components/SharedComponents/INatIcon/glyphmap.json"; import React from "react"; const iconName = "camera"; @@ -19,11 +19,11 @@ describe( "INatIcon", () => { } ); } ); -describe( "glyphMap", () => { +describe( "glyphmap", () => { it( "is an object", () => { - expect( glyphMap ).toBeInstanceOf( Object ); + expect( glyphmap ).toBeInstanceOf( Object ); } ); it( "has icon name as key", () => { - expect( glyphMap ).toHaveProperty( iconName ); + expect( glyphmap ).toHaveProperty( iconName ); } ); } ); diff --git a/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap b/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap index 22cbdbe5f..76ec3ea36 100644 --- a/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap +++ b/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap @@ -47,7 +47,7 @@ exports[`UploadStatus displays progress bar when progress is greater than 5% cor }, undefined, Object { - "fontFamily": "inaturalisticons", + "fontFamily": "INatIcon", "fontStyle": "normal", "fontWeight": "normal", }, @@ -55,7 +55,7 @@ exports[`UploadStatus displays progress bar when progress is greater than 5% cor ] } > - ? +  - ? +  - ? +  diff --git a/tests/unit/components/__snapshots__/INatIcon.test.js.snap b/tests/unit/components/__snapshots__/INatIcon.test.js.snap index 5a5ad21e2..8a774cc9e 100644 --- a/tests/unit/components/__snapshots__/INatIcon.test.js.snap +++ b/tests/unit/components/__snapshots__/INatIcon.test.js.snap @@ -12,7 +12,7 @@ exports[`INatIcon renders correctly 1`] = ` }, undefined, Object { - "fontFamily": "inaturalisticons", + "fontFamily": "INatIcon", "fontStyle": "normal", "fontWeight": "normal", }, @@ -20,6 +20,6 @@ exports[`INatIcon renders correctly 1`] = ` ] } > -  +  `;