Fix: small design fixes (keep-starknet-strange#134)

* Header component * Bottom bar icons * Feed & Profile * Move svgs to icons file
MSghais · May 30, 2024 · 0b18362 · 0b18362
1 parent 343faee
commit 0b18362
Show file tree

Hide file tree

Showing 15 changed files with 226 additions and 202 deletions.
diff --git a/JoyboyCommunity/assets/svgs/svgComponents/Copy.tsx b/JoyboyCommunity/assets/svgs/svgComponents/Copy.tsx
diff --git a/JoyboyCommunity/assets/svgs/svgComponents/Gallery.tsx b/JoyboyCommunity/assets/svgs/svgComponents/Gallery.tsx
diff --git a/JoyboyCommunity/assets/svgs/svgComponents/Gif.tsx b/JoyboyCommunity/assets/svgs/svgComponents/Gif.tsx
diff --git a/JoyboyCommunity/assets/svgs/svgComponents/Profile.tsx b/JoyboyCommunity/assets/svgs/svgComponents/Profile.tsx
diff --git a/JoyboyCommunity/assets/svgs/svgComponents/SendButton.tsx b/JoyboyCommunity/assets/svgs/svgComponents/SendButton.tsx
diff --git a/JoyboyCommunity/src/app/Router.tsx b/JoyboyCommunity/src/app/Router.tsx
@@ -4,11 +4,10 @@ import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {View} from 'react-native';
 import {useTheme} from 'styled-components/native';
 
-import {HomeIcon, IndicatorIcon, MessageIcon, NotificationIcon, SearchIcon} from '../assets/icons';
+import {HomeIcon, IndicatorIcon, MessageIcon, SearchIcon, UserIcon} from '../assets/icons';
 import Login from '../modules/login';
 import {CreatePost} from '../screens/CreatePost';
 import {Feed} from '../screens/Feed';
-import {Notifications} from '../screens/Notifications';
 import {PostDetail} from '../screens/PostDetail';
 import {Profile} from '../screens/Profile';
 import {useAuth} from '../store/auth';
@@ -57,7 +56,7 @@ const HomeBottomTabNavigator: React.FC = () => {
       />
 
       <HomeBottomTabsStack.Screen
-        name="UserProfile"
+        name="Notifications"
         component={Profile}
         initialParams={{publicKey}}
         options={{
@@ -75,19 +74,15 @@ const HomeBottomTabNavigator: React.FC = () => {
       />
 
       <HomeBottomTabsStack.Screen
-        name="Notifications"
-        component={Notifications}
+        name="Messages"
+        component={Profile}
         options={{
           tabBarActiveTintColor: 'white',
           tabBarInactiveTintColor: 'grey',
           tabBarIcon: ({focused}) => {
             return (
-              <View style={{flex: 1, alignItems: 'center', gap: 1, justifyContent: 'center'}}>
-                <NotificationIcon
-                  width={24}
-                  height={24}
-                  color={focused ? '#14142C' : '#1E2F3D80'}
-                />
+              <View style={{flex: 1, alignItems: 'center', gap: 4, justifyContent: 'center'}}>
+                <MessageIcon width={24} height={24} color={focused ? '#14142C' : '#1E2F3D80'} />
                 {focused && <IndicatorIcon color="#EC796B" width={6} height={6} />}
               </View>
             );
@@ -96,15 +91,16 @@ const HomeBottomTabNavigator: React.FC = () => {
       />
 
       <HomeBottomTabsStack.Screen
-        name="Messages"
+        name="UserProfile"
         component={Profile}
+        initialParams={{publicKey}}
         options={{
           tabBarActiveTintColor: 'white',
           tabBarInactiveTintColor: 'grey',
           tabBarIcon: ({focused}) => {
             return (
-              <View style={{flex: 1, alignItems: 'center', gap: 4, justifyContent: 'center'}}>
-                <MessageIcon width={24} height={24} color={focused ? '#14142C' : '#1E2F3D80'} />
+              <View style={{flex: 1, alignItems: 'center', gap: 1, justifyContent: 'center'}}>
+                <UserIcon width={24} height={24} color={focused ? '#14142C' : '#1E2F3D80'} />
                 {focused && <IndicatorIcon color="#EC796B" width={6} height={6} />}
               </View>
             );

diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx
@@ -106,3 +106,86 @@ export const UserIcon: React.FC<SvgProps> = (props) => (
     />
   </Svg>
 );
+
+export const CopyIcon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m16.596 20.699-2.445.647c-2.263.6-3.395.899-4.281.408-.887-.49-1.182-1.58-1.773-3.758l-1.462-5.391c-.59-2.179-.886-3.268-.367-4.13.52-.863 1.651-1.163 3.914-1.762l4-1.06c2.264-.598 3.395-.898 4.282-.407.886.49 1.182 1.58 1.772 3.758l1.468 5.413c.251.926.377 1.39.239 1.825m-5.347 4.457c.752-.2.758-.202 1.343-.704l2.743-2.355c.749-.642 1.123-.963 1.261-1.398m-5.347 4.457s.588-4.593 1.904-5.199c1.493-.687 3.443.742 3.443.742"
+      />
+      <Path
+        stroke="currentColor"
+        strokeWidth={1.5}
+        d="M17 5.001c-.064-1.073-.243-1.749-.752-2.233-.78-.742-2.03-.746-4.532-.754l-4.423-.013c-2.502-.007-3.753-.01-4.528.727-.775.737-.771 1.928-.764 4.31l.018 5.893c.008 2.381.011 3.572.79 4.314.78.742 2.031.746 4.533.753l.681.002"
+      />
+    </Svg>
+  );
+};
+
+export const GalleryIcon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        stroke="currentColor"
+        strokeWidth={1.5}
+        d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109C18.717 21.5 16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391C2.5 18.717 2.5 16.479 2.5 12Z"
+      />
+      <Path
+        stroke="currentColor"
+        strokeWidth={1.5}
+        d="M16.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <Path
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M16 22c-.62-2.225-2.066-4.218-4.123-5.666-2.22-1.561-5.005-2.387-7.861-2.331-.34-.001-.678.01-1.016.032"
+      />
+      <Path
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M13 18c1.701-1.327 3.535-2.007 5.386-2a7.792 7.792 0 0 1 3.114.662"
+      />
+    </Svg>
+  );
+};
+
+export const GifIcon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M14.86 22h-4.312c-3.291 0-4.937 0-6.08-.798a4.156 4.156 0 0 1-.863-.805c-.855-1.066-.855-2.6-.855-5.67v-2.545c0-2.963 0-4.445.473-5.628.761-1.903 2.37-3.403 4.41-4.113C8.9 2 10.49 2 13.667 2c1.816 0 2.723 0 3.448.252 1.166.406 2.085 1.263 2.52 2.35.27.676.27 1.523.27 3.216V10"
+      />
+      <Path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M2.75 12c0-1.84 1.506-3.333 3.364-3.333.672 0 1.464.116 2.117-.057a1.674 1.674 0 0 0 1.19-1.179c.174-.647.057-1.432.057-2.098C9.478 3.493 10.984 2 12.84 2M12.842 18h2.523m-4.949-4.15c-.126-.8-.281-.801-1.61-.85h-1.01c-.557 0-1.009.448-1.009 1v3c0 .552.452 1 1.01 1h1.816c.39 0 .803-.313.803-.7v-1.1c0-.11-.113-.304-.224-.304H9.068M12.842 13h1.261m0 0h1.262m-1.262 0v4.875M21.251 13h-2.523c-.557 0-1.009.448-1.009 1v1.5m0 0V18m0-2.5h2.523"
+      />
+    </Svg>
+  );
+};
+
+export const SendIcon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 56 56" fill="none" {...props}>
+      <Path
+        fill="currentColor"
+        d="M22 3.464a12 12 0 0 1 12 0l12.249 7.072a12 12 0 0 1 6 10.392v14.144a12 12 0 0 1-6 10.392L34 52.536a12 12 0 0 1-12 0L9.751 45.464a12 12 0 0 1-6-10.392V20.928a12 12 0 0 1 6-10.392L22 3.464Z"
+      />
+      <Path
+        fill="#fff"
+        d="M37.597 18.543c-.467-.504-1.2-.692-1.9-.76-.736-.07-1.617-.024-2.566.1-1.902.25-4.2.828-6.409 1.539-2.21.711-4.363 1.567-5.976 2.386-.802.409-1.499.821-2.005 1.218-.252.197-.482.41-.655.636-.165.216-.338.524-.336.894.006.972.668 1.659 1.373 2.12.72.47 1.657.825 2.589 1.103.941.281 1.931.499 2.783.675l.304.063c.514.106.771.16 1.013.087.242-.072.428-.258.8-.63l3.68-3.681a1 1 0 0 1 1.415 1.414l-3.433 3.433c-.379.379-.568.568-.64.814-.072.246-.014.507.102 1.03.448 2.024.838 3.697 1.226 4.823.227.657.483 1.227.806 1.646.337.438.796.77 1.4.796.376.017.69-.155.904-.315.225-.167.438-.393.635-.639.396-.495.812-1.18 1.226-1.97.832-1.59 1.713-3.722 2.459-5.915.745-2.193 1.366-4.48 1.665-6.38.149-.948.223-1.828.182-2.565-.04-.7-.188-1.434-.642-1.922Z"
+      />
+    </Svg>
+  );
+};
diff --git a/JoyboyCommunity/src/components/header/index.tsx b/JoyboyCommunity/src/components/header/index.tsx
@@ -0,0 +1,23 @@
+import {Image, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+import {JoyboyIcon} from '../../assets/icons';
+import {IconButton} from '../iconbutton';
+import styles from './styles';
+
+export const Header: React.FC = () => {
+  return (
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.logoContainer}>
+          <Image style={styles.logo} source={require('../../../assets/joyboy-logo.png')} />
+          <JoyboyIcon color="#14142C" width={96} height={16} />
+        </View>
+
+        <View style={styles.buttons}>
+          <IconButton icon="bell" size={20} />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
diff --git a/JoyboyCommunity/src/components/header/styles.ts b/JoyboyCommunity/src/components/header/styles.ts
@@ -0,0 +1,30 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+  },
+  content: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 16,
+  },
+
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  logo: {
+    width: 40,
+    height: 40,
+    marginRight: 8,
+  },
+
+  buttons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
diff --git a/JoyboyCommunity/src/components/index.ts b/JoyboyCommunity/src/components/index.ts
@@ -1,6 +1,7 @@
 export {Avatar, AvatarImage} from './avatar';
 export {Button} from './button';
 export {Divider} from './divider';
+export {Header} from './header';
 export {IconButton} from './iconbutton';
 export {Input} from './input';
 export {Menu} from './menu';

diff --git a/JoyboyCommunity/src/screens/CreatePost/index.tsx b/JoyboyCommunity/src/screens/CreatePost/index.tsx
@@ -3,11 +3,7 @@ import {useState} from 'react';
 import {Pressable, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 
-import CopyIcon from '../../../assets/svgs/svgComponents/Copy';
-import Gallery from '../../../assets/svgs/svgComponents/Gallery';
-import GifIcon from '../../../assets/svgs/svgComponents/Gif';
-import ProfileIcon from '../../../assets/svgs/svgComponents/Profile';
-import SendButton from '../../../assets/svgs/svgComponents/SendButton';
+import {CopyIcon, GalleryIcon, GifIcon, SendIcon, UserIcon} from '../../assets/icons';
 import {Divider, KeyboardAvoidingView, Typography} from '../../components';
 import {useSendNote} from '../../hooks/useNostr';
 import {useAuth} from '../../store/auth';
@@ -79,8 +75,9 @@ export const CreatePost: React.FC = () => {
 
       <TitleContainer>
         <Photo>
-          <ProfileIcon />
+          <UserIcon width={32} height={32} color="#1E2F3D" />
         </Photo>
+
         <TextInput
           style={{flex: 1, paddingTop: 10, paddingBottom: 10, fontSize: 16, lineHeight: 20}}
           autoFocus
@@ -93,19 +90,19 @@ export const CreatePost: React.FC = () => {
 
       <IconDiv>
         <SendbuttonContainer>
-          <SendButton width="56" height="56" />
+          <SendIcon width="56" height="56" color="#EC796B" />
         </SendbuttonContainer>
         <IconContainer>
           <TouchableOpacity>
-            <Gallery width="24" height="24" strokeWidth={1.5} stroke="#4B799F" />
+            <GalleryIcon width="24" height="24" color="#4B799F" />
           </TouchableOpacity>
 
           <TouchableOpacity>
-            <GifIcon width="24" height="24" strokeWidth={1.5} stroke="#4B799F" />
+            <GifIcon width="24" height="24" color="#4B799F" />
           </TouchableOpacity>
 
           <TouchableOpacity>
-            <CopyIcon width="24" height="24" strokeWidth={1.5} stroke="#4B799F" />
+            <CopyIcon width="24" height="24" color="#4B799F" />
           </TouchableOpacity>
         </IconContainer>
       </IconDiv>