Remove old stylesheets (#1417)

* Remove old stylesheets and unused dictionaries * Remove old stylesheets and unused dictionaries; cleanup global shadow styles * Fix Heading1; update Tailwind config; add jest clear cache * Update snapshots
2025-12-23 22:18:36 -05:00 · 2024-04-18 15:39:19 -07:00
parent ce0c60477b
commit 37f6a5d7bf
55 changed files with 211 additions and 1027 deletions
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1465,12 +1465,12 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  boost: d3f49c53809116a5d38da093a8aa78bf551aed09
  BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
  FasterImage: 60d0750ddbcefff0070c4c17309c2d1d6cc650f0
  FBLazyVector: f64d1e2ea739b4d8f7e4740cde18089cd97fe864
  FBReactNativeSpec: 9f2b8b243131565335437dba74923a8d3015e780
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
  hermes-engine: 9cecf9953a681df7556b8cc9c74905de8f3293c0
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
  MMKV: ed58ad794b3f88c24d604a5b74f3fba17fcbaf74
@@ -1561,4 +1561,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: eebd76aa39f99b44754431ed68ce0cfbfc5ec2f7

-COCOAPODS: 1.14.2
+COCOAPODS: 1.14.3
--- a/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
+++ b/ios/iNaturalistReactNative.xcodeproj/project.pbxproj
@@ -32,7 +32,6 @@
 		AE4DC81B3A87484CB3FD6750 /* Lato-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4B0AEEF6CA584BCF9880EB35 /* Lato-Regular.ttf */; };
 		E23E0899594A7C6DF680FFDB /* libPods-iNaturalistReactNative-ShareExtension.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A336AF0ADEAE537AB1B73F98 /* libPods-iNaturalistReactNative-ShareExtension.a */; };
 		E5DFC1C6FBFA45739CE91C69 /* Lato-MediumItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 69DF855D92EA4ADFB73B47F1 /* Lato-MediumItalic.ttf */; };
-		943B8BFBECD94A6491253036 /* INatIcon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 39F729E2068E4F75A65F5FB2 /* INatIcon.ttf */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -105,7 +104,6 @@
 		D8663889EABFBFC3077401E3 /* Pods-iNaturalistReactNative-ShareExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative-ShareExtension/Pods-iNaturalistReactNative-ShareExtension.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		EE004FD2EC174086A7AB2908 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
-		39F729E2068E4F75A65F5FB2 /* INatIcon.ttf */ = {isa = PBXFileReference; name = "INatIcon.ttf"; path = "../assets/fonts/INatIcon.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -943,11 +941,7 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -1019,11 +1013,7 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "clean": "./scripts/clean.sh",
    "clean-start": "npx react-native clean-project-auto && npx pod-install && npm start -- --reset-cache",
    "test": "jest",
+    "test:clear": "jest --clearCache",
    "test:memory": "jest --runInBand --logHeapUsage",
    "lint": "npm run lint:eslint && npm run lint:flow",
    "lint:eslint": "eslint . --fix",
--- a/src/components/Camera/Buttons/TakePhoto.js
+++ b/src/components/Camera/Buttons/TakePhoto.js
@@ -11,16 +11,10 @@ import type { Node } from "react";
 import React from "react";
 import { useTheme } from "react-native-paper";
 import { useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-} );
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
  takePhoto: Function,
@@ -60,7 +54,7 @@ const TakePhoto = ( {
      {showPrediction
        ? (
          <View
-            style={getShadow( theme.colors.primary )}
+            style={DROP_SHADOW}
            className={classnames(
              borderClass,
              "bg-inatGreen items-center justify-center border-darkGray"
--- a/src/components/Explore/Explore.js
+++ b/src/components/Explore/Explore.js
@@ -17,7 +17,8 @@ import {
  useStoredLayout,
  useTranslation
 } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

 import Header from "./Header/Header";
 import IdentifiersView from "./IdentifiersView";
@@ -26,12 +27,8 @@ import ObservationsViewBar from "./ObservationsViewBar";
 import ObserversView from "./ObserversView";
 import SpeciesView from "./SpeciesView";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
  elevation: 6
 } );

@@ -176,7 +173,7 @@ const Explore = ( {
                color="white"
                size={27}
                style={[
-                  getShadow( theme.colors.primary ),
+                  DROP_SHADOW,
                  // eslint-disable-next-line react-native/no-inline-styles
                  { backgroundColor: "deeppink" }
                ]}
@@ -199,7 +196,7 @@ const Explore = ( {
              )}
              accessibilityLabel={exploreViewAccessibilityLabel[exploreView]}
              onPress={() => setShowExploreBottomSheet( true )}
-              style={getShadow( theme.colors.primary )}
+              style={DROP_SHADOW}
            />
            {exploreView === "observations" && (
              <ObservationsView
--- a/src/components/Explore/MapView.js
+++ b/src/components/Explore/MapView.js
@@ -10,18 +10,14 @@ import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { Platform } from "react-native";
-import { useTheme } from "react-native-paper";
 import { useDebugMode, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

 import useMapLocation from "./hooks/useMapLocation";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
  elevation: 6
 } );

@@ -34,7 +30,6 @@ const MapView = ( {
  observations,
  queryParams: tileMapParams
 }: Props ): Node => {
-  const theme = useTheme( );
  const { t } = useTranslation( );
  const { isDebug } = useDebugMode( );
  const [zoom, setZoom] = useState( -1 );
@@ -59,7 +54,7 @@ const MapView = ( {
        {showMapBoundaryButton && (
          <View
            className="mx-auto"
-            style={getShadow( theme.colors.primary )}
+            style={DROP_SHADOW}
          >
            <Button
              text={t( "REDO-SEARCH-IN-MAP-AREA" )}
--- a/src/components/Explore/Modals/FilterModal.tsx
+++ b/src/components/Explore/Modals/FilterModal.tsx
@@ -42,19 +42,16 @@ import type { Node } from "react";
 import React, { useState } from "react";
 import { useTheme } from "react-native-paper";
 import { useCurrentUser, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const { useRealm } = RealmContext;
-
-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
  elevation: 6
 } );

+const { useRealm } = RealmContext;
+
 interface Props {
  closeModal: Function,
  updateTaxon: Function,
@@ -621,7 +618,7 @@ const FilterModal = ( {
      {/* Header */}
      <View
        className="flex-row items-center p-5 justify-between bg-white"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <View className="flex-row items-center">
          <INatIconButton
--- a/src/components/Explore/NumberBadge.tsx
+++ b/src/components/Explore/NumberBadge.tsx
@@ -3,15 +3,11 @@ import { Body3 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { useTheme } from "react-native-paper";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = (shadowColor: string) => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
  elevation: 6
 } );

@@ -21,7 +17,6 @@ interface Props {
 }

 const NumberBadge = ( { number, light }: Props ): Node => {
-  const theme = useTheme();
  const backgroundColor = light ? "bg-white" : "bg-inatGreen";
  const textColor = light ? "text-darkGray" : "text-white";
  return (
@@ -30,7 +25,7 @@ const NumberBadge = ( { number, light }: Props ): Node => {
        "w-[24px] h-[24px] justify-center items-center rounded-full",
        backgroundColor
      )}
-      style={getShadow( theme.colors.primary )}
+      style={DROP_SHADOW}
    >
      <Body3 className={textColor}>{number}</Body3>
    </View>
--- a/src/components/Explore/ObservationsViewBar.js
+++ b/src/components/Explore/ObservationsViewBar.js
@@ -4,8 +4,7 @@ import { INatIconButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { useTheme } from "react-native-paper";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
 import colors from "styles/tailwindColors";

 type Props = {
@@ -13,12 +12,8 @@ type Props = {
  updateObservationsView: Function
 };

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
  elevation: 6
 } );

@@ -26,8 +21,6 @@ const ObservationsViewBar = ( {
  layout,
  updateObservationsView
 }: Props ): Node => {
-  const theme = useTheme( );
-
  const buttons = [
    {
      value: "list",
@@ -99,7 +92,7 @@ const ObservationsViewBar = ( {
              ? 48
              : 44}
            style={[
-              getShadow( theme.colors.primary ),
+              DROP_SHADOW,
              outerBorderStyle,
              spacerStyle,
              backgroundColor
--- a/src/components/Explore/SearchScreens/ExploreLocationSearch.js
+++ b/src/components/Explore/SearchScreens/ExploreLocationSearch.js
@@ -18,21 +18,15 @@ import React, {
  useState
 } from "react";
 import { FlatList } from "react-native";
-import { useTheme } from "react-native-paper";
 import { useAuthenticatedQuery, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: 4
 } );

 const ExploreLocationSearch = ( ): Node => {
-  const theme = useTheme();
  const navigation = useNavigation();
  const { t } = useTranslation( );

@@ -102,7 +96,7 @@ const ExploreLocationSearch = ( ): Node => {
    <ViewWrapper testID="explore-location-search">
      <View
        className="bg-white pt-2 pb-5"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <View className="px-6">
          <SearchBar
--- a/src/components/Explore/SearchScreens/ExploreProjectSearch.js
+++ b/src/components/Explore/SearchScreens/ExploreProjectSearch.js
@@ -14,21 +14,15 @@ import React, {
  useCallback,
  useState
 } from "react";
-import { useTheme } from "react-native-paper";
 import { useAuthenticatedQuery, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: 4
 } );

 const ExploreProjectSearch = ( ): Node => {
-  const theme = useTheme();
  const [userQuery, setUserQuery] = useState( "" );
  const navigation = useNavigation( );
  const { t } = useTranslation();
@@ -73,7 +67,7 @@ const ExploreProjectSearch = ( ): Node => {
    <ViewWrapper className="flex-1">
      <View
        className="bg-white px-6 pt-2 pb-8"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <SearchBar
          handleTextChange={setUserQuery}
--- a/src/components/Explore/SearchScreens/ExploreTaxonSearch.js
+++ b/src/components/Explore/SearchScreens/ExploreTaxonSearch.js
@@ -12,22 +12,16 @@ import React, {
  useCallback, useLayoutEffect, useRef, useState
 } from "react";
 import { FlatList } from "react-native";
-import { useTheme } from "react-native-paper";
 import { useIconicTaxa } from "sharedHooks";
 import useTaxonSearch from "sharedHooks/useTaxonSearch";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: 4
 } );

 const ExploreTaxonSearch = ( ): Node => {
-  const theme = useTheme();
  const [taxonQuery, setTaxonQuery] = useState( "" );
  const navigation = useNavigation( );
  // Ref for the input field
@@ -63,7 +57,7 @@ const ExploreTaxonSearch = ( ): Node => {
    <ViewWrapper className="flex-1">
      <View
        className="bg-white px-6 pt-2 pb-8"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <SearchBar
          handleTextChange={setTaxonQuery}
--- a/src/components/Explore/SearchScreens/ExploreUserSearch.js
+++ b/src/components/Explore/SearchScreens/ExploreUserSearch.js
@@ -14,21 +14,15 @@ import React, {
  useCallback,
  useState
 } from "react";
-import { useTheme } from "react-native-paper";
 import { useAuthenticatedQuery, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: 4
 } );

 const ExploreUserSearch = ( ): Node => {
-  const theme = useTheme();
  const [userQuery, setUserQuery] = useState( "" );
  const navigation = useNavigation( );
  const { t } = useTranslation();
@@ -77,7 +71,7 @@ const ExploreUserSearch = ( ): Node => {
    <ViewWrapper className="flex-1">
      <View
        className="bg-white px-6 pt-2 pb-8"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <SearchBar
          handleTextChange={setUserQuery}
--- a/src/components/LocationPicker/CrosshairCircle.js
+++ b/src/components/LocationPicker/CrosshairCircle.js
@@ -10,11 +10,10 @@ import { useTheme } from "react-native-paper";
 import WarningText from "./WarningText";

 type Props = {
-  accuracyTest: string,
-  getShadow: Function
+  accuracyTest: string
 };

-const CrosshairCircle = ( { accuracyTest, getShadow }: Props ): Node => {
+const CrosshairCircle = ( { accuracyTest }: Props ): Node => {
  const theme = useTheme( );

  return (
@@ -53,7 +52,7 @@ const CrosshairCircle = ( { accuracyTest, getShadow }: Props ): Node => {
        )}
      </View>
      <View className="absolute m-auto left-0 right-0 top-[300px]">
-        <WarningText accuracyTest={accuracyTest} getShadow={getShadow} />
+        <WarningText accuracyTest={accuracyTest} />
      </View>
    </View>
  );
--- a/src/components/LocationPicker/DisplayLatLng.js
+++ b/src/components/LocationPicker/DisplayLatLng.js
@@ -6,16 +6,17 @@ import {
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { useTheme } from "react-native-paper";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";
+
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
  region: Object,
-  accuracy: number,
-  getShadow: Function
+  accuracy: number
 };

-const DisplayLatLng = ( { region, accuracy, getShadow }: Props ): Node => {
-  const theme = useTheme( );
+const DisplayLatLng = ( { region, accuracy }: Props ): Node => {
  const formatDecimal = coordinate => coordinate && coordinate.toFixed( 6 );

  const displayLocation = ( ) => {
@@ -35,7 +36,7 @@ const DisplayLatLng = ( { region, accuracy, getShadow }: Props ): Node => {
  return (
    <View
      className="bg-white h-[27px] rounded-lg absolute top-[85px] right-[26px] left-[26px]"
-      style={getShadow( theme.colors.primary )}
+      style={DROP_SHADOW}
    >
      <Body4 className="pt-[7px] pl-[14px]">
        {displayLocation( )}
--- a/src/components/LocationPicker/LoadingIndicator.js
+++ b/src/components/LocationPicker/LoadingIndicator.js
@@ -5,15 +5,14 @@ import { ActivityIndicator } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-type Props = {
-  getShadow: Function,
-  theme: Object
-};
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

-const LoadingIndicator = ( { getShadow, theme }: Props ): Node => (
+const LoadingIndicator = ( ): Node => (
  <View
-    style={getShadow( theme.colors.primary )}
+    style={DROP_SHADOW}
    className={classnames(
      "h-[80px]",
      "w-[80px]",
--- a/src/components/LocationPicker/LocationPicker.js
+++ b/src/components/LocationPicker/LocationPicker.js
@@ -10,9 +10,7 @@ import {
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { useTheme } from "react-native-paper";
 import useTranslation from "sharedHooks/useTranslation";
-import { getShadowStyle } from "styles/global";

 import CrosshairCircle from "./CrosshairCircle";
 import DisplayLatLng from "./DisplayLatLng";
@@ -23,15 +21,6 @@ import LocationSearch from "./LocationSearch";
 export const DESIRED_LOCATION_ACCURACY = 100;
 export const REQUIRED_LOCATION_ACCURACY = 500000;

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-} );
-
 type Props = {
  accuracy: number,
  accuracyTest: string,
@@ -69,7 +58,6 @@ const LocationPicker = ( {
  updateRegion,
  updateObservationKeys
 }: Props ): Node => {
-  const theme = useTheme( );
  const { t } = useTranslation( );

  return (
@@ -85,7 +73,6 @@ const LocationPicker = ( {
          <LocationSearch
            locationName={locationName}
            updateLocationName={updateLocationName}
-            getShadow={getShadow}
            selectPlaceResult={selectPlaceResult}
            hidePlaceResults={hidePlaceResults}
          />
@@ -94,7 +81,6 @@ const LocationPicker = ( {
          <DisplayLatLng
            region={region}
            accuracy={accuracy}
-            getShadow={getShadow}
          />
        </View>
        <View
@@ -112,12 +98,11 @@ const LocationPicker = ( {
          {showCrosshairs && (
            <CrosshairCircle
              accuracyTest={accuracyTest}
-              getShadow={getShadow}
            />
          )}
        </View>
        <View className="top-1/2 left-1/2 absolute z-10">
-          {loading && <LoadingIndicator getShadow={getShadow} theme={theme} />}
+          {loading && <LoadingIndicator />}
        </View>
        <Map
          className="h-full"
--- a/src/components/LocationPicker/LocationSearch.js
+++ b/src/components/LocationPicker/LocationSearch.js
@@ -10,21 +10,22 @@ import { Pressable, View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useRef } from "react";
 import { Keyboard } from "react-native";
-import { useTheme } from "react-native-paper";
 import useAuthenticatedQuery from "sharedHooks/useAuthenticatedQuery";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";
+
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
  locationName: ?string,
  updateLocationName: Function,
-  getShadow: Function,
  selectPlaceResult: Function,
  hidePlaceResults: boolean
 };

 const LocationSearch = ( {
-  locationName, updateLocationName, getShadow, selectPlaceResult, hidePlaceResults
+  locationName, updateLocationName, selectPlaceResult, hidePlaceResults
 }: Props ): Node => {
-  const theme = useTheme( );
  const queryClient = useQueryClient( );
  const locationInput = useRef( );

@@ -60,7 +61,7 @@ const LocationSearch = ( {
      />
      <View
        className="absolute top-[65px] right-[26px] left-[26px] bg-white rounded-lg z-100"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        {!hidePlaceResults && placeResults?.map( place => (
          <Pressable
--- a/src/components/LocationPicker/WarningText.js
+++ b/src/components/LocationPicker/WarningText.js
@@ -7,16 +7,17 @@ import {
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { useTheme } from "react-native-paper";
 import useTranslation from "sharedHooks/useTranslation";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";
+
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
-  accuracyTest: string,
-  getShadow: Function
+  accuracyTest: string
 };

-const WarningText = ( { accuracyTest, getShadow }: Props ): Node => {
-  const theme = useTheme( );
+const WarningText = ( { accuracyTest }: Props ): Node => {
  const { t } = useTranslation( );

  if ( accuracyTest === "pass" ) {
@@ -40,7 +41,7 @@ const WarningText = ( { accuracyTest, getShadow }: Props ): Node => {
        "bg-white": accuracyTest === "acceptable",
        "bg-warningRed": accuracyTest === "fail"
      } )}
-      style={getShadow( theme.colors.primary )}
+      style={DROP_SHADOW}
    >
      <Body3
        className={classnames(
--- a/src/components/Messages/MessageList.js
+++ b/src/components/Messages/MessageList.js
@@ -3,7 +3,6 @@
 import { ActivityIndicator } from "components/SharedComponents";
 import * as React from "react";
 import { FlatList, Text } from "react-native";
-import { textStyles } from "styles/messages/messages";

 type Props = {
  loading: boolean,
@@ -26,7 +25,7 @@ const MessageList = ( {
  }

  const renderMessages = ( { item } ) => (
-    <Text style={textStyles.projectName}>{item.subject}</Text>
+    <Text>{item.subject}</Text>
  );

  return (
--- a/src/components/ObsDetails/ActivityTab/ActivityItem.js
+++ b/src/components/ObsDetails/ActivityTab/ActivityItem.js
@@ -12,7 +12,6 @@ import { t } from "i18next";
 import _ from "lodash";
 import type { Node } from "react";
 import React from "react";
-import { textStyles } from "styles/obsDetails/obsDetails";

 import ActivityHeaderContainer from "./ActivityHeaderContainer";

@@ -80,7 +79,7 @@ const ActivityItem = ( {
        )}
        { !_.isEmpty( item?.body ) && (
          <View className="flex-row">
-            <UserText baseStyle={textStyles.activityItemBody} text={item.body} />
+            <UserText text={item.body} />
          </View>
        )}
      </View>
--- a/src/components/ObsDetails/ActivityTab/FloatingButtons.js
+++ b/src/components/ObsDetails/ActivityTab/FloatingButtons.js
@@ -8,9 +8,14 @@ import React from "react";
 import {
  useTranslation
 } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
 import colors from "styles/tailwindColors";

+const DROP_SHADOW = getShadowForColor( colors.black, {
+  offsetHeight: -3,
+  shadowOpacity: 0.2
+} );
+
 type Props = {
  navToSuggestions: Function,
  showCommentBox: Function,
@@ -27,15 +32,7 @@ const FloatingButtons = ( {
  return (
    <View
      className="flex-row justify-evenly bg-white pt-4 pb-4 px-6"
-      style={getShadowStyle( {
-        shadowColor: colors.black,
-        offsetWidth: 0,
-        offsetHeight: -3,
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        radius: 5,
-        elevation: 5
-      } )}
+      style={DROP_SHADOW}
    >
      <Button
        text={t( "COMMENT" )}
--- a/src/components/PlaceholderText.js
+++ b/src/components/PlaceholderText.js
@@ -1,24 +0,0 @@
-// @flow
-
-import type { Node } from "react";
-import React from "react";
-import { Text } from "react-native";
-import colors from "styles/tailwindColors";
-
-type Props = {
-  text: string,
-  style?: Array<Object>
-}
-
-const PlaceholderText = ( { text, style }: Props ): Node => (
-  <Text style={[{
-    color: colors.warningRed,
-    textTransform: "uppercase",
-    fontSize: 30
-  }].concat( style )}
-  >
-    { text }
-  </Text>
-);
-
-export default PlaceholderText;
--- a/src/components/Projects/Projects.js
+++ b/src/components/Projects/Projects.js
@@ -21,7 +21,6 @@ import {
 import {
  useTranslation
 } from "sharedHooks";
-import { viewStyles } from "styles/projects/projects";

 type Props = {
  searchInput: string,
@@ -57,9 +56,8 @@ const Projects = ( {

  const renderProject = ( { item: project } ) => (
    <Pressable
-      className="px-4"
+      className="px-4 py-1.5"
      onPress={( ) => navigation.navigate( "ProjectDetails", { id: project.id } )}
-      style={viewStyles.row}
      testID={`Project.${project.id}`}
      accessible
      accessibilityRole="button"
--- a/src/components/Search/Search.js
+++ b/src/components/Search/Search.js
@@ -2,18 +2,19 @@

 import { useNavigation } from "@react-navigation/native";
 import fetchSearchResults from "api/search";
-import PlaceholderText from "components/PlaceholderText";
-import { ActivityIndicator, InputField, ViewWrapper } from "components/SharedComponents";
-import * as React from "react";
 import {
-  FlatList,
+  ActivityIndicator, Body3, InputField, ViewWrapper
+} from "components/SharedComponents";
+import {
  Image,
  Pressable,
-  Text,
  View
+} from "components/styledComponents";
+import * as React from "react";
+import {
+  FlatList
 } from "react-native";
 import useAuthenticatedQuery from "sharedHooks/useAuthenticatedQuery";
-import { imageStyles, viewStyles } from "styles/search/search";

 const Search = (): React.Node => {
  const navigation = useNavigation();
@@ -41,36 +42,38 @@ const Search = (): React.Node => {
        && item.default_photo && { uri: item.default_photo.square_url };
      return (
        <Pressable
+          className="py-1.5"
          accessibilityRole="button"
+          accessibilityLabel="Navigates-to-taxon-details"
          onPress={navToTaxonDetails}
-          style={viewStyles.row}
          testID={`Search.taxa.${item.id}`}
        >
          <Image
            source={imageUrl}
-            style={imageStyles.squareImage}
+            className="w-full h-full mr-[10px]"
            testID={`Search.${item.id}.photo`}
            accessibilityIgnoresInvertColors
          />
-          <Text>{`${item.preferred_common_name} (${item.rank} ${item.name})`}</Text>
+          <Body3>{`${item.preferred_common_name} (${item.rank} ${item.name})`}</Body3>
        </Pressable>
      );
    }
    return (
      <Pressable
        accessibilityRole="button"
+        accessibilityLabel="Navigates-to-user-profile"
        onPress={navToUserProfile}
-        style={viewStyles.row}
+        className="py-1.5"
        testID={`Search.user.${item.login}`}
      >
        {/* TODO: add an empty icon when user doesn't have an icon */}
        <Image
          source={{ uri: item.icon }}
-          style={imageStyles.circularImage}
+          className="w-full h-full rounded-lg"
          testID={`Search.${item.login}.photo`}
          accessibilityIgnoresInvertColors
        />
-        <Text>{`${item.login} (${item.name})`}</Text>
+        <Body3>{`${item.login} (${item.name})`}</Body3>
      </Pressable>
    );
  };
@@ -80,21 +83,19 @@ const Search = (): React.Node => {

  return (
    <ViewWrapper testID="Search">
-      <View style={viewStyles.toggleRow}>
+      <View>
        <Pressable
          onPress={setTaxaSearch}
          testID="Search.taxa"
          accessibilityRole="button"
-        >
-          <PlaceholderText text="search taxa" />
-        </Pressable>
+          accessibilityLabel="Set-taxon-search"
+        />
        <Pressable
          onPress={setUserSearch}
+          accessibilityLabel="Set-user-search"
          testID="Search.users"
          accessibilityRole="button"
-        >
-          <PlaceholderText text="search users" />
-        </Pressable>
+        />
      </View>
      <InputField
        handleTextChange={setQ}
--- a/src/components/SharedComponents/FloatingActionBar.js
+++ b/src/components/SharedComponents/FloatingActionBar.js
@@ -4,16 +4,13 @@ import { View } from "components/styledComponents";
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
 import { Animated, Keyboard } from "react-native";
-import { useTheme } from "react-native-paper";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
  offsetHeight: 4,
  shadowOpacity: 0.4,
-  shadowRadius: 4,
-  elevation: 5
+  shadowRadius: 4
 } );

 type Props = {
@@ -33,7 +30,6 @@ const FloatingActionBar = ( {
  children,
  show
 }: Props ): React.Node => {
-  const theme = useTheme();
  const [keyboardHeight, setKeyboardHeight] = useState( 0 );
  const [keyboardOpen, setKeyboardOpen] = useState( false );
  const isBottom = position === "bottomEnd" || position === "bottomStart";
@@ -110,7 +106,7 @@ const FloatingActionBar = ( {
    >
      <View
        className={classNames( "bg-white", containerClass )}
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        {children}
      </View>
--- a/src/components/SharedComponents/KebabMenu.js
+++ b/src/components/SharedComponents/KebabMenu.js
@@ -5,7 +5,6 @@ import type { Node } from "react";
 import React from "react";
 import { Menu } from "react-native-paper";
 import { useTranslation } from "sharedHooks";
-import viewStyles from "styles/sharedComponents/kebabMenu";
 import colors from "styles/tailwindColors";

 type Props = {
@@ -31,6 +30,10 @@ const KebabMenu = ( {
  const openMenu = ( ) => setVisible( true );
  const closeMenu = ( ) => setVisible( false );

+  const menuContentStyle = {
+    backgroundColor: colors.white
+  };
+
  const anchorButton = (
    <INatIconButton
      onPress={openMenu}
@@ -51,7 +54,7 @@ const KebabMenu = ( {
    <Menu
      visible={visible}
      onDismiss={closeMenu}
-      contentStyle={viewStyles.menuContentStyle}
+      contentStyle={menuContentStyle}
      anchor={anchorButton}
    >
      {children}
--- a/src/components/SharedComponents/Map.js
+++ b/src/components/SharedComponents/Map.js
@@ -26,9 +26,11 @@ import createUTFPosition from "sharedHelpers/createUTFPosition";
 import getDataForPixel from "sharedHelpers/fetchUTFGridData";
 import { useDeviceOrientation } from "sharedHooks";
 import useTranslation from "sharedHooks/useTranslation";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
 import colors from "styles/tailwindColors";

+const DROP_SHADOW = getShadowForColor( colors.darkGray );
+
 function calculateZoom( width, delta ) {
  return Math.round(
    Math.log2( 360 * ( width / 256 / delta ) ) + 1
@@ -127,15 +129,6 @@ type Props = {
  zoomTapEnabled?: boolean
 }

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-} );
-
 // TODO: fallback to another map library
 // for people who don't use GMaps (i.e. users in China)
 const Map = ( {
@@ -555,7 +548,7 @@ const Map = ( {
            "absolute bottom-5 right-5 bg-white rounded-full",
            currentLocationButtonClassName
          )}
-          style={getShadow( theme.colors.primary )}
+          style={DROP_SHADOW}
          accessibilityLabel={t( "Zoom-to-current-location" )}
          onPress={( ) => {
            setZoomToUserLocationRequested( true );
@@ -572,7 +565,7 @@ const Map = ( {
              "absolute bottom-5 left-5 bg-white rounded-full",
              switchMapTypeButtonClassName
            )}
-            style={getShadow( theme.colors.primary )}
+            style={DROP_SHADOW}
            accessibilityLabel={t( "Toggle-map-type" )}
            accessibilityRole="button"
            accessibilityState={
--- a/src/components/SharedComponents/ObservationsFlashList/ObsImagePreview.js
+++ b/src/components/SharedComponents/ObservationsFlashList/ObsImagePreview.js
@@ -10,10 +10,7 @@ import { getShadowForColor } from "styles/global";
 import ObsImage from "./ObsImage";

 const ICON_DROP_SHADOW = getShadowForColor( "#000000", {
-  offsetWidth: 0,
-  offsetHeight: 1,
-  shadowOpacity: 0.25,
-  shadowRadius: 2
+  offsetHeight: 1
 } );

 type SOURCE = {
--- a/src/components/SharedComponents/SearchBar.js
+++ b/src/components/SharedComponents/SearchBar.js
@@ -6,16 +6,10 @@ import type { Node } from "react";
 import React from "react";
 import { TextInput, useTheme } from "react-native-paper";
 import { useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-} );
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
  autoFocus?: boolean,
@@ -53,7 +47,7 @@ const SearchBar = ( {

  const style = {
    ...( hasShadow
-      ? getShadow( theme.colors.primary )
+      ? DROP_SHADOW
      : {} ),
    fontSize: 16,
    lineHeight: 18,
--- a/src/components/SharedComponents/Sheets/BottomSheet.js
+++ b/src/components/SharedComponents/Sheets/BottomSheet.js
@@ -15,7 +15,9 @@ import React, {
 import { Dimensions } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "sharedHooks";
-import { viewStyles } from "styles/sharedComponents/bottomSheet";
+import colors from "styles/tailwindColors";
+
+const borderRadius = 24;

 type Props = {
  children: Node,
@@ -44,6 +46,19 @@ const StandardBottomSheet = ( {
    throw new Error( "BottomSheet does not accept snapPoints as a prop." );
  }

+  const shadow = {
+    shadowColor: colors.black,
+    borderTopStartRadius: borderRadius,
+    borderTopEndRadius: borderRadius,
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.75,
+    shadowRadius: 16.0,
+    elevation: 24
+  };
+
  const { t } = useTranslation( );
  const sheetRef = useRef( null );
  const insets = useSafeAreaInsets( );
@@ -103,7 +118,7 @@ const StandardBottomSheet = ( {
      index={0}
      onChange={onChange || handleBackdropPress}
      ref={sheetRef}
-      style={[viewStyles.shadow, marginOnWide]}
+      style={[shadow, marginOnWide]}
    >
      <BottomSheetScrollView>
        <View
--- a/src/components/SharedComponents/SpeciesSeenCheckmark.js
+++ b/src/components/SharedComponents/SpeciesSeenCheckmark.js
@@ -9,16 +9,10 @@ import type { Node } from "react";
 import React from "react";
 import { useTheme } from "react-native-paper";
 import { useAuthenticatedQuery, useCurrentUser } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-} );
+const DROP_SHADOW = getShadowForColor( colors.darkGray );

 type Props = {
  taxonId: number
@@ -55,7 +49,7 @@ const SpeciesSeenCheckmark = ( {
  return (
    <View
      className="rounded-full"
-      style={getShadow( theme.colors.primary )}
+      style={DROP_SHADOW}
      testID="SpeciesSeenCheckmark"
    >
      <View className="w-[18px] h-[18px] top-[1px] bg-white absolute rounded-full" />
--- a/src/components/SharedComponents/StickyToolbar.js
+++ b/src/components/SharedComponents/StickyToolbar.js
@@ -2,16 +2,11 @@
 import classNames from "classnames";
 import { View } from "components/styledComponents";
 import * as React from "react";
-import { useTheme } from "react-native-paper";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: -2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: -2
 } );

 type Props = {
@@ -24,20 +19,16 @@ type Props = {
 const StickyToolbar = ( {
  containerClass,
  children
-}: Props ): React.Node => {
-  const theme = useTheme( );
-
-  return (
-    <View
-      className={classNames(
-        "absolute z-50 bg-white bottom-0 p-[15px] w-full",
-        containerClass
-      )}
-      style={getShadow( theme.colors.primary )}
-    >
-      {children}
-    </View>
-  );
-};
+}: Props ): React.Node => (
+  <View
+    className={classNames(
+      "absolute z-50 bg-white bottom-0 p-[15px] w-full",
+      containerClass
+    )}
+    style={DROP_SHADOW}
+  >
+    {children}
+  </View>
+);

 export default StickyToolbar;
--- a/src/components/SharedComponents/Typography/Heading1.js
+++ b/src/components/SharedComponents/Typography/Heading1.js
@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Heading1 = ( props: any ): Node => (
  <Text
    className={classnames(
-      "text-3xl tracking-tight",
+      "text-3xl tracking-tight text-darkGray",
      tailwindFontBold
    )}
    // eslint-disable-next-line react/jsx-props-no-spreading
--- a/src/components/Suggestions/TaxonSearch.js
+++ b/src/components/Suggestions/TaxonSearch.js
@@ -12,25 +12,19 @@ import React, {
  useState
 } from "react";
 import { FlatList } from "react-native";
-import { useTheme } from "react-native-paper";
 import { useTaxonSearch, useTranslation } from "sharedHooks";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
+import colors from "styles/tailwindColors";

 import AddCommentPrompt from "./AddCommentPrompt";
 import CommentBox from "./CommentBox";
 import useNavigateWithTaxonSelected from "./hooks/useNavigateWithTaxonSelected";

-const getShadow = shadowColor => getShadowStyle( {
-  shadowColor,
-  offsetWidth: 0,
-  offsetHeight: 4,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
+const DROP_SHADOW = getShadowForColor( colors.darkGray, {
+  offsetHeight: 4
 } );

 const TaxonSearch = ( ): Node => {
-  const theme = useTheme();
  const [taxonQuery, setTaxonQuery] = useState( "" );
  const [selectedTaxon, setSelectedTaxon] = useState( null );
  const taxonList = useTaxonSearch( taxonQuery );
@@ -57,7 +51,7 @@ const TaxonSearch = ( ): Node => {
      <CommentBox />
      <View
        className="bg-white px-6 pt-2 pb-8"
-        style={getShadow( theme.colors.primary )}
+        style={DROP_SHADOW}
      >
        <SearchBar
          handleTextChange={setTaxonQuery}
--- a/src/dictionaries/languages.js
+++ b/src/dictionaries/languages.js
@@ -1,51 +0,0 @@
-export default {
-  ar: "العربية",
-  be: "Беларуская",
-  bg: "български",
-  br: "Breton",
-  ca: "Català",
-  cs: "česky",
-  da: "Dansk",
-  de: "Deutsch",
-  el: "Ελληνικά",
-  en: "English",
-  eo: "Esperanto",
-  es: "Español",
-  "es-AR": "Español (Argentina)",
-  "es-CO": "Spanish (Colombia)",
-  "es-MX": "Español (México)",
-  et: "Eesti",
-  eu: "Euskara",
-  fi: "suomi",
-  fr: "français",
-  "fr-CA": "French (Canada)",
-  gl: "Galego",
-  he: "עברית",
-  hu: "magyar",
-  id: "Indonesia",
-  it: "Italiano",
-  ja: "日本語",
-  kn: "ಕನ್ನಡ",
-  ko: "한국어",
-  lb: "Lëtzebuergesch",
-  lt: "Lietuvių",
-  lv: "Latviešu",
-  mk: "македонски",
-  mr: "मराठी",
-  nb: "Norsk Bokmål",
-  nl: "Nederlands",
-  oc: "Occitan",
-  pl: "Polski",
-  pt: "Portuguese",
-  "pt-BR": "Português (Brasil)",
-  ru: "Русский",
-  sk: "Slovenský",
-  sl: "Slovenian",
-  sq: "Shqip",
-  sv: "Svenska",
-  th: "Thai",
-  tr: "Türkçe",
-  uk: "Українська",
-  "zh-CN": "简体中文",
-  "zh-TW": "繁體中文"
-};
--- a/src/dictionaries/licenses.js
+++ b/src/dictionaries/licenses.js
@@ -1,34 +0,0 @@
-export default [
-  {
-    value: "CC0",
-    title: "No Copyright (CC0)"
-  },
-  {
-    value: "CC-BY",
-    title: "Attribution"
-  },
-  {
-    value: "CC-BY-NC",
-    title: "Attribution-NonCommercial"
-  },
-  {
-    value: "CC-BY-NC-SA",
-    title: "Attribution-NonCommercial-ShareAlike"
-  },
-  {
-    value: "CC-BY-NC-ND",
-    title: "Attribution-NonCommercial-NoDerivs"
-  },
-  {
-    value: "CC-BY-ND",
-    title: "Attribution-NonDerivs"
-  },
-  {
-    value: "CC-BY-SA",
-    title: "Attribution-ShareAlike"
-  },
-  {
-    value: "",
-    title: "No license (all rights reserved)"
-  }
-];
--- a/src/dictionaries/networks.js
+++ b/src/dictionaries/networks.js
@@ -1,23 +0,0 @@
-// Key = site_id
-export default {
-  1: { name: "iNaturalist" },
-  2: { name: "NaturaLista" },
-  3: { name: "iNaturalist NZ - Mātaki Taiao" },
-  5: { name: "iNaturalist Canada" },
-  6: { name: "Naturalista Colombia" },
-  8: { name: "Biodiversity4all" },
-  13: { name: "iNaturalist Panamá" },
-  14: { name: "iNaturalist Ecuador" },
-  9: { name: "iNaturalist Australia" },
-  16: { name: "ArgentiNat" },
-  15: { name: "iNaturalist Israel" },
-  20: { name: "iNaturalist Finland" },
-  18: { name: "iNaturalist Chile" },
-  23: { name: "iNaturalist Greece" },
-  26: { name: "iNaturalist Luxembourg" },
-  25: { name: "iNaturalist United Kingdom" },
-  17: { name: "Naturalista Costa Rica" },
-  24: { name: "iNaturalist Guatemala" },
-  21: { name: "iNaturalist Sweden" },
-  28: { name: "Naturalista Uruguay" }
-};
--- a/src/dictionaries/providers.js
+++ b/src/dictionaries/providers.js
@@ -1,5 +0,0 @@
-export default {
-  facebook: "Facebook",
-  google_oauth2: "Google",
-  apple: "Apple"
-};
--- a/src/navigation/BottomTabNavigator/CustomTabBar.js
+++ b/src/navigation/BottomTabNavigator/CustomTabBar.js
@@ -5,11 +5,17 @@ import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { getShadowStyle } from "styles/global";
+import { getShadowForColor } from "styles/global";
 import colors from "styles/tailwindColors";

 import NavButton from "./NavButton";

+const DROP_SHADOW = getShadowForColor( colors.black, {
+  offsetHeight: -3,
+  shadowOpacity: 0.2,
+  elevation: 20
+} );
+
 type Props = {
  tabs: Array<Object>,
 };
@@ -29,14 +35,7 @@ const CustomTabBar = ( { tabs }: Props ): Node => {
        "flex-row bg-white justify-evenly items-center p-1 m-0",
        { "pb-5": insets.bottom > 0 }
      )}
-      style={getShadowStyle( {
-        shadowColor: colors.black,
-        offsetWidth: 0,
-        offsetHeight: -3,
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        elevation: 20
-      } )}
+      style={DROP_SHADOW}
      accessibilityRole="tablist"
      testID="CustomTabBar"
    >
--- a/src/navigation/ContextHeader.js
+++ b/src/navigation/ContextHeader.js
@@ -6,7 +6,7 @@ import BackButton from "components/SharedComponents/Buttons/BackButton";
 import { SafeAreaView, View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { getShadowStyle } from "styles/global";
+import { dropShadow } from "styles/global";
 import colors from "styles/tailwindColors";

 type Props = {
@@ -17,16 +17,6 @@ type Props = {
  alignStart?: boolean,
 };

-const SHADOW_STYLE = {
-  shadowColor: colors.black,
-  backgroundColor: colors.white,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowOpacity: 0.25,
-  shadowRadius: 2,
-  elevation: 5
-};
-
 const ContextHeader = ( {
  navigation, route, options, back
 }: Props ): Node => {
@@ -68,7 +58,7 @@ const ContextHeader = ( {
      className="bg-white"
      style={{
        ...options.headerStyle,
-        ...( options.headerShadowVisible && getShadowStyle( SHADOW_STYLE ) )
+        ...( options.headerShadowVisible && dropShadow )
      }}
    >
      <View
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -2,6 +2,15 @@ import { StyleSheet } from "react-native";

 import colors from "./tailwindColors";

+const DEFAULT_SHADOW = {
+  elevation: 5,
+  offsetHeight: 2,
+  offsetWidth: 0,
+  shadowColor: colors.black,
+  shadowOpacity: 0.25,
+  shadowRadius: 2
+};
+
 // https://reactnative.dev/docs/shadow-props
 export const getShadowStyle = ( {
  shadowColor,
@@ -29,23 +38,12 @@ export const getShadowStyle = ( {
  elevation
 } );

-export const dropShadow = getShadowStyle( {
-  shadowColor: colors.black,
-  offsetWidth: 0,
-  offsetHeight: 2,
-  shadowRadius: 2,
-  shadowOpacity: 0.25,
-  elevation: 5
-} );
+export const dropShadow = getShadowStyle( DEFAULT_SHADOW );

 export function getShadowForColor( shadowColor, options = {} ) {
  return getShadowStyle( {
+    ...DEFAULT_SHADOW,
    shadowColor,
-    offsetWidth: 0,
-    offsetHeight: 2,
-    shadowOpacity: 0.25,
-    shadowRadius: 2,
-    elevation: 5,
    ...options
  } );
 }
--- a/src/styles/messages/messages.js
+++ b/src/styles/messages/messages.js
@@ -1,18 +0,0 @@
-// @flow strict-local
-
-import { Dimensions, StyleSheet } from "react-native";
-import type { TextStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
-
-const { width } = Dimensions.get( "screen" );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  projectName: {
-    maxWidth: width - 100,
-    flexWrap: "wrap-reverse"
-  }
-} );
-
-export {
-  // eslint-disable-next-line import/prefer-default-export
-  textStyles
-};
--- a/src/styles/obsDetails/obsDetails.js
+++ b/src/styles/obsDetails/obsDetails.js
@@ -1,46 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type {
-  ImageStyleProp,
-  TextStyleProp,
-  ViewStyleProp
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  bottomModal: {
-    padding: 0,
-    backgroundColor: colors.white,
-    shadowColor: "#000",
-    borderTopStartRadius: 24,
-    borderTopEndRadius: 24,
-    shadowOffset: {
-      width: 0,
-      height: 12
-    },
-    shadowOpacity: 0.75,
-    shadowRadius: 16.0,
-    elevation: 24
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  activityItemBody: {
-    color: colors.darkGray
-  }
-} );
-
-const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
-  smallIcon: {
-    width: 15,
-    height: 15,
-    tintColor: colors.darkGray
-  }
-} );
-
-export {
-  imageStyles,
-  textStyles,
-  viewStyles
-};
--- a/src/styles/projects/projectDetails.js
+++ b/src/styles/projects/projectDetails.js
@@ -1,39 +0,0 @@
-// @flow strict-local
-
-import { Dimensions, StyleSheet } from "react-native";
-import type {
-  ImageStyleProp,
-  TextStyleProp,
-  ViewStyleProp
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-
-const { width } = Dimensions.get( "screen" );
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  descriptionText: {
-    marginVertical: 10
-  }
-} );
-
-const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
-  headerImage: {
-    width,
-    height: 150
-  },
-  icon: {
-    zIndex: 1,
-    width: 50,
-    height: 50,
-    alignSelf: "center",
-    top: 45
-  }
-} );
-
-export {
-  imageStyles,
-  textStyles,
-  viewStyles
-};
--- a/src/styles/projects/projects.js
+++ b/src/styles/projects/projects.js
@@ -1,46 +0,0 @@
-// @flow strict-local
-
-import { Dimensions, StyleSheet } from "react-native";
-import type {
-  ImageStyleProp,
-  TextStyleProp,
-  ViewStyleProp
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-
-const { width } = Dimensions.get( "screen" );
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  row: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    paddingVertical: 5
-  },
-  buttonRow: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    justifyContent: "space-evenly"
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  projectName: {
-    maxWidth: width - 100,
-    flexWrap: "wrap-reverse"
-  }
-} );
-
-const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
-  projectIcon: {
-    width: 50,
-    height: 50,
-    borderRadius: 10,
-    marginHorizontal: 20
-  }
-} );
-
-export {
-  imageStyles,
-  textStyles,
-  viewStyles
-};
--- a/src/styles/search/search.js
+++ b/src/styles/search/search.js
@@ -1,51 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type {
-  ImageStyleProp,
-  TextStyleProp,
-  ViewStyleProp
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  row: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    paddingVertical: 5,
-    borderBottomColor: colors.darkGray,
-    borderBottomWidth: 1
-  },
-  toggleRow: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    justifyContent: "space-around"
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  text: { }
-} );
-
-const imageWidth = 40;
-
-const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
-  circularImage: {
-    width: imageWidth,
-    height: imageWidth,
-    borderRadius: 50,
-    marginRight: 10
-  },
-  squareImage: {
-    width: imageWidth,
-    height: imageWidth,
-    marginRight: 10
-  }
-} );
-
-export {
-  imageStyles,
-  textStyles,
-  viewStyles
-};
--- a/src/styles/settings/settings.js
+++ b/src/styles/settings/settings.js
@@ -1,183 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type { TextStyleProp, ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  container: {
-    backgroundColor: colors.white,
-    display: "flex",
-    flexDirection: "column",
-    flexWrap: "nowrap",
-    height: "auto",
-    paddingBottom: 200
-  },
-  tabsRow: {
-    backgroundColor: colors.white,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    height: 75,
-    justifyContent: "space-evenly"
-  },
-  headerRow: {
-    backgroundColor: colors.white,
-    flexDirection: "row",
-    width: "100%",
-    justifyContent: "flex-start",
-    padding: 10
-  },
-  row: {
-    display: "flex",
-    flexDirection: "row"
-  },
-  column: {
-    paddingBottom: 200
-  },
-  profileImage: {
-    height: 130,
-    width: 130
-  },
-  relationshipImage: {
-    height: 60,
-    width: 60
-  },
-  textInput: {
-    backgroundColor: colors.white,
-    borderWidth: 1,
-    flexGrow: 1
-  },
-  notificationContainer: {
-    marginBottom: 10
-  },
-  notificationLeftSide: {
-    flex: 1
-  },
-  switch: {
-    width: 50
-  },
-  notificationCheckbox: {
-    alignItems: "center"
-  },
-  selectorContainer: {
-    width: "100%",
-    borderColor: "#000000",
-    borderWidth: 1,
-    borderStyle: "solid"
-  },
-  selector: {
-    width: "100%"
-  },
-  placeResultContainer: {
-    padding: 5,
-    borderColor: "#CCCCCC",
-    borderWidth: 1,
-    borderStyle: "solid"
-  },
-  clearSearch: {
-    width: 30,
-    height: 30,
-    alignSelf: "center"
-  },
-  revokeAccess: {
-    width: 100,
-    borderColor: "#CCCCCC",
-    borderWidth: 1,
-    borderStyle: "solid",
-    marginRight: 10,
-    flexDirection: "column",
-    marginLeft: "auto",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  relationshipRow: {
-    marginTop: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: "#CCCCCC",
-    paddingBottom: 10
-  },
-  removeRelationship: {
-    width: 100,
-    borderColor: "#CCCCCC",
-    borderWidth: 1,
-    borderStyle: "solid",
-    flexDirection: "column",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  paginationContainer: {
-    marginTop: 20,
-    marginBottom: 20,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  pageButton: {
-    width: 30,
-    borderColor: "#CCCCCC",
-    borderWidth: 1,
-    borderStyle: "solid",
-    flexDirection: "column",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginRight: 10
-  },
-  userPic: {
-    width: 30,
-    height: 30,
-    alignSelf: "center"
-  },
-  applicationRow: {
-    marginTop: 20
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  header: {
-    fontSize: 20,
-    flexGrow: 1
-  },
-  activeTab: {
-    fontWeight: "bold"
-  },
-  title: {
-    fontSize: 20,
-    marginBottom: 10
-  },
-  notificationTitle: {
-    fontWeight: "bold"
-  },
-  subTitle: {
-    fontWeight: "bold",
-    marginTop: 10
-  },
-  marginTop: {
-    marginTop: 10
-  },
-  resultPlaceName: {
-    fontWeight: "bold"
-  },
-  resultPlaceType: {
-    marginLeft: 10,
-    color: "#CCCCCC"
-  },
-  checkbox: {
-    flexWrap: "wrap",
-    maxWidth: "90%"
-  },
-  currentPage: {
-    fontWeight: "bold"
-  },
-  applicationName: {
-    flex: 1
-  }
-} );
-
-export {
-  textStyles,
-  viewStyles
-};
--- a/src/styles/settings/settingsTabs.js
+++ b/src/styles/settings/settingsTabs.js
@@ -1,43 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type { TextStyleProp, ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  container: {
-    backgroundColor: colors.white,
-    display: "flex",
-    flexDirection: "column",
-    flexWrap: "nowrap",
-    height: "100%"
-  },
-  tabsRow: {
-    backgroundColor: colors.white,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    height: 75,
-    justifyContent: "space-evenly"
-  },
-  shadow: {
-    shadowColor: colors.black,
-    shadowOffset: {
-      width: 0,
-      height: -3
-    },
-    shadowOpacity: 0.20,
-    shadowRadius: 2
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  text: {
-    fontSize: 20
-  }
-} );
-
-export {
-  textStyles,
-  viewStyles
-};
--- a/src/styles/sharedComponents/bottomSheet.js
+++ b/src/styles/sharedComponents/bottomSheet.js
@@ -1,27 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const borderRadius = 24;
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  shadow: {
-    shadowColor: colors.black,
-    borderTopStartRadius: borderRadius,
-    borderTopEndRadius: borderRadius,
-    shadowOffset: {
-      width: 0,
-      height: 12
-    },
-    shadowOpacity: 0.75,
-    shadowRadius: 16.0,
-    elevation: 24
-  }
-} );
-
-export {
-  // eslint-disable-next-line import/prefer-default-export
-  viewStyles
-};
--- a/src/styles/sharedComponents/kebabMenu.js
+++ b/src/styles/sharedComponents/kebabMenu.js
@@ -1,13 +0,0 @@
-// @flow
-
-import { StyleSheet } from "react-native";
-import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
-import colors from "styles/tailwindColors";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  menuContentStyle: {
-    backgroundColor: colors.white
-  }
-} );
-
-export default viewStyles;
--- a/src/styles/soundRecorder/soundRecorder.js
+++ b/src/styles/soundRecorder/soundRecorder.js
@@ -1,46 +0,0 @@
-// @flow strict-local
-
-import { StyleSheet } from "react-native";
-import type {
-  ImageStyleProp,
-  TextStyleProp,
-  ViewStyleProp
-} from "react-native/Libraries/StyleSheet/StyleSheet";
-
-const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
-  center: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginVertical: 70
-  },
-  recordButtonRow: {
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  playbackButton: {
-    marginRight: 30
-  }
-} );
-
-const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
-  alignCenter: {
-    textAlign: "center"
-  },
-  duration: {
-    marginTop: 20,
-    fontSize: 40
-  }
-} );
-
-const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
-
-} );
-
-export {
-  imageStyles,
-  textStyles,
-  viewStyles
-};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */

+const setLineHeight = lineHeight => ( { lineHeight } );
+
 module.exports = {
-  content: ["index.js", "./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      letterSpacing: {
@@ -11,75 +13,25 @@ module.exports = {
      },
      fontSize: {
        // Typography: Heading1
-        "3xl": [
-          "25px",
-          {
-            lineHeight: "30px"
-          }
-        ],
+        "3xl": ["25px", setLineHeight( "30px" )],
        // Typography: Heading2
-        "2xl": [
-          "21px",
-          {
-            lineHeight: "25.2px"
-          }
-        ],
+        "2xl": ["21px", setLineHeight( "25.2px" )],
        // Typography: Subheading1
-        xl: [
-          "20px",
-          {
-            lineHeight: "24px"
-          }
-        ],
+        xl: ["20px", setLineHeight( "24px" )],
        // Typography: Heading3
-        lg: [
-          "18px",
-          {
-            lineHeight: "21.6px"
-          }
-        ],
+        lg: ["18px", setLineHeight( "21.6px" )],
        // Typography: Body1/List1
-        base: [
-          "17px",
-          {
-            lineHeight: "20.4px"
-          }
-        ],
+        base: ["17px", setLineHeight( "20.4px" )],
        // Typography: Heading4/Body2/UnderlinedLink
-        md: [
-          "15px",
-          {
-            lineHeight: "18px"
-          }
-        ],
+        md: ["15px", setLineHeight( "18px" )],
        // Typography: List2
-        sm: [
-          "14px",
-          {
-            lineHeight: "16.8px"
-          }
-        ],
+        sm: ["14px", setLineHeight( "16.8px" )],
        // Typography: Body3
-        xs: [
-          "13px",
-          {
-            lineHeight: "18px"
-          }
-        ],
+        xs: ["13px", setLineHeight( "18px" )],
        // Typography: Body4
-        "2xs": [
-          "11px",
-          {
-            lineHeight: "13.2px"
-          }
-        ],
+        "2xs": ["11px", setLineHeight( "13.2px" )],
        // Typography: Heading5
-        "3xs": [
-          "8px",
-          {
-            lineHeight: "9.6px"
-          }
-        ]
+        "3xs": ["8px", setLineHeight( "9.6px" )]
      },
      height: {
        22: "5.5rem"
@@ -139,6 +91,5 @@ module.exports = {
      xl: "744px",
      "2xl": "1366px"
    }
-  },
-  plugins: []
+  }
 };
--- a/tests/unit/components/SharedComponents/Typography/Heading2.test.js
+++ b/tests/unit/components/SharedComponents/Typography/Heading2.test.js
@@ -1,9 +1,6 @@
 import { render, screen } from "@testing-library/react-native";
 import { Heading2 } from "components/SharedComponents";
 import React from "react";
-import * as mockReactI18next from "tests/mocks/react-i18next";
-
-jest.mock( "react-i18next", ( ) => mockReactI18next );

 const text = "Heading2";

--- a/tests/unit/components/SharedComponents/Typography/snapshots/Heading1.test.js.snap
+++ b/tests/unit/components/SharedComponents/Typography/snapshots/Heading1.test.js.snap
@@ -11,6 +11,9 @@ exports[`Heading1 renders correctly 1`] = `
      {
        "letterSpacing": -0.25,
      },
+      {
+        "color": "#454545",
+      },
      {
        "fontFamily": "Lato-Bold",
      },