Merge pull request #583 from cocrafts/tanle/improve-ui-1.2.1

chore: improve minor UI from 1.2.1
cocrafts · Jul 7, 2024 · e4058fa · e4058fa
2 parents 5144700 + b666236
commit e4058fa
Show file tree

Hide file tree

Showing 46 changed files with 217 additions and 141 deletions.
diff --git a/apps/wallet/src/components/CheckedInput.tsx b/apps/wallet/src/components/CheckedInput.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { InputProps } from '@walless/gui';
+import { Text } from '@walless/gui';
 import { Input } from '@walless/gui';
 
 type Props = {

diff --git a/apps/wallet/src/components/DrawerNavigation/views/DrawerItem.tsx b/apps/wallet/src/components/DrawerNavigation/views/DrawerItem.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { Fragment } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { PlatformPressable } from '@react-navigation/elements';
 import { Link, useTheme } from '@react-navigation/native';
+import { Text } from '@walless/gui';
 import Color from 'color';
 
 type Props = {

diff --git a/apps/wallet/src/components/StackContainer/Header.tsx b/apps/wallet/src/components/StackContainer/Header.tsx
@@ -1,12 +1,13 @@
 import type { FC } from 'react';
 import type { Insets } from 'react-native';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
 	interpolate,
 	useAnimatedStyle,
 	useSharedValue,
 } from 'react-native-reanimated';
+import { Text } from '@walless/gui';
 import { ChevronLeft, Hamburger } from '@walless/icons';
 
 export interface HeaderProps {
@@ -68,7 +69,7 @@ const styles = StyleSheet.create({
 		marginBottom: 12,
 		flexDirection: 'row',
 		alignItems: 'center',
-		gap: 12,
+		gap: 0,
 		opacity: 0.8,
 	},
 	burger: {
@@ -78,7 +79,7 @@ const styles = StyleSheet.create({
 	text: {
 		color: '#fff',
 		fontSize: 16,
-		fontWeight: 'bold',
+		fontWeight: '500',
 	},
 });
 

diff --git a/apps/wallet/src/features/Explorer/Header.tsx b/apps/wallet/src/features/Explorer/Header.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
-import { StyleSheet, Text } from 'react-native';
-import { Hoverable, View } from '@walless/gui';
+import { StyleSheet } from 'react-native';
+import { Hoverable, Text, View } from '@walless/gui';
 import { Eye, EyeOff, Settings } from '@walless/icons';
 import { appState } from 'state/app';
 import { setPrivacy } from 'state/runtime/config';

diff --git a/apps/wallet/src/features/Explorer/Highlights/Card.tsx b/apps/wallet/src/features/Explorer/Highlights/Card.tsx
@@ -1,4 +1,5 @@
-import { type FC, useEffect } from 'react';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import type { SharedValue, WithTimingConfig } from 'react-native-reanimated';
 import Animated, {
@@ -46,8 +47,10 @@ const Card: FC<Props> = ({
 			[0.08, -0.08],
 		);
 
+		const isHidden = index - currentIndex > 2;
+
 		return {
-			opacity: opacity.value,
+			opacity: isHidden ? 0 : opacity.value,
 			transform: [
 				{ translateX: xOffset.value + addingTranslateX },
 				{ scale: scale.value + addingScale },

diff --git a/apps/wallet/src/features/Explorer/Highlights/HighlightItem.tsx b/apps/wallet/src/features/Explorer/Highlights/HighlightItem.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { runtime } from '@walless/core';
+import { Text } from '@walless/gui';
 import { ArrowTopRight, Plus } from '@walless/icons';
 import type { WidgetDocument } from '@walless/store';
 import assets from 'utils/assets';

diff --git a/apps/wallet/src/features/Explorer/Highlights/LoveAndActiveCount.tsx b/apps/wallet/src/features/Explorer/Highlights/LoveAndActiveCount.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { Text } from '@walless/gui';
 import { Heart } from '@walless/icons';
 
 interface LoveAndActiveCountProps {

diff --git a/apps/wallet/src/features/Explorer/Highlights/index.tsx b/apps/wallet/src/features/Explorer/Highlights/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { StyleSheet, Text } from 'react-native';
-import { View } from '@walless/gui';
+import { StyleSheet } from 'react-native';
+import { Text, View } from '@walless/gui';
 import { mockWidgets } from 'state/widget';
 
 import CardCarousel from './CardCarousel';
@@ -11,7 +11,10 @@ const Highlights = () => {
 
 	return (
 		<View style={styles.container}>
-			<Text style={styles.title}>Today&apos;s Highlights</Text>
+			<View style={styles.titleContainer}>
+				<Text style={styles.title}>Today&apos;s Highlights</Text>
+				<Text style={styles.description}>Get started with these apps</Text>
+			</View>
 
 			<View style={styles.highlightList}>
 				<CardCarousel
@@ -36,15 +39,22 @@ const styles = StyleSheet.create({
 		flex: 1,
 		gap: 16,
 		minHeight: 200,
-		marginVertical: 8,
+		marginTop: 24,
 	},
 	highlightList: {
 		gap: 14,
 	},
+	titleContainer: {
+		gap: 4,
+		paddingHorizontal: 20,
+	},
 	title: {
 		fontSize: 18,
 		fontWeight: '500',
 		color: '#ffffff',
-		marginLeft: 20,
+	},
+	description: {
+		fontSize: 13,
+		color: '#A4B3C1',
 	},
 });
diff --git a/apps/wallet/src/features/Explorer/LoyaltyBar.tsx b/apps/wallet/src/features/Explorer/LoyaltyBar.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
-import { ImageBackground, StyleSheet, Text, View } from 'react-native';
-import { Button } from '@walless/gui';
+import { ImageBackground, StyleSheet, View } from 'react-native';
+import { Button, Text } from '@walless/gui';
 import { BlingBling } from '@walless/icons';
 import assets from 'utils/assets';
 import { navigate } from 'utils/navigation';
@@ -54,23 +54,26 @@ const styles = StyleSheet.create({
 		padding: 12,
 		flexDirection: 'row',
 		justifyContent: 'space-between',
+		alignItems: 'center',
 	},
 	leftContainer: {
 		flexDirection: 'row',
 		alignItems: 'center',
 		gap: 8,
 	},
 	leftTextContainer: {
-		height: '100%',
 		justifyContent: 'space-between',
 		paddingVertical: 3,
+		gap: 2,
 	},
 	highlightText: {
 		fontSize: 14,
 		fontWeight: '500',
+		color: '#222222',
 	},
 	subText: {
 		fontSize: 12,
+		color: '#222222',
 	},
 	blingContainer: {
 		backgroundColor: '#212F3C',
@@ -82,9 +85,9 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		backgroundColor: '#19232C',
-		borderRadius: 6,
+		borderRadius: 12,
 		paddingHorizontal: 12,
-		paddingVertical: 2,
+		paddingVertical: 10,
 	},
 });
 

diff --git a/apps/wallet/src/features/Explorer/Missions/MissionItem.tsx b/apps/wallet/src/features/Explorer/Missions/MissionItem.tsx
@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated from 'react-native-reanimated';
+import { Text } from '@walless/gui';
 import { Anchor } from '@walless/gui';
 
 interface MissionProps {

diff --git a/apps/wallet/src/features/Explorer/Missions/index.tsx b/apps/wallet/src/features/Explorer/Missions/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useRef } from 'react';
 import type { ViewStyle } from 'react-native';
-import { FlatList, StyleSheet } from 'react-native';
+import { FlatList, Platform, StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { View } from '@walless/gui';
 
@@ -33,7 +33,13 @@ const Missions: FC<Props> = ({ style }) => {
 
 	return (
 		<GestureDetector gesture={pan}>
-			<View style={[styles.container, style]}>
+			<View
+				style={[
+					styles.container,
+					Platform.OS === 'web' && styles.webContainer,
+					style,
+				]}
+			>
 				<FlatList
 					ref={scrollRef}
 					data={missions}
@@ -65,10 +71,10 @@ const Missions: FC<Props> = ({ style }) => {
 export default Missions;
 
 const styles = StyleSheet.create({
-	container: {
-		marginVertical: 8,
+	container: {},
+	webContainer: {
 		cursor: 'pointer',
-	},
+	} as never,
 	lastMissionContainer: {
 		marginRight: 16,
 	},

diff --git a/apps/wallet/src/features/Explorer/Widgets/CategoryButton.tsx b/apps/wallet/src/features/Explorer/Widgets/CategoryButton.tsx
@@ -74,8 +74,8 @@ const styles = StyleSheet.create({
 	container: {
 		paddingHorizontal: 11,
 		paddingVertical: 7,
-		borderWidth: 1,
-		borderRadius: 7,
+		borderWidth: 1.5,
+		borderRadius: 10,
 	},
 	title: {
 		fontSize: 12,

diff --git a/apps/wallet/src/features/Explorer/Widgets/WidgetItem.tsx b/apps/wallet/src/features/Explorer/Widgets/WidgetItem.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react';
-import { Image, StyleSheet, Text, View } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { runtime } from '@walless/core';
-import { Heart } from '@walless/icons';
+import { Text } from '@walless/gui';
 import type { WidgetDocument } from '@walless/store';
 import assets from 'utils/assets';
 import { useWidgets } from 'utils/hooks';
@@ -46,10 +46,10 @@ const WidgetItem: FC<WidgetItemProps> = ({ widget }) => {
 				<Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
 					{widget.name}
 				</Text>
-				<Text style={styles.description} numberOfLines={1} ellipsizeMode="tail">
+				<Text style={styles.description} numberOfLines={2} ellipsizeMode="tail">
 					{widget.storeMeta.description}
 				</Text>
-				<View style={styles.loveAndActiveContainer}>
+				{/* <View style={styles.loveAndActiveContainer}>
 					<View style={styles.loveAndActiveDisplay}>
 						<Heart colors={['#D93737', '#D93737']} size={12} />
 						<Text style={styles.loveText}>{widget.storeMeta.loveCount}</Text>
@@ -60,14 +60,14 @@ const WidgetItem: FC<WidgetItemProps> = ({ widget }) => {
 							{widget.storeMeta.activeCount}
 						</Text>
 					</View>
-				</View>
+				</View> */}
 			</View>
 			<TouchableOpacity
 				style={[styles.button, isAdded ? styles.openBtn : styles.addBtn]}
 				onPress={handleOnPress}
 			>
 				<Text style={isAdded ? styles.openBtnText : styles.addBtnText}>
-					{isAdded ? 'OPEN' : 'ADD'}
+					{isAdded ? 'Open' : 'Add'}
 				</Text>
 			</TouchableOpacity>
 		</View>
@@ -79,10 +79,7 @@ export default WidgetItem;
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
-		gap: 8,
-		backgroundColor: '#23313C',
-		padding: 8,
-		borderRadius: 8,
+		gap: 10,
 		alignItems: 'center',
 	},
 	coverImage: {
@@ -96,7 +93,7 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		color: '#ffffff',
-		fontSize: 16,
+		fontSize: 14,
 		fontWeight: '500',
 	},
 	loveAndActiveContainer: {
@@ -124,9 +121,9 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		alignSelf: 'center',
-		borderRadius: 6,
+		borderRadius: 8,
 		width: 62,
-		height: 28,
+		height: 30,
 		justifyContent: 'center',
 		alignItems: 'center',
 	},
@@ -139,13 +136,15 @@ const styles = StyleSheet.create({
 	openBtnText: {
 		color: '#19A3E1',
 		fontSize: 12,
+		fontWeight: '500',
 	},
 	addBtnText: {
 		color: '#ffffff',
 		fontSize: 12,
+		fontWeight: '500',
 	},
 	description: {
-		color: '#798997',
+		color: '#566573',
 		fontSize: 12,
 	},
 });
diff --git a/apps/wallet/src/features/Explorer/Widgets/index.tsx b/apps/wallet/src/features/Explorer/Widgets/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { WidgetType } from '@walless/core';
+import { Text } from '@walless/gui';
 import type { WidgetDocument } from '@walless/store';
 import { mockWidgets } from 'state/widget';
 
@@ -14,7 +15,12 @@ const Widgets = () => {
 
 	return (
 		<View style={styles.container}>
-			<Text style={styles.title}>Enhance your collection</Text>
+			<View style={styles.titleContainer}>
+				<Text style={styles.title}>Enhance your collection</Text>
+				<Text style={styles.description}>
+					Evolving your worlds filled with exciting events
+				</Text>
+			</View>
 			<CategoryButtons setWidgets={setWidgets} />
 			<ScrollView
 				style={styles.layoutList}
@@ -40,19 +46,26 @@ export default Widgets;
 const styles = StyleSheet.create({
 	container: {
 		gap: 16,
-		marginVertical: 8,
+		marginTop: 32,
 		paddingHorizontal: 16,
 	},
+	titleContainer: {
+		gap: 4,
+	},
 	title: {
 		fontSize: 18,
 		fontWeight: '500',
 		color: '#ffffff',
 	},
+	description: {
+		fontSize: 13,
+		color: '#A4B3C1',
+	},
 	layoutList: {
 		height: 340,
 	},
 	listStyle: {
-		gap: 10,
+		gap: 20,
 	},
 	noWidgetsText: {
 		color: '#ffffff',