Massive styling updates

CREDITS.md

@@ -0,0 +1,7 @@
+Big thanks to the community
+
+- [react-native](https://github.com/facebook/react-native)
+- [react-native-navigation](https://github.com/wix/react-native-navigation)
+- [react-native-interactable](https://github.com/wix/react-native-interactable)
+- [react-native-safari-view](https://github.com/naoufal/react-native-safari-view)
+- [Icons8](https://icons8.com)

ios/Hekla.xcodeproj/project.pbxproj

@@ -5,10 +5,11 @@
 	};
 	objectVersion = 46;
 	objects = {
+
 /* Begin PBXBuildFile section */
 		B0739A8F5C9048E9AC93D045 /* libPods-Hekla.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3988A5A05ABF10E5A9B33ED5 /* libPods-Hekla.a */; };
 		E31CF5D020CEFCE40036B5B7 /* RNNAVPlayer.m in Sources */ = {isa = PBXBuildFile; fileRef = E31CF5CF20CEFCE40036B5B7 /* RNNAVPlayer.m */; };
-		E33FD0F41FFBDBD900EB627A /* RNUeno.m in Sources */ = {isa = PBXBuildFile; fileRef = E33FD0F31FFBDBD900EB627A /* RNUeno.m */; };
+		E33FD0F41FFBDBD900EB627A /* RNHekla.m in Sources */ = {isa = PBXBuildFile; fileRef = E33FD0F31FFBDBD900EB627A /* RNHekla.m */; };
 		E3A2B8A61FEACEE70099C8F8 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = E3A2B89F1FEACEE70099C8F8 /* AppDelegate.m */; };
 		E3A2B8A71FEACEE70099C8F8 /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = E3A2B8A01FEACEE70099C8F8 /* LaunchScreen.xib */; };
 		E3A2B8A81FEACEE70099C8F8 /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = E3A2B8A21FEACEE70099C8F8 /* GoogleService-Info.plist */; };
@@ -28,8 +29,8 @@
 		DF940EB702F911EAF36780E6 /* Pods-UenoNativeStarterTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-UenoNativeStarterTests.debug.xcconfig"; path = "Pods/Target Support Files/Pods-UenoNativeStarterTests/Pods-UenoNativeStarterTests.debug.xcconfig"; sourceTree = "<group>"; };
 		E31CF5CE20CEFCDB0036B5B7 /* RNNAVPlayer.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNAVPlayer.h; sourceTree = "<group>"; };
 		E31CF5CF20CEFCE40036B5B7 /* RNNAVPlayer.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNAVPlayer.m; sourceTree = "<group>"; };
-		E33FD0F31FFBDBD900EB627A /* RNUeno.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNUeno.m; sourceTree = "<group>"; };
-		E33FD0F51FFBDBFB00EB627A /* RNUeno.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNUeno.h; sourceTree = "<group>"; };
+		E33FD0F31FFBDBD900EB627A /* RNHekla.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNHekla.m; sourceTree = "<group>"; };
+		E33FD0F51FFBDBFB00EB627A /* RNHekla.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNHekla.h; sourceTree = "<group>"; };
 		E3A2B89E1FEACEE70099C8F8 /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
 		E3A2B89F1FEACEE70099C8F8 /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
 		E3A2B8A11FEACEE70099C8F8 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
@@ -115,8 +116,8 @@
 				E3A2B8A31FEACEE70099C8F8 /* Images.xcassets */,
 				E3A2B8A41FEACEE70099C8F8 /* Info.plist */,
 				E3A2B8A51FEACEE70099C8F8 /* main.m */,
-				E33FD0F31FFBDBD900EB627A /* RNUeno.m */,
-				E33FD0F51FFBDBFB00EB627A /* RNUeno.h */,
+				E33FD0F31FFBDBD900EB627A /* RNHekla.m */,
+				E33FD0F51FFBDBFB00EB627A /* RNHekla.h */,
 				E31CF5CE20CEFCDB0036B5B7 /* RNNAVPlayer.h */,
 				E31CF5CF20CEFCE40036B5B7 /* RNNAVPlayer.m */,
 			);
@@ -279,7 +280,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				E3A2B8AB1FEACEE70099C8F8 /* main.m in Sources */,
-				E33FD0F41FFBDBD900EB627A /* RNUeno.m in Sources */,
+				E33FD0F41FFBDBD900EB627A /* RNHekla.m in Sources */,
 				E31CF5D020CEFCE40036B5B7 /* RNNAVPlayer.m in Sources */,
 				E3A2B8A61FEACEE70099C8F8 /* AppDelegate.m in Sources */,
 			);
@@ -341,7 +342,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution: Birkir Rafn Gudjonsson (5PD7JU2FJC)";
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 34;
-				DEVELOPMENT_TEAM = "5PD7JU2FJC";
+				DEVELOPMENT_TEAM = 5PD7JU2FJC;
 				INFOPLIST_FILE = Hekla/Info.plist;
 				INFOPLIST_OTHER_PREPROCESSOR_FLAGS = "-traditional";
 				INFOPLIST_PREFIX_HEADER = "${BUILD_DIR}/GeneratedInfoPlistDotEnv.h";

ios/Hekla/RNHekla.h

@@ -0,0 +1,5 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RNHekla : NSObject <RCTBridgeModule>
+
+@end

ios/Hekla/RNUeno.m → ios/Hekla/RNHekla.m

@@ -3,7 +3,7 @@
 #import "RNNElementFinder.h"
 #import "RNNElementView.h"
 #import "RNNAVPlayer.h"
-#import "RNUeno.h"
+#import "RNHekla.h"
 
 @import SafariServices;
 
@@ -15,7 +15,7 @@
   #endif
 #endif
 
-@implementation RNUeno
+@implementation RNHekla
 
 - (dispatch_queue_t) methodQueue
 {
@@ -72,9 +72,9 @@ - (BOOL) isSimulator {
  }
 }
 
-RCT_EXPORT_METHOD(openSafari:(NSString *)componentId url:(NSString *)url reactTag:(nonnull NSNumber *)reactTag) {
+RCT_EXPORT_METHOD(openSafari:(NSString *)componentId url:(NSString *)url readerMode:(nonnull NSNumber *)readerMode reactTag:(nonnull NSNumber *)reactTag) {
  UIViewController *vc = [ReactNativeNavigation findViewController:componentId];
- SFSafariViewController *safariViewController = [[SFSafariViewController alloc] initWithURL:[[NSURL alloc] initWithString:url]];
+  SFSafariViewController *safariViewController = [[SFSafariViewController alloc] initWithURL:[[NSURL alloc] initWithString:url] entersReaderIfAvailable:[readerMode boolValue]];
  (void)safariViewController.view;
  if ([reactTag intValue] >= 0) {
    if ([vc isKindOfClass:[RNNRootViewController class]]) {

patches/react-native-custom-tabs+0.1.7.patch

@@ -21,6 +21,6 @@ new file mode 100644
 +  s.header_dir          = 'ios'
 +  s.preserve_paths      = "ios/**"
 +  s.dependency      'React'
-+  s.source_files  = "ios/**/*.{h,m}"
++  s.source_files  = "ReactNativeCustomTabs/*.{h,m}"
 +  s.libraries     = "stdc++"
 +end

src/components/button/Button.styl

@@ -5,19 +5,19 @@
   }
 
   &__fill {
-    background-color: #007AFF;
+    background-color: var(--primary-color);
     border-radius: 4px;
   }
 }
 
 .text {
   font-size: 18px;
-  color: #007AFF;
+  color: var(--primary-color);
   text-align: center;
   padding: 12px;
 
   &__fill {
-    color: #FFFFFF;
+    color: var(--primary-text-color);
   }
 
   &__disabled {

src/components/button/Button.tsx

@@ -40,6 +40,7 @@ export default class Button extends React.Component<Props> {
     }
 
     const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+    console.log(styles);
 
     return (
       <Touchable

src/components/comment/Comment.styl

@@ -79,10 +79,15 @@ for color, i in $colors {
 
 .icon {
   &__more {
-    tint-color: #AAA;
+    tint-color: var(--content-divider-color);
 
+    margin-top: 2px;
     margin-right: 8px;
   }
+
+  &__expand {
+    tint-color: var(--content-text-lighter-color);
+  }
 }
 
 .parent {

src/components/format-text/FormatText.styl

@@ -9,20 +9,16 @@
 }
 
 .links {
-  margin-top: 15px;
-}
-
-.link {
-  color: blue;
+  margin-top: 16px;
 }
 
 .code {
   padding: 8px;
-  background-color: #EEE;
+  background-color: rgba(64, 64, 64, 0.5);
 
   &__text {
     font-family: 'Courier New';
-    color: #333;
+    color: var(--content-text-color);
   }
 }
 
@@ -33,9 +29,9 @@
 .quote {
   border-left-color: #AAA;
   border-left-width: 2px;
-  padding-left: 10px;
+  padding-left: 8px;
 
   &__text {
-    color: #AAA;
+    opacity: 0.85;
   }
 }

src/components/format-text/FormatText.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { View, Text, TextStyle } from 'react-native';
 import { autobind } from 'core-decorators';
 import MetaLink from 'components/meta-link/MetaLink';
-const styles = require('./FormatText.styl');
+import Link from './Link';
+import { theme } from 'styles';
+import { observer } from 'mobx-react';
+const styles = theme(require('./FormatText.styl'));
 
 interface Props {
   key?: string;
@@ -14,7 +17,8 @@ interface Props {
   testID?: string;
 }
 
-export default class FormatText extends React.PureComponent<Props> {
+@observer
+export default class FormatText extends React.Component<Props> {
 
   @autobind
   mapTextLine(line: string, index: number, lines: string[]) {
@@ -110,7 +114,7 @@ export default class FormatText extends React.PureComponent<Props> {
       }
 
       return (
-        <Text style={styles.link} key={index}>{isLink[2]}{' '}</Text>
+        <Link key={index}>{isLink[2]}{' '}</Link>
       );
     }
 

src/components/format-text/Link.styl

@@ -0,0 +1,3 @@
+.host {
+  color: var(--primary-color);
+}

src/components/format-text/Link.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { theme, getVar } from 'styles';
+import { observer } from 'mobx-react';
+import { autobind } from 'core-decorators';
+import UI from 'stores/UI';
+const styles = theme(require('./Link.styl'));
+
+interface Props {
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+@observer
+export default class Link extends React.Component<Props> {
+
+  @autobind
+  onPress() {
+    const url = String(this.props.children).trim();
+    UI.openURL(url);
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <Text onPress={this.onPress} style={[styles.host, UI.font(15)]}>
+        {children}
+      </Text>
+    );
+  }
+}

src/components/load-more-comments/LoadMoreComments.styl

@@ -22,7 +22,6 @@ $colors = #0D61AB, #E48203, #7AC528, #842A7C, #9A012D, #0D61AB, #E48203, #7AC528
 
   font-family: 'System';
   font-size: 14px;
-  font-style: italic;
   color: var(--primary-color);
 }
 
@@ -34,7 +33,8 @@ $colors = #0D61AB, #E48203, #7AC528, #842A7C, #9A012D, #0D61AB, #E48203, #7AC528
 }
 
 .icon__more {
-  margin-right: 0px;
+  tint-color: var(--primary-color);
+  margin-right: 16px;
 }
 
 for color, i in $colors {

src/components/load-more-comments/LoadMoreComments.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { View, Text, Image, TouchableHighlight, LayoutAnimation, StyleSheet } from 'react-native';
+import { View, Text, Image, TouchableHighlight } from 'react-native';
 import { autobind } from 'core-decorators';
 import Item from 'stores/models/Item';
-import { theme } from 'styles';
+import UI from 'stores/UI';
+import { theme, getVar } from 'styles';
+import { observer } from 'mobx-react';
 const styles = theme(require('./LoadMoreComments.styl'));
 
 type IItemType = typeof Item.Type;
@@ -15,7 +17,8 @@ interface Props {
   testID?: string;
 }
 
-export default class LoadMoreComments extends React.PureComponent<Props> {
+@observer
+export default class LoadMoreComments extends React.Component<Props> {
 
   @autobind
   onPress() {
@@ -35,11 +38,11 @@ export default class LoadMoreComments extends React.PureComponent<Props> {
         <TouchableHighlight
           onPress={this.onPress}
           activeOpacity={1}
-          underlayColor="#F2F1F6"
+          underlayColor={getVar('--content-bg-active-color')}
           style={styles.content}
         >
           <View style={[styles.container, styles[`level${item.level}`]]}>
-            <Text style={styles.text}>{total} more {total === 1 ? 'reply' : 'replies'} {item.by}</Text>
+            <Text style={[styles.text, UI.font(14)]}>{total} more {total === 1 ? 'reply' : 'replies'}</Text>
             <Image source={require('assets/icons/16/chevron-down.png')} style={styles.icon__more} />
           </View>
         </TouchableHighlight>

src/config.ts

@@ -6,7 +6,7 @@ import configEnvJs from './config.env.js'; // Generated module
 export default {
   ...config,
   ...configEnvJs,
-  ...NativeModules.RNUeno,
+  ...NativeModules.RNHekla,
   __native: config,
   __js: configEnvJs,
 };

src/screens/account/Account.tsx

@@ -75,6 +75,7 @@ export default class AccountScreen extends React.Component<Props> {
 
   onLogout() {
     Account.logout();
+    this.updateOptions();
   }
 
   @autobind

src/screens/account/Login.styl

@@ -1,6 +1,6 @@
 .host {
   flex: 1;
-  background-color: #ffffff;
+  background-color: var(--content-bg-color);
 }
 
 .container {
@@ -25,7 +25,7 @@
   font-family: 'System';
   font-size: 15px;
   text-align: center;
-  color: #666666;
+  color: var(--content-text-color);
 
   margin-bottom: 16px;
   padding: 0 30px;

src/screens/account/Login.tsx

@@ -6,7 +6,8 @@ import Button from 'components/button/Button';
 import { autobind } from 'core-decorators';
 import Account from 'stores/Account';
 import UI from 'stores/UI';
-const styles = require('./Login.styl');
+import { theme, getVar } from 'styles';
+const styles = theme(require('./Login.styl'));
 
 interface Props {
   testID?: string;

src/screens/account/components/Input.styl

@@ -1,9 +1,14 @@
 .input {
-  border: 1px solid #CDCDCD;
+  border: 1px solid;
+  border-top-color: var(--content-text-lighter-color);
+  border-bottom-color: var(--content-text-lighter-color);
+  border-left-color: var(--content-text-lighter-color);
+  border-right-color: var(--content-text-lighter-color);
   border-radius: 4px;
 }
 
 .textinput {
   font-size: 15px;
   padding: 12px;
+  color: var(--content-text-color);
 }