feat: Implement usage of theming + dark mode (#600)

* feat: Text wrapper component for default theme text styles * feat: Use themed text where appropriate, themed buttons * fix: Skip ThemedText in "no-raw-text" lint * feat: themed messageboxes * fix: Rename text wrapper * feat: Theming for svgs * feat: More theming, dark mode onboarding * feat: Implement more theming * fix: Swap button borter * fix: Current location arrow * feat: Dark theme for compact map and map controls * fix: Renaming after resolving conflicts * feat: Theming on invitemodal * fix: Fixes status bar color and theme name (#604) * fix: update theme on colorscheme change * fix: border color regression * fix: Some adjustments on dark theme colors to provide better contrasts * fix: Text optional type prpo * feat: color adjustments Co-authored-by: Mikael Brevik <[email protected]>
AtB-AS · Oct 28, 2020 · 48964f3 · 48964f3
1 parent 908a671
commit 48964f3
Show file tree

Hide file tree

Showing 48 changed files with 537 additions and 278 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -19,7 +19,7 @@ module.exports = {
     'react-hooks/rules-of-hooks': 2, // early error
 
     // https://github.com/Intellicode/eslint-plugin-react-native
-    'react-native/no-raw-text': 2, // rather early error than JS bundle crash
+    'react-native/no-raw-text': [2, {skip: 'ThemedText'}], // rather early error than JS bundle crash
     'react-native/no-single-element-style-arrays': 1,
     'react-native/no-unused-styles': 1,
   },

diff --git a/src/ScreenHeader/animated-header.tsx b/src/ScreenHeader/animated-header.tsx
@@ -87,7 +87,7 @@ const useHeaderStyle = StyleSheet.createThemeHook((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     padding: theme.spacings.medium,
-    backgroundColor: theme.background.accent,
+    backgroundColor: theme.background.header,
   },
   iconContainerLeft: {
     position: 'absolute',

diff --git a/src/chat/use-chat-icon.tsx b/src/chat/use-chat-icon.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import Intercom from 'react-native-intercom';
 import {Chat, ChatUnread} from '../assets/svg/icons/actions';
 import useChatUnreadCount from './use-chat-unread-count';
-import colors from '../theme/colors';
 import {useRemoteConfig} from '../RemoteConfigContext';
+import {StyleSheet} from '../theme';
+import ThemeIcon from '../components/theme-icon';
 
 export default function useChatIcon() {
   const config = useRemoteConfig();
   const unreadCount = useChatUnreadCount();
+  const styles = useStyles();
 
   if (!config.enable_intercom) {
     return undefined;
@@ -22,7 +24,11 @@ export default function useChatIcon() {
         accessibilityRole="button"
         style={styles.chatContainer}
       >
-        {unreadCount ? <ChatUnread /> : <Chat />}
+        {unreadCount ? (
+          <ThemeIcon svg={ChatUnread} />
+        ) : (
+          <ThemeIcon svg={Chat} />
+        )}
       </View>
     ),
     onPress: () =>
@@ -32,13 +38,12 @@ export default function useChatIcon() {
   };
 }
 
-const styles = StyleSheet.create({
+const useStyles = StyleSheet.createThemeHook((theme) => ({
   chatContainer: {
     width: 36,
     height: 28,
-    backgroundColor: colors.secondary.cyan,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: 8,
+    borderRadius: theme.border.borderRadius.regular,
   },
-});
+}));
diff --git a/src/components/accessible-text/index.tsx b/src/components/accessible-text/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {Text, TextProps} from 'react-native';
+import {TextProps} from 'react-native';
+import Text from '../text';
 
 type LabelProps = TextProps & {
   prefix?: string;

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -64,15 +64,15 @@ export default Button;
 const useButtonStyle = StyleSheet.createThemeHook((theme: Theme) => ({
   button: {
     flexDirection: 'row',
-    padding: 12,
+    padding: theme.spacings.medium,
     alignItems: 'center',
-    borderRadius: 8,
-    backgroundColor: theme.background.accent,
-    marginBottom: 8,
+    borderRadius: theme.border.borderRadius.regular,
+    backgroundColor: theme.button.primary.bg,
+    marginBottom: theme.spacings.small,
   },
   icon: {
     position: 'absolute',
-    left: 12,
+    left: theme.spacings.medium,
   },
   buttonSecondary: {
     backgroundColor: 'transparent',
@@ -90,8 +90,8 @@ const useButtonStyle = StyleSheet.createThemeHook((theme: Theme) => ({
     alignItems: 'center',
   },
   text: {
-    fontSize: 16,
-    lineHeight: 20,
+    fontSize: theme.text.sizes.body,
+    lineHeight: theme.text.lineHeight.body,
     fontWeight: '600',
     color: theme.text.colors.primary,
   },

diff --git a/src/components/disappearing-header/index.tsx b/src/components/disappearing-header/index.tsx
@@ -20,12 +20,13 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import SvgBanner from '../../assets/svg/icons/other/Banner';
 import useChatIcon from '../../chat/use-chat-icon';
 import AnimatedScreenHeader from '../../ScreenHeader/animated-header';
 import LogoOutline from '../../ScreenHeader/LogoOutline';
 import {StyleSheet} from '../../theme';
 import {useLayout} from '../../utils/use-layout';
+import SvgBanner from '../../assets/svg/icons/other/Banner';
+import ThemeIcon from '../theme-icon';
 
 type Props = {
   renderHeader(isFullHeight: boolean): React.ReactNode;
@@ -186,7 +187,7 @@ const DisappearingHeader: React.FC<Props> = ({
           alternativeTitleVisible={showAltTitle}
           leftButton={{
             onPress: logoClick?.callback,
-            icon: <LogoOutline />,
+            icon: <ThemeIcon svg={LogoOutline} />,
             ...logoClick,
           }}
         />
@@ -274,7 +275,7 @@ const useThemeStyles = StyleSheet.createThemeHook((theme) => ({
     flexGrow: 1,
   },
   topBorder: {
-    backgroundColor: theme.background.accent,
+    backgroundColor: theme.background.header,
   },
   bannerContainer: {
     position: 'absolute',
@@ -296,7 +297,7 @@ const useThemeStyles = StyleSheet.createThemeHook((theme) => ({
     overflow: 'hidden',
     zIndex: 2,
     elevated: 1,
-    backgroundColor: theme.background.accent,
+    backgroundColor: theme.background.header,
     justifyContent: 'flex-end',
   },
   header__inner: {

diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -1,6 +1,5 @@
 import React, {useState, useRef, forwardRef} from 'react';
 import {
-  Text,
   TextInput,
   TextInputProperties,
   StyleProp,
@@ -14,6 +13,8 @@ import {StyleSheet, useTheme} from '../../theme';
 import colors from '../../theme/colors';
 import {Close} from '../../assets/svg/icons/actions';
 import insets from '../../utils/insets';
+import Text from '../text';
+import ThemeIcon from '../theme-icon';
 
 type FocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 
@@ -29,8 +30,8 @@ const Input = forwardRef<TextInput, InputProps>(
     {label, containerStyle, onFocus, onBlur, showClear, onClear, ...props},
     ref,
   ) => {
-    const {theme} = useTheme();
-    const style = useInputStyle(theme);
+    const {theme, themeName} = useTheme();
+    const style = useInputStyle(theme, themeName);
     const [isFocused, setIsFocused] = useState(Boolean(props?.autoFocus));
 
     const onFocusEvent = (e: FocusEvent) => {
@@ -66,7 +67,7 @@ const Input = forwardRef<TextInput, InputProps>(
               hitSlop={insets.all(8)}
               onPress={onClear}
             >
-              <Close />
+              <ThemeIcon svg={Close} />
             </TouchableOpacity>
           </View>
         ) : null}
@@ -83,22 +84,22 @@ const useInputStyle = StyleSheet.createTheme((theme) => ({
     backgroundColor: theme.background.level1,
     color: theme.text.colors.primary,
     borderWidth: 1,
-    borderRadius: 4,
+    borderRadius: theme.border.borderRadius.small,
     paddingLeft: 60,
     paddingRight: 40,
-    padding: 12,
-    fontSize: 16,
+    padding: theme.spacings.medium,
+    fontSize: theme.text.sizes.body,
   },
   container: {
-    marginBottom: 12,
+    marginBottom: theme.spacings.medium,
     flexDirection: 'column',
     justifyContent: 'center',
   },
   label: {
     position: 'absolute',
-    left: 12,
-    fontSize: 14,
-    lineHeight: 20,
+    left: theme.spacings.medium,
+    fontSize: theme.text.sizes.lead,
+    lineHeight: theme.text.lineHeight.body,
   },
   inputClear: {
     position: 'absolute',

diff --git a/src/components/location-icon/index.tsx b/src/components/location-icon/index.tsx
@@ -10,29 +10,29 @@ import {
 import {Location} from '../../favorites/types';
 import {Category} from '../../sdk';
 import {SvgProps} from 'react-native-svg';
+import ThemeIcon from '../theme-icon';
 
 const LocationIcon = ({
   location,
-  fill = 'black',
   multiple,
 }: {
   location: Location;
   fill?: string;
   multiple?: boolean;
 }) => {
   const svgProps = {
-    fill,
     width: 20,
   };
   switch (location.layer) {
     case 'address':
-      return <MapPointPin {...svgProps} />;
+      return <ThemeIcon svg={MapPointPin} {...svgProps} />;
     case 'venue':
       const venueIconTypes = location.category
         .map(mapCategoryToVenueIconType)
         .filter((v, i, arr) => arr.indexOf(v) === i); // get distinct values
 
-      if (!venueIconTypes.length) return <MapPointPin {...svgProps} />;
+      if (!venueIconTypes.length)
+        return <ThemeIcon svg={MapPointPin} {...svgProps} />;
 
       return multiple ? (
         <>{venueIconTypes.map((it) => mapTypeToIconComponent(it, svgProps))}</>
@@ -41,7 +41,7 @@ const LocationIcon = ({
       );
 
     default:
-      return <MapPointPin {...svgProps} />;
+      return <ThemeIcon svg={MapPointPin} {...svgProps} />;
   }
 };
 
@@ -52,32 +52,54 @@ const mapTypeToIconComponent = (
   switch (iconType) {
     case 'bus':
       return (
-        <BusSide accessibilityLabel="Bussholdeplass" key="bus" {...svgProps} />
+        <ThemeIcon
+          svg={BusSide}
+          accessibilityLabel="Bussholdeplass"
+          key="bus"
+          {...svgProps}
+        />
       );
     case 'tram':
       return (
-        <TramSide
+        <ThemeIcon
+          svg={TramSide}
           accessibilityLabel="Trikkeholdeplass"
           key="tram"
           {...svgProps}
         />
       );
     case 'rail':
       return (
-        <TrainSide accessibilityLabel="Togstasjon" key="rail" {...svgProps} />
+        <ThemeIcon
+          svg={TrainSide}
+          accessibilityLabel="Togstasjon"
+          key="rail"
+          {...svgProps}
+        />
       );
     case 'airport':
       return (
-        <PlaneSide accessibilityLabel="Flyplass" key="airport" {...svgProps} />
+        <ThemeIcon
+          svg={PlaneSide}
+          accessibilityLabel="Flyplass"
+          key="airport"
+          {...svgProps}
+        />
       );
     case 'boat':
       return (
-        <FerrySide accessibilityLabel="Fergeleie" key="boat" {...svgProps} />
+        <ThemeIcon
+          svg={FerrySide}
+          accessibilityLabel="Fergeleie"
+          key="boat"
+          {...svgProps}
+        />
       );
     case 'unknown':
     default:
       return (
-        <MapPointPin
+        <ThemeIcon
+          svg={MapPointPin}
           accessibilityLabel="Lokasjon"
           key="unknown"
           {...svgProps}

diff --git a/src/components/map/BackArrow.tsx b/src/components/map/BackArrow.tsx
@@ -7,6 +7,7 @@ import insets from '../../utils/insets';
 import shadows from './shadows';
 
 const BackArrow: React.FC<{onBack(): void}> = ({onBack}) => {
+  const styles = useStyles();
   return (
     <TouchableOpacity
       accessibilityLabel="Gå tilbake"
@@ -21,16 +22,16 @@ const BackArrow: React.FC<{onBack(): void}> = ({onBack}) => {
   );
 };
 
-const styles = StyleSheet.create({
+const useStyles = StyleSheet.createThemeHook((theme) => ({
   backArrow: {
-    backgroundColor: colors.primary.gray,
-    borderRadius: 8,
+    backgroundColor: theme.button.primary2.bg,
+    borderRadius: theme.border.borderRadius.regular,
     justifyContent: 'center',
     alignItems: 'center',
     width: 36,
     height: 28,
     ...shadows,
   },
-});
+}));
 
 export default BackArrow;