455 update colors and unify usage in the app (#505)

* Update tailwind colors to match current designs, update PaperProviderColors, unify usage

* Change snapshot test colors to match current design colors

* Added accessibility labels

* Edited accessibility labels

* Remove surface color, unify usage

* Update colors

src/components/AddObsModal.js

@@ -64,10 +64,10 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => {
       <View className="flex-row justify-center">
         <View className="bg-white rounded-xl p-5 mb-12 max-w-sm">
           <Text testID="evidence-text" className="text-2xl">{t( "Evidence" )}</Text>
-          <Text className="color-grayText my-2">{t( "Add-evidence-of-an-organism" )}</Text>
-          <Text className="color-grayText my-2">{t( "You-can" )}</Text>
+          <Text className="color-darkGray my-2">{t( "Add-evidence-of-an-organism" )}</Text>
+          <Text className="color-darkGray my-2">{t( "You-can" )}</Text>
           {bulletedText.map( string => (
-            <Text className="color-grayText" key={string}>
+            <Text className="color-darkGray" key={string}>
               {`\u2022 ${string}`}
             </Text>
           ) )}

src/components/Camera/StandardCamera.js

@@ -195,7 +195,7 @@ const StandardCamera = ( ): Node => {
               testID="camera-button-label-switch-camera"
               size={40}
               icon="camera"
-              style={{ backgroundColor: colors.gray }}
+              style={{ backgroundColor: colors.darkGray }}
             />
           </Pressable>
         </View>
@@ -207,7 +207,7 @@ const StandardCamera = ( ): Node => {
             icon="camera"
             onPress={takePhoto}
             disabled={disallowAddingPhotos}
-            containerColor={theme.colors.surface}
+            containerColor={colors.white}
           />
           <View className="w-1/3">
             {photosTaken && (

src/components/LoginSignUp/Login.js

@@ -15,10 +15,10 @@ import {
 } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import {
-  Text, TextInput
+  Text, TextInput,
+  useTheme
 } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
-import colors from "styles/tailwindColors";
 
 import {
   authenticateUser,
@@ -38,6 +38,7 @@ const Login = ( ): Node => {
   const [loading, setLoading] = useState( false );
   const [extraScrollHeight, setExtraScrollHeight] = useState( 0 );
   const realm = useRealm( );
+  const theme = useTheme();
 
   useEffect( ( ) => {
     let isCurrent = true;
@@ -87,13 +88,15 @@ const Login = ( ): Node => {
         className="self-center w-32 h-32"
         resizeMode="contain"
         source={require( "images/inat_logo.png" )}
+        accessibilityIgnoresInvertColors
       />
 
       <Text testID="login-header" className="text-2xl self-center mt-5">{t( "Login-header" )}</Text>
       <Text className="text-xl self-center text-center mt-5 mb-5">{t( "Login-sub-title" )}</Text>
       <Text className="text-base mb-1">{t( "Username-or-Email" )}</Text>
       <TextInput
-        className="h-10 bg-tertiary"
+        accessibilityLabel={t( "Username-or-Email" )}
+        className="h-10 bg-lightGray"
         onChangeText={text => {
           setError( null );
           setEmail( text );
@@ -103,12 +106,13 @@ const Login = ( ): Node => {
         testID="Login.email"
         autoCapitalize="none"
         keyboardType="email-address"
-        selectionColor={colors.black}
+        selectionColor={theme.colors.tertiary}
         onFocus={() => setExtraScrollHeight( 200 )}
       />
       <Text className="text-base mb-1 mt-5">{t( "Password" )}</Text>
       <TextInput
-        className="h-10 bg-tertiary"
+        accessibilityLabel={t( "Password" )}
+        className="h-10 bg-lightGray"
         onChangeText={text => {
           setError( null );
           setPassword( text );
@@ -116,13 +120,13 @@ const Login = ( ): Node => {
         value={password}
         secureTextEntry
         testID="Login.password"
-        selectionColor={colors.black}
+        selectionColor={theme.colors.tertiary}
         onFocus={() => setExtraScrollHeight( 200 )}
       />
-      <TouchableOpacity onPress={forgotPassword}>
+      <TouchableOpacity accessibilityRole="button" onPress={forgotPassword}>
         <Text className="underline mt-2 self-end">{t( "Forgot-Password" )}</Text>
       </TouchableOpacity>
-      {error && <Text className="text-red self-center mt-5">{error}</Text>}
+      {error && <Text className="text-warningRed self-center mt-5">{error}</Text>}
       <Button
         level="focus"
         text={t( "Log-in" )}
@@ -137,6 +141,7 @@ const Login = ( ): Node => {
 
   const renderBackButton = ( ) => (
     <Pressable
+      accessibilityRole="button"
       onPress={( ) => navigation.goBack( )}
       className="absolute top-0 right-0"
     >

src/components/LoginSignUp/SignUp.js

@@ -27,7 +27,8 @@ const SignUp = (): Node => {
 
       <Text className="text-base mb-1">{t( "Email" )}</Text>
       <TextInput
-        className="h-10 bg-tertiary"
+        accessibilityLabel={t( "Email" )}
+        className="h-10 bg-lightGray"
         onChangeText={setEmail}
         value={email}
         autoComplete="email"
@@ -35,14 +36,16 @@ const SignUp = (): Node => {
 
       <Text className="text-base mb-1">{t( "Username" )}</Text>
       <TextInput
-        className="h-10 bg-tertiary"
+        accessibilityLabel={t( "Username" )}
+        className="h-10 bg-lightGray"
         onChangeText={setUsername}
         value={username}
       />
 
       <Text className="text-base mb-1">{t( "Password" )}</Text>
       <TextInput
-        className="h-10 bg-tertiary"
+        accessibilityLabel={t( "Password" )}
+        className="h-10 bg-lightGray"
         onChangeText={setPassword}
         value={password}
         secureTextEntry

src/components/ObsDetails/ActivityItem.js

@@ -59,7 +59,7 @@ const ActivityItem = ( {
             : showNoInternetIcon( t( "Taxon-photo-unavailable-without-internet" ) )}
           <View>
             <Text className="text-lg">{taxon.preferred_common_name}</Text>
-            <Text className="color-logInGray">
+            <Text className="color-darkGray">
               {taxon.rank}
               {" "}
               {taxon.name}

src/components/ObsDetails/AddCommentModal.js

@@ -14,9 +14,9 @@ import { useTranslation } from "react-i18next";
 import {
   Keyboard
 } from "react-native";
+import { useTheme } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import { viewStyles } from "styles/obsDetails/obsDetails";
-import colors from "styles/tailwindColors";
 
 type Props = {
   onCommentAdded: Function,
@@ -35,6 +35,7 @@ const AddCommentModal = ( {
   const [comment, setComment] = useState( "" );
   const bottomSheetModalRef = useRef( null );
   const [snapPoint, setSnapPoint] = useState( 100 );
+  const theme = useTheme();
 
   // Clear the comment in a timeout so it doesn't trigger a re-render of the
   // text input *after* the bottom sheet modal gets dismissed, b/c that seems
@@ -83,8 +84,8 @@ const AddCommentModal = ( {
       keyboardType="default"
       className="mb-16 h-16 mt-4"
       defaultValue={comment}
-      selectionColor={colors.black}
-      activeUnderlineColor={colors.transparent}
+      selectionColor={theme.colors.tertiary}
+      activeUnderlineColor={theme.colors.background}
       placeholder={t( "Add-a-comment" )}
       autoFocus
       multiline
@@ -118,10 +119,11 @@ const AddCommentModal = ( {
         >
           {renderTextInput()}
           <Pressable
+            accessibilityRole="button"
             className="absolute right-4 bottom-4"
             onPress={( ) => submitComment( )}
           >
-            <IconMaterial name="send" size={35} color={colors.inatGreen} />
+            <IconMaterial name="send" size={35} color={theme.colors.secondary} />
           </Pressable>
         </View>
       </BottomSheetModal>

src/components/ObsDetails/ObsDetails.js

@@ -30,7 +30,7 @@ import {
   Alert,
   LogBox
 } from "react-native";
-import { ActivityIndicator, Button as IconButton } from "react-native-paper";
+import { ActivityIndicator, Button as IconButton, useTheme } from "react-native-paper";
 import createUUID from "react-native-uuid";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import Observation from "realmModels/Observation";
@@ -73,6 +73,7 @@ const ObsDetails = ( ): Node => {
   const [showCommentBox, setShowCommentBox] = useState( false );
   const [addingComment, setAddingComment] = useState( false );
   const [comments, setComments] = useState( [] );
+  const theme = useTheme();
 
   const queryClient = useQueryClient( );
 
@@ -197,7 +198,7 @@ const ObsDetails = ( ): Node => {
       <IconButton
         icon="pencil"
         onPress={navToObsEdit}
-        textColor={colors.gray}
+        textColor={theme.colors.primary}
         accessibilityLabel={t( "Navigate-to-edit-observation" )}
       />
     );
@@ -205,7 +206,7 @@ const ObsDetails = ( ): Node => {
     navigation.setOptions( {
       headerRight: editIcon
     } );
-  }, [navigation, observation, currentUser, t] );
+  }, [navigation, observation, currentUser, t, theme] );
 
   useEffect( ( ) => {
     // set initial comments for activity currentTabId
@@ -350,9 +351,9 @@ const ObsDetails = ( ): Node => {
           <IconMaterial
             name="location-pin"
             size={15}
-            color={colors.logInGray}
+            color={theme.colors.primary}
           />
-          <Text className="color-logInGray ml-2">
+          <Text className="color-darkGray ml-2">
             {checkCamelAndSnakeCase( observation, "placeGuess" )}
           </Text>
         </View>

src/components/ObsEdit/AddID.js

@@ -22,7 +22,8 @@ import {
   TouchableOpacity
 } from "react-native";
 import {
-  Button, Headline, IconButton, TextInput
+  Button, Headline, IconButton, TextInput,
+  useTheme
 } from "react-native-paper";
 import uuid from "react-native-uuid";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
@@ -55,6 +56,7 @@ const SearchTaxonIcon = (
 );
 
 const AddID = ( { route }: Props ): Node => {
+  const theme = useTheme();
   const [comment, setComment] = useState( "" );
   const [commentDraft, setCommentDraft] = useState( "" );
   const { onIDAdded, goBackOnSave, hideComment } = route.params;
@@ -106,7 +108,7 @@ const AddID = ( { route }: Props ): Node => {
   const renderTaxonResult = ( { item: taxon } ) => {
     const taxonImage = taxon.default_photo
       ? { uri: taxon.default_photo.square_url }
-      : IconMaterial.getImageSourceSync( "spa", 50, colors.inatGreen );
+      : IconMaterial.getImageSourceSync( "spa", 50, theme.colors.secondary );
 
     return (
       <View
@@ -144,7 +146,7 @@ const AddID = ( { route }: Props ): Node => {
           <IconButton
             icon="checkmark"
             size={25}
-            iconColor={colors.inatGreen}
+            iconColor={theme.colors.secondary}
             onPress={( ) => {
               onIDAdded( createIdentification( taxon ) );
               if ( goBackOnSave ) { navigation.goBack( ); }
@@ -210,7 +212,7 @@ const AddID = ( { route }: Props ): Node => {
               </View>
             </View>
           )}
-          <Text className="color-grayText">
+          <Text className="color-darkGray">
             {t( "Search-for-a-taxon-to-add-an-identification" )}
           </Text>
           <TextInput
@@ -219,7 +221,7 @@ const AddID = ( { route }: Props ): Node => {
             style={viewStyles.taxonSearch}
             value={taxonSearch}
             onChangeText={setTaxonSearch}
-            selectionColor={colors.black}
+            selectionColor={theme.colors.tertiary}
             accessible
             accessibilityLabel={t(
               "Search-for-a-taxon-to-add-an-identification"
@@ -252,8 +254,8 @@ const AddID = ( { route }: Props ): Node => {
               keyboardType="default"
               style={viewStyles.commentInput}
               value={commentDraft}
-              selectionColor={colors.black}
-              activeUnderlineColor={colors.transparent}
+              selectionColor={theme.colors.tertiary}
+              activeUnderlineColor={theme.colors.background}
               autoFocus
               multiline
               onChangeText={setCommentDraft}
@@ -292,7 +294,7 @@ const AddID = ( { route }: Props ): Node => {
             <Button
               style={viewStyles.commentButton}
               uppercase={false}
-              color={colors.midGray}
+              color={colors.lightGray}
               onPress={() => {
                 bottomSheetModalRef.current?.dismiss();
               }}
@@ -307,7 +309,7 @@ const AddID = ( { route }: Props ): Node => {
               style={viewStyles.commentButton}
               uppercase={false}
               disabled={commentDraft.length === 0}
-              color={colors.midGray}
+              color={colors.lightGray}
               mode="contained"
               onPress={() => {
                 setComment( commentDraft );

src/components/Observations/InfiniteScrollFooter.js

@@ -11,7 +11,7 @@ type Props = {
 }
 
 const InfiniteScrollFooter = ( { view, isLoading }: Props ): Node => {
-  const className = `${view === "grid" ? "h-64" : "h-32"} border-t border-border py-16`;
+  const className = `${view === "grid" ? "h-64" : "h-32"} border-t border-lightGray py-16`;
   if ( isLoading ) {
     return (
       <View className={className}>

src/components/Observations/ObsListToolbar.js

@@ -96,7 +96,7 @@ const Toolbar = ( { setLayout, layout }: Props ): Node => {
   const statusText = getStatusText( );
   /* eslint-disable react-native/no-inline-styles */
   return (
-    <View className="bg-white border-b border-[#e8e8e8]">
+    <View className="bg-white border-b border-lightGray">
       <View className="pt-5 flex flex-row items-center px-[15px]">
         {currentUser && (
           <IconButton

src/components/Observations/ObservationViews.js

@@ -104,7 +104,7 @@ const ObservationViews = (): Node => {
     return <InfiniteScrollFooter view={layout} isLoading={isLoading} />;
   };
 
-  const renderItemSeparator = () => <View className="border border-border" />;
+  const renderItemSeparator = () => <View className="border border-lightGray" />;
 
   const onEndReached = () => {
     if ( !isLoading ) {

src/components/Observations/UploadButton.js

@@ -19,7 +19,7 @@ const UploadButton = ( { observation }: Props ): Node => {
     <IconButton
       size={40}
       icon="pencil"
-      iconColor={colors.borderGray}
+      iconColor={colors.lightGray}
       onPress={async ( ) => {
         setLoading( true );
         await uploadObservation( observation );

src/components/PhotoImporter/PhotoGalleryImage.js

@@ -28,7 +28,7 @@ const PhotoGalleryImage = ( {
         <IconMaterial
           name="indeterminate-check-box"
           size={30}
-          color={colors.gray}
+          color={colors.darkGray}
         />
       );
     }

src/components/PlaceholderText.js

@@ -3,6 +3,7 @@
 import type { Node } from "react";
 import React from "react";
 import { Text } from "react-native";
+import colors from "styles/tailwindColors";
 
 type Props = {
   text: string,
@@ -10,7 +11,12 @@ type Props = {
 }
 
 const PlaceholderText = ( { text, style }: Props ): Node => (
-  <Text style={[{ color: "red", textTransform: "uppercase", fontSize: 30 }].concat( style )}>
+  <Text style={[{
+    color: colors.warningRed,
+    textTransform: "uppercase",
+    fontSize: 30
+  }].concat( style )}
+  >
     { text }
   </Text>
 );

src/components/SharedComponents/Buttons/Button.js

@@ -37,7 +37,7 @@ const setStyles = ( {
   } else if ( isPrimary ) {
     buttonClass = buttonClass.concat( " ", "bg-darkGray" );
   } else if ( isFocus ) {
-    buttonClass = buttonClass.concat( " ", "bg-focusGreen" );
+    buttonClass = buttonClass.concat( " ", "bg-inatGreen" );
   } else {
     buttonClass = buttonClass.concat(
       " ",

src/components/SharedComponents/InlineUser/InlineUser.js

@@ -30,7 +30,7 @@ const InlineUser = ( { user }: Props ): Node => {
           testID="InlineUser.NoInternetPicture"
           name="wifi-off"
           size={22}
-          color={colors.logInGray}
+          color={colors.darkGray}
         />
       );
     }
@@ -40,7 +40,7 @@ const InlineUser = ( { user }: Props ): Node => {
           testID="InlineUser.FallbackPicture"
           name="person"
           size={22}
-          color={colors.logInGray}
+          color={colors.darkGray}
         />
       );
     }

src/components/SharedComponents/InputField.js

@@ -33,6 +33,7 @@ const InputField = ( {
 
   return (
     // $FlowFixMe
+    // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
     <TextInput
       // don't use accessibility label here because screen reader
       // should read the text value (editable content) instead
@@ -48,7 +49,7 @@ const InputField = ( {
       placeholderTextColor={colors.black}
       secureTextEntry={type === "password"}
       selectTextOnFocus={Platform.OS === "android"}
-      className="border border-border h-8 mx-5 rounded-xl pl-3"
+      className="border border-lightGray h-8 mx-5 rounded-xl pl-3"
       textContentType={type} // iOS only
       value={text}
       testID={testID}

src/components/SharedComponents/PhotoCarousel.js

@@ -54,7 +54,7 @@ const PhotoCarousel = ( {
   }, [photoUris.length, deletePhotoMode] );
 
   const renderSkeleton = ( ) => ( savingPhoto ? (
-    <View className={`${imageClass} bg-midGray mt-12`}>
+    <View className={`${imageClass} bg-lightGray mt-12`}>
       <ActivityIndicator />
     </View>
   ) : null );
@@ -63,10 +63,11 @@ const PhotoCarousel = ( {
     if ( index === photoUris.length ) {
       return (
         <Pressable
+          accessibilityRole="button"
           onPress={handleAddEvidence}
-          className={`${imageClass} border border-midGray items-center justify-center mt-6`}
+          className={`${imageClass} border border-lightGray items-center justify-center mt-6`}
         >
-          <Icon name="add" size={40} color={colors.logInGray} />
+          <Icon name="add" size={40} color={colors.darkGray} />
         </Pressable>
       );
     }
@@ -74,6 +75,7 @@ const PhotoCarousel = ( {
     return (
       <>
         <Pressable
+          accessibilityRole="button"
           onLongPress={( ) => {
             if ( deletePhoto ) {
               setDeletePhotoMode( mode => !mode );
@@ -89,7 +91,7 @@ const PhotoCarousel = ( {
           className={classnames( imageClass, {
             "mt-12": containerStyle === "camera",
             "mt-6": containerStyle !== "camera",
-            "border border-selectionGreen border-4":
+            "border border-inatGreen border-4":
               selectedPhotoIndex === index
           } )}
         >
@@ -105,7 +107,7 @@ const PhotoCarousel = ( {
             >
               {deletePhotoMode && (
               <LinearGradient
-                className="bg-transparent absolute inset-0"
+                className="bg-lightGray absolute inset-0"
                 colors={["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"]}
               />
               )}

src/components/TaxonDetails/TaxonDetails.js

@@ -69,7 +69,7 @@ const TaxonDetails = ( ): React.Node => {
         <Text>{taxon.rank}</Text>
         <Text>{taxon.preferred_common_name}</Text>
         <Text>{taxon.name}</Text>
-        <Text className="text-lg text-grayText my-3">{ t( "ABOUT-taxon-header" ) }</Text>
+        <Text className="text-lg text-darkGray my-3">{ t( "ABOUT-taxon-header" ) }</Text>
         { taxon.wikipedia_summary && (
           <HTML
             contentWidth={width}
@@ -83,10 +83,10 @@ const TaxonDetails = ( ): React.Node => {
         >
           <Text className="my-3">{ t( "Read-more-on-Wikipedia" )}</Text>
         </Pressable>
-        <Text className="text-lg text-grayText my-3">{ t( "TAXONOMY-header" ) }</Text>
+        <Text className="text-lg text-darkGray my-3">{ t( "TAXONOMY-header" ) }</Text>
         {displayTaxonomyList}
-        <Text className="text-lg text-grayText my-3">{ t( "STATUS-header" ) }</Text>
-        <Text className="pb-32 text-lg text-grayText my-3">{ t( "SIMILAR-SPECIES-header" ) }</Text>
+        <Text className="text-lg text-darkGray my-3">{ t( "STATUS-header" ) }</Text>
+        <Text className="pb-32 text-lg text-darkGray my-3">{ t( "SIMILAR-SPECIES-header" ) }</Text>
       </>
     );
   };

src/components/UiLibrary.js

@@ -155,7 +155,7 @@ const UiLibrary = () => {
         <Heading2 className="my-2">Heading2</Heading2>
         <Heading3 className="my-2">Heading3</Heading3>
         <Heading4 className="my-2">Heading4</Heading4>
-        <Heading4 className="my-2 text-focusGreen">
+        <Heading4 className="my-2 text-inatGreen">
           Heading4 (non-default color)
         </Heading4>
         <Heading5 className="my-2">Heading5</Heading5>
@@ -207,7 +207,7 @@ const UiLibrary = () => {
 
         <Heading2>Special Icon buttons</Heading2>
         <View className="flex flex-row justify-between">
-          <View className="bg-secondary">
+          <View className="bg-darkGray">
             <Body2>CloseButton</Body2>
             <CloseButton />
           </View>

src/components/UserProfile/UserProfile.js

@@ -41,7 +41,7 @@ const UserProfile = ( ): React.Node => {
   );
 
   const showCount = ( count, label ) => (
-    <View className="w-1/4 border border-border">
+    <View className="w-1/4 border border-lightGray">
       <Text className="self-center">{count}</Text>
       <Text className="self-center">{label}</Text>
     </View>
@@ -50,7 +50,7 @@ const UserProfile = ( ): React.Node => {
   useEffect( ( ) => {
     const headerTitle = ( ) => <Text className="text-xl pb-2">{User.userHandle( user )}</Text>;
     const headerRight = ( ) => currentUser?.login === user?.login
-      && <RNPaperButton icon="pencil" textColor={colors.tertiary} />;
+      && <RNPaperButton icon="pencil" textColor={colors.lightGray} />;
 
     navigation.setOptions( {
       headerTitle,

src/i18n/l10n/en.ftl

@@ -739,6 +739,7 @@ Messages = Messages
 Observations = Observations
 Observe = Observe
 Open-drawer = Open drawer
+
 Sound-recorder = Sound recorder
 User = User { $userHandle }
 Observation-Name = Observation { $scientificName }

src/i18n/strings.ftl

@@ -739,6 +739,7 @@ Messages = Messages
 Observations = Observations
 Observe = Observe
 Open-drawer = Open drawer
+
 Sound-recorder = Sound recorder
 User = User { $userHandle }
 Observation-Name = Observation { $scientificName }

src/providers/INatPaperProvider.js

@@ -13,9 +13,12 @@ const theme = {
     ...DefaultTheme.colors,
     primary: colors.darkGray,
     onPrimary: colors.white,
-    secondary: colors.focusGreen,
+    secondary: colors.inatGreen, // TODO: change to accessibleGreen for accessibility
     onSecondary: colors.white,
+    tertiary: colors.black,
     background: colors.white,
+    onBackground: colors.darkGray,
+    outline: colors.lightGray,
     error: colors.warningRed,
     onError: colors.white
   }

src/styles/obsDetails/addID.js

@@ -27,7 +27,7 @@ const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
   },
   commentInputText: {
     borderWidth: 1,
-    borderColor: colors.gray,
+    borderColor: colors.darkGray,
     borderRadius: 10,
     paddingTop: 8,
     paddingBottom: 8,
@@ -81,10 +81,10 @@ const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
     marginBottom: 10
   },
   taxonSearchIcon: {
-    color: colors.gray
+    color: colors.darkGray
   },
   taxonResultInfoIcon: {
-    color: colors.gray
+    color: colors.darkGray
   },
   taxonResultSelectIcon: {
     color: colors.inatGreen

src/styles/obsDetails/obsDetails.js

@@ -27,7 +27,7 @@ const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
 
 const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
   activityItemBody: {
-    color: colors.logInGray
+    color: colors.darkGray
   }
 } );
 
@@ -35,7 +35,7 @@ const imageStyles: { [string]: ImageStyleProp } = StyleSheet.create( {
   smallIcon: {
     width: 15,
     height: 15,
-    tintColor: colors.logInGray
+    tintColor: colors.darkGray
   }
 } );
 

src/styles/observations/gridItem.js

@@ -25,7 +25,7 @@ const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
     height: 50
   },
   markReviewed: {
-    backgroundColor: colors.gray,
+    backgroundColor: colors.darkGray,
     opacity: 0.5
   },
   totalObsPhotos: {

src/styles/observations/uploadProgressBar.js

@@ -14,14 +14,14 @@ const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
   },
   progressBar: {
     marginTop: 14,
-    backgroundColor: colors.logInGray,
+    backgroundColor: colors.darkGray,
     width
   },
   grayContainer: {
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
     paddingTop: 21,
-    backgroundColor: colors.logInGray,
+    backgroundColor: colors.darkGray,
     alignItems: "center",
     height: "100%"
   },

src/styles/search/search.js

@@ -14,7 +14,7 @@ const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
     flexWrap: "nowrap",
     alignItems: "center",
     paddingVertical: 5,
-    borderBottomColor: colors.gray,
+    borderBottomColor: colors.darkGray,
     borderBottomWidth: 1
   },
   toggleRow: {

src/styles/sharedComponents/buttons/roundGrayButton.js

@@ -6,7 +6,7 @@ import colors from "styles/tailwindColors";
 
 const viewStyles: { [string]: ViewStyleProp } = StyleSheet.create( {
   grayButton: {
-    backgroundColor: colors.midGray,
+    backgroundColor: colors.darkGray,
     borderRadius: 40,
     alignSelf: "center",
     padding: 5
@@ -22,7 +22,7 @@ const textStyles: { [string]: TextStyleProp } = StyleSheet.create( {
     alignSelf: "center"
   },
   disabled: {
-    color: colors.midGray
+    color: colors.lightGray
   }
 } );
 

tailwind.config.js

@@ -1,9 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 
-const PRIMARY_DISABLED = "#C6DC98";
-const WARNING_DISABLED = "#B95F5E";
-const NEUTRAL_DISABLED = "#D3D3D3";
-
 module.exports = {
   content: ["index.js", "./src/**/*.js"],
   theme: {
@@ -89,29 +85,13 @@ module.exports = {
       }
     },
     colors: {
-      darkGray: "#454545",
-      warningRed: "#9B1010",
-      focusGreen: "#74AC00",
-      secondary: "#979797",
-      tertiary: "#C4C4C4",
       white: "#ffffff",
-      red: "#ff0000",
-      black: "#000000",
-      transparent: "#ff000000",
-      inatGreen: "#77b300",
-      inatGreenDisabled: "#cce2a4",
-      gray: "#393939",
-      lightGray: "#e8e8e8",
-      midGray: "#cccccc",
-      borderGray: "#d1d1d1",
-      grayText: "#999999",
-      logInGray: "#999999",
-      border: "#DBDBDB",
+      darkGray: "#454545",
+      inatGreen: "#74AC00",
       accessibleGreen: "#5D8017",
-      buttonPrimaryDisabled: PRIMARY_DISABLED,
-      buttonWarningDisabled: WARNING_DISABLED,
-      buttonNeutralDisabled: NEUTRAL_DISABLED,
-      selectionGreen: "#C1FF00",
+      warningRed: "#9B1010",
+      lightGray: "#E8E8E8",
+      black: "#000000",
       warningYellow: "#E6A939"
     },
     screens: {

tests/unit/components/SharedComponents/Divider/__snapshots__/Divider.test.js.snap

@@ -9,7 +9,7 @@ exports[`Divider should render correctly 1`] = `
           "height": 1,
         },
         Object {
-          "backgroundColor": "#e8e8e8",
+          "backgroundColor": "#E8E8E8",
         },
       ],
     ]

tests/unit/components/SharedComponents/Tabs/__snapshots__/Tabs.test.js.snap

@@ -204,7 +204,7 @@ Array [
             "height": 1,
           },
           Object {
-            "backgroundColor": "#e8e8e8",
+            "backgroundColor": "#E8E8E8",
           },
         ],
       ]

tests/unit/components/SharedComponents/UserIcon/__snapshots__/UserIcon.test.js.snap

@@ -30,13 +30,13 @@ exports[`UserIcon displays active user image correctly 1`] = `
           "borderTopWidth": 3,
         },
         Object {
-          "borderBottomColor": "#77b300",
-          "borderLeftColor": "#77b300",
-          "borderRightColor": "#77b300",
-          "borderTopColor": "#77b300",
+          "borderBottomColor": "#74AC00",
+          "borderLeftColor": "#74AC00",
+          "borderRightColor": "#74AC00",
+          "borderTopColor": "#74AC00",
         },
         Object {
-          "borderColor": "#77b300",
+          "borderColor": "#74AC00",
           "borderWidth": 3,
         },
       ],