feat(phone/twitter): update modal

apps/phone/package.json

@@ -15,6 +15,7 @@
     "@mui/material": "^5.13.2",
     "@mui/styles": "^5.13.2",
     "@npwd/keyos": "workspace:^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.5",
     "class-variance-authority": "^0.4.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.7",

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

@@ -1,6 +1,6 @@
 import { memo, useCallback, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import Modal from '../../../ui/components/Modal';
+import Modal, { Modal2 } from '../../../ui/components/Modal';
 import { IMAGE_DELIMITER } from '../utils/images';
 import { isImageValid } from '@common/utils/isImageValid';
 import { useModal } from '../hooks/useModal';
@@ -21,6 +21,7 @@ import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
 import { toggleKeys } from '@ui/components';
 import { Box, styled } from '@mui/material';
 import { useWordFilter } from '@os/wordfilter/hooks/useWordFilter';
+import { NPWDButton } from '@npwd/keyos';
 
 const ButtonsContainer = styled(Box)({
   paddingBottom: '8px',
@@ -156,6 +157,38 @@ const AddTweetModal = () => {
 
   if (!ResourceConfig) return null;
 
+  return (
+    <Modal2 visible={modalVisible} handleClose={_handleClose}>
+      <TweetMessage
+        modalVisible={modalVisible}
+        onEnter={submitTweet}
+        message={message}
+        handleChange={handleMessageChange}
+      />
+      <ImagePrompt visible={showImagePrompt} value={link} handleChange={handleImageChange} />
+      <EmojiSelect visible={showEmoji} onEmojiClick={handleSelectEmoji} />
+      <ImageDisplay
+        visible={!showEmoji && images.length > 0}
+        images={images}
+        removeImage={removeImage}
+      />
+      <ButtonsContainer>
+        <IconButtons
+          onImageClick={
+            images.length < ResourceConfig.twitter.maxImages ? toggleShowImagePrompt : null
+          }
+          onEmojiClick={toggleShowEmoji}
+        />
+        <ControlButtons
+          showImagePrompt={showImagePrompt}
+          showEmoji={showEmoji}
+          onPrimaryClick={showImagePrompt ? addImage : submitTweet}
+          onCloseClick={showEmoji ? toggleShowEmoji : toggleShowImagePrompt}
+        />
+      </ButtonsContainer>
+    </Modal2>
+  );
+
   return (
     <Modal visible={modalVisible} handleClose={_handleClose}>
       <TweetMessage

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

@@ -1,4 +1,3 @@
-
 import { memo, useState } from 'react';
 import { Route, useLocation } from 'react-router-dom';
 import { AppWrapper } from '@ui/components';
@@ -20,8 +19,8 @@ import { useSetRecoilState } from 'recoil';
 import { twitterState } from '../hooks/state';
 import ModalBackground from './ModalBackground';
 import { WordFilterProvider } from '@os/wordfilter/providers/WordFilterProvider';
-import InjectDebugData from "@os/debug/InjectDebugData";
-import {TwitterEvents} from "@typings/twitter";
+import InjectDebugData from '@os/debug/InjectDebugData';
+import { TwitterEvents } from '@typings/twitter';
 
 const TwitterApp = () => {
   const setModalVisible = useSetRecoilState(twitterState.showCreateTweetModal);
@@ -44,7 +43,6 @@ const TwitterApp = () => {
         <WordFilterProvider>
           <AddTweetModal />
         </WordFilterProvider>
-        <ModalBackground />
         <LifeInvaderTitle />
         <AppContent>
           {promptProfileName ? (

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

@@ -1,15 +1,5 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Box, Button, styled } from '@mui/material';
-import { StatusButton } from '@ui/components/StatusButton';
-
-const ButtonsContainer = styled(Box)({
-  display: 'flex',
-  flexFlow: 'row nowrap',
-  justifyContent: 'flex-end',
-  alignItems: 'justify-content',
-  marginRight: '15px',
-});
+import { NPWDButton } from '@npwd/keyos';
 
 export const ControlButtons = ({ showImagePrompt, showEmoji, onCloseClick, onPrimaryClick }) => {
   const [t] = useTranslation();
@@ -19,21 +9,16 @@ export const ControlButtons = ({ showImagePrompt, showEmoji, onCloseClick, onPri
   const showCloseButton = showImagePrompt || showEmoji;
 
   return (
-    <ButtonsContainer>
-      <Button variant="contained" color="primary" onClick={onPrimaryClick}>
+    <div className="flex flex-row items-center justify-end space-x-2">
+      <NPWDButton variant="primary" size="sm" onClick={onPrimaryClick} className="bg-sky-500">
         {primaryButtonText}
-      </Button>
+      </NPWDButton>
       {showCloseButton && (
-        <StatusButton
-          style={{ marginLeft: '8px' }}
-          variant="contained"
-          color="error"
-          onClick={onCloseClick}
-        >
+        <NPWDButton className="bg-red-500" variant="primary" size="sm" onClick={onCloseClick}>
           {t('GENERIC.CLOSE')}
-        </StatusButton>
+        </NPWDButton>
       )}
-    </ButtonsContainer>
+    </div>
   );
 };
 

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

@@ -1,7 +1,5 @@
-import React, { useState } from 'react';
-import { Button, CircularProgress, Icon, Typography } from '@mui/material';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import FavoriteIcon from '@mui/icons-material/Favorite';
+import { useState } from 'react';
+import { CircularProgress } from '@mui/material';
 import { TwitterEvents } from '@typings/twitter';
 import fetchNui from '../../../../utils/fetchNui';
 import { ServerPromiseResp } from '@typings/common';
@@ -36,15 +34,15 @@ function LikeButton({ tweetId, isLiked, likes }) {
 
   if (loading) {
     return (
-      <Button disabled>
+      <NPWDButton disabled size="sm" variant="ghost">
         <CircularProgress size={22} />
-      </Button>
+      </NPWDButton>
     );
   }
 
   return (
-    <NPWDButton size="sm" variant="ghost" onClick={handleClick}>
-      <span className='mr-2'>
+    <NPWDButton size="sm" variant="ghost" onClick={handleClick} className="space-x-2">
+      <span>
         {liked ? (
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -61,10 +59,10 @@ function LikeButton({ tweetId, isLiked, likes }) {
             <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} />
+          <Heart className="text-sky-400" size={20} />
         )}
       </span>
-      <p className="text-neutral-900 dark:text-white">{likes}</p>
+      {likes > 0 && <p className="text-neutral-900 dark:text-white">{likes}</p>}
     </NPWDButton>
   );
 }

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

@@ -1,32 +1,22 @@
-import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import { Fab } from '@mui/material';
 import CreateIcon from '@mui/icons-material/Create';
 import { toggleKeys } from '@ui/components';
-import { styled } from '@mui/styles';
-
-const useStyles = makeStyles(() => ({
-  root: {
-    position: 'absolute',
-    bottom: '75px',
-    right: '10px',
-  },
-}));
+import { cn } from '@utils/css';
 
 export function TweetButton({ openModal }) {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <Fab
-        color="primary"
+    <div className="absolute bottom-[75px] right-[12px]">
+      <button
+        className={cn(
+          'flex h-14 w-14 items-center justify-center rounded-full text-white',
+          'focus:ring-opacity bg-sky-500 hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-400',
+        )}
         onClick={openModal}
         onMouseUp={() => {
           toggleKeys(false);
         }}
       >
         <CreateIcon />
-      </Fab>
+      </button>
     </div>
   );
 }

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

@@ -2,7 +2,7 @@ import React, { memo, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePhone } from '@os/phone/hooks/usePhone';
 import { getNewLineCount } from '../../utils/message';
-import { TextField } from '@ui/components/Input';
+import { NPWDTextarea, TextField } from '@ui/components/Input';
 import { styled } from '@mui/material';
 
 const MessageInput = styled(TextField)({
@@ -47,6 +47,15 @@ export const TweetMessage = ({ modalVisible, message, handleChange, onEnter }) =
       onEnter();
     }
   };
+
+  return (
+    <NPWDTextarea
+      value={message}
+      onChange={(e) => handleChange(e.currentTarget.value)}
+      className="min-h-20 w-full resize-none rounded-md border border-neutral-600 bg-neutral-700 p-2 text-base text-white outline-none focus:ring-2 focus:ring-sky-400"
+    />
+  );
+
   return (
     <MessageInput
       value={message}
@@ -58,6 +67,7 @@ export const TweetMessage = ({ modalVisible, message, handleChange, onEnter }) =
       }}
       onChange={(e) => handleChange(e.currentTarget.value)}
       onKeyPress={handleOnEnter}
+      fullWidth
       multiline
       placeholder={t('TWITTER.TWEET_MESSAGE_PLACEHOLDER')}
       inputRef={textFieldInputRef}

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

@@ -59,7 +59,8 @@ export const MockTweets: Tweet[] = [
     avatar_url: '',
     id: 112,
     images: 'https://i.projecterror.dev/K45dbT6vsaKtxVMW4F66VZ.webp',
-    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 🌱🔭",
+    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',

apps/phone/src/ui/components/Modal.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import makeStyles from '@mui/styles/makeStyles';
-import { Button, Paper, useTheme } from '@mui/material';
+import { Button, Dialog, DialogContent, Paper, useTheme } from '@mui/material';
+import * as DialogRadix from '@radix-ui/react-dialog';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -58,4 +59,17 @@ export const Modal: React.FC<ModalProps> = ({ children, visible, handleClose })
   );
 };
 
+export const Modal2 = ({ children, visible, handleClose }) => {
+  return (
+    <DialogRadix.Root open={visible} onOpenChange={handleClose}>
+      <DialogRadix.Portal container={document.getElementById('phone')}>
+        <DialogRadix.Overlay className="fixed inset-0" />
+        <DialogRadix.Content className="absolute left-[50%] top-[30%] max-h-[100vh] w-[80vw] max-w-[350px] translate-x-[-50%] translate-y-[-50%]  rounded-[6px] bg-neutral-800 p-[25px]">
+          {children}
+        </DialogRadix.Content>
+      </DialogRadix.Portal>
+    </DialogRadix.Root>
+  );
+};
+
 export default Modal;