feat(phone/twitter): more ui changes

apps/phone/src/apps/twitter/components/LifeInvaderApp.tsx → apps/phone/src/apps/twitter/components/TwitterApp.tsx

@@ -6,7 +6,7 @@ import { AppContent } from '@ui/components/AppContent';
 import TweetListContainer from './tweet/TweetListContainer';
 import AddTweetModal from './AddTweetModal';
 import TweetButton from './buttons/TweetButton';
-import { LifeInvaderTitle } from './LifeInvaderTitle';
+import { LifeInvaderTitle } from './TwitterTitle';
 import BottomNavigation from './BottomNavigation';
 import TwitterProfile from './profile/Profile';
 import TwitterSearch from './TwitterSearch';
@@ -23,7 +23,7 @@ import { WordFilterProvider } from '@os/wordfilter/providers/WordFilterProvider'
 import InjectDebugData from "@os/debug/InjectDebugData";
 import {TwitterEvents} from "@typings/twitter";
 
-const LifeInvaderApp = () => {
+const TwitterApp = () => {
   const setModalVisible = useSetRecoilState(twitterState.showCreateTweetModal);
   const [activePage, setActivePage] = useState(0);
   const { profile } = useProfile();
@@ -65,7 +65,7 @@ const LifeInvaderApp = () => {
     </TwitterThemeProvider>
   );
 };
-export default memo(LifeInvaderApp);
+export default memo(TwitterApp);
 
 InjectDebugData<any>(
   [

apps/phone/src/apps/twitter/components/LifeInvaderContainer.tsx → apps/phone/src/apps/twitter/components/TwitterContainer.tsx

@@ -1,11 +1,11 @@
 import { Suspense } from 'react';
-import LifeInvaderApp from './LifeInvaderApp';
+import TwitterApp from './TwitterApp';
 import { LoadingSpinner } from '@ui/components/LoadingSpinner';
 
 const LifeInvaderContainer = () => {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      <LifeInvaderApp />
+      <TwitterApp />
     </Suspense>
   );
 };

apps/phone/src/apps/twitter/components/TwitterTitle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Paper from '@mui/material/Paper';
+import { styled } from '@mui/material';
+import { Twitter } from 'lucide-react';
+
+export function LifeInvaderTitle() {
+  return (
+    <div className='h-[50px] w-full flex nowrap flex-row justify-center items-center bg-neutral-700 rounded border border-neutral-600'>
+      <Twitter size={24} className='text-sky-400'/>
+    </div>
+  );
+}

apps/phone/src/apps/twitter/components/buttons/LikeButton.tsx

@@ -8,6 +8,8 @@ import { ServerPromiseResp } from '@typings/common';
 import { useTranslation } from 'react-i18next';
 import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
 import { useTwitterActions } from '@apps/twitter/hooks/useTwitterActions';
+import { NPWDButton } from '@npwd/keyos';
+import { Heart } from 'lucide-react';
 
 function LikeButton({ tweetId, isLiked, likes }) {
   const [liked, setLiked] = useState(isLiked);
@@ -41,14 +43,29 @@ function LikeButton({ tweetId, isLiked, likes }) {
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      startIcon={liked ? <FavoriteIcon color="primary" /> : <FavoriteBorderIcon />}
-    >
-      <Typography color="#bfbfbf" fontSize="16px">
-        {likes}
-      </Typography>
-    </Button>
+    <NPWDButton size="sm" variant="ghost" onClick={handleClick}>
+      <span className='mr-2'>
+        {liked ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            className="text-sky-400"
+          >
+            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+          </svg>
+        ) : (
+          <Heart className='text-sky-400' size={20} />
+        )}
+      </span>
+      <p className="text-neutral-900 dark:text-white">{likes}</p>
+    </NPWDButton>
   );
 }
 

apps/phone/src/apps/twitter/components/buttons/ReplyButton.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { useSetRecoilState } from 'recoil';
-import { Button } from '@mui/material';
-import ReplyIcon from '@mui/icons-material/Reply';
 import { toggleKeys } from '@ui/components';
 import { twitterState } from '../../hooks/state';
+import { NPWDButton } from '@npwd/keyos';
+import { Reply } from 'lucide-react';
 
 export const ReplyButton = ({ profile_name }) => {
   const setModalVisible = useSetRecoilState(twitterState.showCreateTweetModal);
@@ -15,14 +14,16 @@ export const ReplyButton = ({ profile_name }) => {
   };
 
   return (
-    <Button
+    <NPWDButton
+      size="sm"
+      variant="ghost"
       onClick={handleClick}
       onMouseUp={() => {
         toggleKeys(false);
       }}
     >
-      <ReplyIcon />
-    </Button>
+      <Reply size={20} className='text-sky-400' />
+    </NPWDButton>
   );
 };
 

apps/phone/src/apps/twitter/components/buttons/RetweetButton.tsx

@@ -1,31 +1,25 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CircularProgress, Button } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import { Repeat } from '@mui/icons-material';
 import { TwitterEvents } from '@typings/twitter';
 import fetchNui from '../../../../utils/fetchNui';
 import { ServerPromiseResp } from '@typings/common';
 import { useTranslation } from 'react-i18next';
 import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
+import { NPWDButton } from '@npwd/keyos';
+import { Repeat } from 'lucide-react';
 
 interface IProps {
   tweetId: number;
   retweetId: string;
   isRetweet: boolean | number;
 }
 
-const useStyles = makeStyles((theme) => ({
-  iconFilled: {
-    color: theme.palette.primary.main,
-  },
-}));
 
 const LOADING_TIME = 1250;
 
 export const RetweetButton = ({ tweetId, isRetweet, retweetId }: IProps) => {
   const [retweeted, setRetweeted] = useState(false);
   const [loading, setLoading] = useState(false);
-  const classes = useStyles();
   const { t } = useTranslation();
   const { addAlert } = useSnackbar();
 
@@ -65,13 +59,11 @@ export const RetweetButton = ({ tweetId, isRetweet, retweetId }: IProps) => {
     );
   }
 
-  const className = retweeted ? classes.iconFilled : '';
-
   return (
-    <Button onClick={handleClick}>
-      <Repeat className={className} />
-    </Button>
-  );
+    <NPWDButton onClick={handleClick} size='sm' variant='ghost'>
+      <Repeat size={20} className='text-sky-400' />
+    </NPWDButton>
+  )
 };
 
 export default RetweetButton;

apps/phone/src/apps/twitter/components/tweet/ShowMore.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Menu, MenuItem } from '@mui/material';
-import MoreIcon from '@mui/icons-material/MoreVert';
+import { Menu, MenuItem } from '@mui/material';
 import { usePhone } from '@os/phone/hooks/usePhone';
 import ReportButton from '../buttons/ReportButton';
 import { TwitterEvents } from '@typings/twitter';
@@ -10,6 +9,8 @@ import { ServerPromiseResp } from '@typings/common';
 import { useTwitterActions } from '../../hooks/useTwitterActions';
 import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
 import { styled } from '@mui/styles';
+import { NPWDButton } from '@npwd/keyos';
+import { MoreVertical } from 'lucide-react';
 
 const StyledMenu = styled((props) => (
   <Menu
@@ -70,14 +71,16 @@ export const ShowMore = ({ id, isReported, isMine }) => {
 
   return (
     <>
-      <Button
+      <NPWDButton
         aria-controls="simple-menu"
         aria-haspopup="true"
+        size="sm"
+        variant="ghost"
         onClick={_handleClick}
         style={{ marginRight: 15 }}
       >
-        <MoreIcon />
-      </Button>
+        <MoreVertical size={20} className="text-sky-400" />
+      </NPWDButton>
       <StyledMenu
         id="simple-menu"
         anchorEl={anchorEl}

apps/phone/src/apps/twitter/components/tweet/Tweet.tsx

@@ -14,14 +14,10 @@ import { usePhone } from '@os/phone/hooks/usePhone';
 import Retweet from './Retweet';
 import ShowMore from './ShowMore';
 import {
-  TweetButtonContainer,
   TweetContent,
   TweetContentPrimary,
   TweetDate,
-  TweetItem,
   TweetItemContainer,
-  TweetMessage,
-  TweetProfile,
 } from './Tweet.styles';
 
 interface TweetProps {
@@ -73,7 +69,7 @@ export const Tweet: React.FC<TweetProps> = ({ tweet, imageOpen, setImageOpen })
   const avatarUrl = isRetweet ? retweetAvatarUrl : avatar_url;
 
   return (
-    <TweetItem divider>
+    <li className="flex w-full flex-col flex-nowrap overflow-x-hidden px-2 pt-6 border-b border-neutral-200 dark:border-neutral-800 pb-3">
       {isRetweet && <Retweet profileName={profile_name} />}
       <TweetItemContainer>
         {enableAvatars && (
@@ -85,28 +81,29 @@ export const Tweet: React.FC<TweetProps> = ({ tweet, imageOpen, setImageOpen })
         )}
         <TweetContent>
           <TweetContentPrimary>
-            <TweetProfile>{formattedProfileName}</TweetProfile>
+            <p className='text-sky-400 text-base font-bold'>{formattedProfileName}</p>
             <TweetDate variant="body2" color="textSecondary">
               {secondsToHumanReadable(t, seconds_since_tweet)}
             </TweetDate>
           </TweetContentPrimary>
-          <TweetMessage
+          <p
+            className="text-sm text-neutral-900 dark:text-white"
             dangerouslySetInnerHTML={{
               __html: sanitizedMessage,
             }}
           />
           {enableImages && <ImageDisplay visible images={images} />}
-          <TweetButtonContainer>
+          <div className='flex flex-nowrap flex-row justify-between w-full mt-4'>
             <ReplyButton profile_name={profile_name} />
             <LikeButton likes={likes} tweetId={id} isLiked={isLiked} />
             {ResourceConfig.twitter.allowRetweet && !isMine && (
               <RetweetButton tweetId={id} retweetId={retweetId} isRetweet={isRetweet} />
             )}
             <ShowMore isMine={isMine} isReported={isReported} id={id} />
-          </TweetButtonContainer>
+          </div>
         </TweetContent>
       </TweetItemContainer>
-    </TweetItem>
+    </li>
   );
 };
 

apps/phone/src/apps/twitter/components/tweet/TweetList.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useState } from 'react';
 import Tweet from './Tweet';
 import { Virtuoso } from 'react-virtuoso';
 import { FormattedTweet, GetTweet, TwitterEvents } from '@typings/twitter';
-import Backdrop from '@ui/components/Backdrop';
+
 import { ServerPromiseResp } from '@typings/common';
 import fetchNui from '@utils/fetchNui';
 import { processTweet } from '@apps/twitter/utils/tweets';
@@ -70,7 +70,7 @@ export function TweetList({ tweets }: { tweets: FormattedTweet[] }) {
   };
 
   return (
-    <>
+    <ul className='h-full divide-y divide-blue-200'>
       <Virtuoso
         style={{ height: '100%' }}
         data={tweetsData}
@@ -81,7 +81,7 @@ export function TweetList({ tweets }: { tweets: FormattedTweet[] }) {
         }}
         components={{ Footer }}
       />
-    </>
+    </ul>
   );
 }
 

apps/phone/src/apps/twitter/utils/constants.ts

@@ -25,6 +25,7 @@ export const MockTweets: Tweet[] = [
     profile_name: 'chip',
     profile_id: 29,
     isMine: true,
+    likes: 0,
     isLiked: false,
     retweetId: '',
     isRetweet: false,
@@ -51,13 +52,14 @@ export const MockTweets: Tweet[] = [
     isRetweet: false,
     seconds_since_tweet: 1639,
     retweetProfileName: '',
+    likes: 3,
     retweetAvatarUrl: '',
     isReported: false,
     retweetIdentifier: '',
     avatar_url: '',
     id: 112,
     images: 'https://i.projecterror.dev/K45dbT6vsaKtxVMW4F66VZ.webp',
-    message: 'Angular is best',
+    message: "Exploring the wonders of our world 🌍 and beyond 🚀! From the depths of the ocean to the mysteries of space, there's so much to discover. Let's cherish our planet, promote science and education, and work together for a sustainable future. #DiscoverEarth #ScienceForAll 🌱🔭",
     createdAt: '2021-12-01 00:42:03',
     updatedAt: '2021-12-01 00:42:03',
     identifier: 'sdfjsadfafjadfjas',
@@ -75,6 +77,7 @@ export const MockTweets: Tweet[] = [
     retweetAvatarUrl: '',
     isReported: false,
     retweetIdentifier: '',
+    likes: 123,
     avatar_url: '',
     id: 110,
     message: 'let me introduce weeb core',