Merge pull request #503 from lbryio/file-page-tweaks

some pre-redesign tweaks to the file page

app/src/component/relatedContent/index.js

@@ -14,7 +14,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  search: query => dispatch(doSearch(query, 10, undefined, true)),
+  search: query => dispatch(doSearch(query, 20, undefined, true)),
 });
 
 export default connect(

app/src/page/file/view.js

@@ -565,7 +565,13 @@ class FilePage extends React.PureComponent {
                   style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}
                   contentContainerstyle={showActions ? null : filePageStyle.scrollContent}
                   ref={(ref) => { this.scrollView = ref; }}>
-                  <Text style={filePageStyle.title} selectable={true}>{title}</Text>
+                  <View style={filePageStyle.titleRow}>
+                    <Text style={filePageStyle.title} selectable={true}>{title}</Text>
+                    <TouchableOpacity style={filePageStyle.descriptionToggle}
+                      onPress={() => this.setState({ showDescription: !this.state.showDescription })}>
+                      <Icon name={this.state.showDescription ? "caret-up" : "caret-down"} size={24} />
+                    </TouchableOpacity>
+                  </View>
                   {channelName &&
                     <View style={filePageStyle.channelRow}>
                       <View style={filePageStyle.publishInfo}>
@@ -593,10 +599,6 @@ class FilePage extends React.PureComponent {
                           style={[filePageStyle.actionButton, filePageStyle.bellButton]}
                           uri={fullChannelUri}
                           name={channelName} />
-                        <TouchableOpacity style={filePageStyle.descriptionToggle}
-                          onPress={() => this.setState({ showDescription: !this.state.showDescription })}>
-                          <Icon name={this.state.showDescription ? "caret-up" : "caret-down"} size={24} />
-                        </TouchableOpacity>
                       </View>
                     </View>
                   }

app/src/styles/fileList.js

@@ -39,7 +39,7 @@ const fileListStyle = StyleSheet.create({
   },
   title: {
     fontFamily: 'Inter-UI-SemiBold',
-    fontSize: (screenWidthPixels <= 720) ? 12 : 16
+    fontSize: (screenWidthPixels <= 720) ? 12 : 14
   },
   uri: {
     fontFamily: 'Inter-UI-SemiBold',
@@ -48,7 +48,7 @@ const fileListStyle = StyleSheet.create({
   },
   publisher: {
     fontFamily: 'Inter-UI-SemiBold',
-    fontSize: (screenWidthPixels <= 720) ? 12 : 14,
+    fontSize: (screenWidthPixels <= 720) ? 11 : 12,
     marginTop: (screenWidthPixels <= 720) ? 1 : 3,
     color: Colors.LbryGreen
   },
@@ -62,7 +62,7 @@ const fileListStyle = StyleSheet.create({
   },
   infoText: {
     fontFamily: 'Inter-UI-Regular',
-    fontSize: (screenWidthPixels <= 720) ? 12 : 14,
+    fontSize: (screenWidthPixels <= 720) ? 11 : 12,
     color: Colors.ChannelGrey
   },
   downloadInfo: {

app/src/styles/filePage.js

@@ -32,7 +32,8 @@ const filePageStyle = StyleSheet.create({
     alignItems: 'center',
     width: screenWidth,
     height: containedMediaHeightWithControls,
-    marginTop: 60
+    marginTop: 60,
+    marginBottom: -17
   },
   emptyClaimText: {
     fontFamily: 'Inter-UI-Regular',
@@ -42,8 +43,7 @@ const filePageStyle = StyleSheet.create({
     marginRight: 16
   },
   scrollContainer: {
-    flex: 1,
-    marginTop: -16
+    flex: 1
   },
   scrollContent: {
     paddingTop: 10
@@ -53,17 +53,23 @@ const filePageStyle = StyleSheet.create({
   },
   title: {
     fontFamily: 'Inter-UI-Bold',
-    fontSize: 20,
+    fontSize: 16,
+    flex: 18
+  },
+  titleRow: {
+    flexDirection: 'row',
     marginTop: 12,
-    marginLeft: 20,
-    marginRight: 20,
-    marginBottom: 8
+    marginBottom: 2,
+    marginLeft: 12,
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   channelRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginLeft: 20,
-    marginRight: 20,
+    marginLeft: 12,
+    marginRight: 12,
     marginBottom: 16,
   },
   subscriptionRow: {
@@ -76,7 +82,7 @@ const filePageStyle = StyleSheet.create({
   },
   channelName: {
     fontFamily: 'Inter-UI-SemiBold',
-    fontSize: 16,
+    fontSize: 14,
     color: Colors.LbryGreen
   },
   publishDateText: {
@@ -90,10 +96,10 @@ const filePageStyle = StyleSheet.create({
   description: {
     color: Colors.DescriptionGrey,
     fontFamily: 'Inter-UI-Regular',
-    fontSize: 16,
-    lineHeight: 20,
-    marginLeft: 20,
-    marginRight: 20,
+    fontSize: 13,
+    lineHeight: 18,
+    marginLeft: 12,
+    marginRight: 12,
     marginBottom: 16
   },
   thumbnail: {
@@ -171,7 +177,6 @@ const filePageStyle = StyleSheet.create({
     paddingRight: 16,
     paddingTop: 16,
     paddingBottom: 8,
-    marginTop: -14,
     width: '100%',
   },
   fileActions: {
@@ -286,7 +291,8 @@ const filePageStyle = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: 36,
-    height: 36
+    height: 36,
+    marginTop: -8
   },
   text: {
     fontFamily: 'Inter-UI-Regular',

app/src/styles/relatedContent.js

@@ -6,8 +6,8 @@ const relatedContentStyle = StyleSheet.create({
     flex: 1,
     paddingTop: 16,
     paddingBottom: 16,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingLeft: 16,
+    paddingRight: 16,
     borderTopColor: Colors.LighterGrey,
     borderTopWidth: 1
   },