tweak(phone/twitter): search input update & colors

project-error · Jan 15, 2024 · ee7aba0 · ee7aba0
1 parent 5a3f9ba
commit ee7aba0
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 79 deletions.
diff --git a/apps/phone/src/apps/twitter/components/AddTweetModal.tsx b/apps/phone/src/apps/twitter/components/AddTweetModal.tsx
@@ -21,7 +21,6 @@ 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',
@@ -188,38 +187,6 @@ const AddTweetModal = () => {
       </ButtonsContainer>
     </Modal2>
   );
-
-  return (
-    <Modal 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>
-    </Modal>
-  );
 };
 
 export default memo(AddTweetModal);
diff --git a/apps/phone/src/apps/twitter/components/BottomNavigation.tsx b/apps/phone/src/apps/twitter/components/BottomNavigation.tsx
@@ -1,9 +1,6 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 import { BottomNavigation, BottomNavigationAction, styled } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import SearchIcon from '@mui/icons-material/Search';
-import ProfileIcon from '@mui/icons-material/Person';
+import { Home, Search, UserRound } from 'lucide-react';
 
 const Navigation = styled(BottomNavigation)({
   width: '100%',
@@ -12,9 +9,9 @@ const Navigation = styled(BottomNavigation)({
 export function TwitterBottomNavigation({ activePage, handleChange }) {
   return (
     <Navigation value={activePage} onChange={handleChange}>
-      <BottomNavigationAction component={Link} to="/twitter" icon={<HomeIcon />} />
-      <BottomNavigationAction component={Link} to="/twitter/search" icon={<SearchIcon />} />
-      <BottomNavigationAction component={Link} to="/twitter/profile" icon={<ProfileIcon />} />
+      <BottomNavigationAction component={Link} to="/twitter" icon={<Home size={20} />} />
+      <BottomNavigationAction component={Link} to="/twitter/search" icon={<Search size={20} />} />
+      <BottomNavigationAction component={Link} to="/twitter/profile" icon={<UserRound size={20} />} />
     </Navigation>
   );
 }

diff --git a/apps/phone/src/apps/twitter/components/TwitterSearch.tsx b/apps/phone/src/apps/twitter/components/TwitterSearch.tsx
@@ -1,27 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TweetList from './tweet/TweetList';
 import SearchButton from './buttons/SearchButton';
-import { TextField } from '@ui/components/Input';
+import { NPWDInput } from '@ui/components/Input';
 import fetchNui from '@utils/fetchNui';
 import { Tweet, TwitterEvents } from '@typings/twitter';
 import { useFilteredTweets } from '../hooks/state';
 import { processTweet } from '../utils/tweets';
 import { ServerPromiseResp } from '@typings/common';
 import { useSnackbar } from '@os/snackbar/hooks/useSnackbar';
-import { Box, styled } from '@mui/material';
-
-const SearchRoot = styled(Box)({
-  width: '100%',
-});
-
-const SearchContainer = styled(Box)({
-  padding: '15px',
-});
-
-const SearchField = styled(TextField)({
-  width: '100%',
-});
+import { Search } from 'lucide-react';
 
 function TwitterSearch() {
   const [t] = useTranslation();
@@ -55,19 +43,20 @@ function TwitterSearch() {
 
   return (
     <>
-      <SearchRoot>
-        <SearchContainer>
-          <SearchField
-            placeholder={t('TWITTER.SEARCH_TWEETS_PLACEHOLDER')}
-            label={t('TWITTER.SEARCH_TWEETS')}
-            value={searchValue}
-            onChange={handleChange}
-            size="medium"
-            inputRef={(input) => input && input.focus()}
-          />
-        </SearchContainer>
+      <div className='w-full'>
+        <div className='p-[15px]'>
+          <div className="flex items-center justify-start space-x-2 rounded-md border bg-neutral-200 px-2 dark:border-neutral-700 dark:bg-neutral-800">
+            <Search className="h-5 w-5 dark:text-neutral-400" />
+            <NPWDInput
+              className="group-focus:ring-2 text-sm"
+              onChange={handleChange}
+              placeholder={t('TWITTER.SEARCH_TWEETS_PLACEHOLDER')}
+              value={searchValue}
+            />
+          </div>
+        </div>
         {filteredTweets.length > 0 && <TweetList tweets={tweets} />}
-      </SearchRoot>
+      </div>
       <SearchButton handleClick={handleSubmit} />
     </>
   );

diff --git a/apps/phone/src/apps/twitter/components/tweet/TweetMessage.tsx b/apps/phone/src/apps/twitter/components/tweet/TweetMessage.tsx
@@ -14,7 +14,7 @@ const MessageInput = styled(TextField)({
 });
 
 export const TweetMessage = ({ modalVisible, message, handleChange, onEnter }) => {
-  const textFieldInputRef = useRef(null);
+  const textFieldInputRef = useRef<HTMLTextAreaElement>(null);
   const { ResourceConfig } = usePhone();
   const [t] = useTranslation();
 
@@ -52,6 +52,8 @@ export const TweetMessage = ({ modalVisible, message, handleChange, onEnter }) =
     <NPWDTextarea
       value={message}
       onChange={(e) => handleChange(e.currentTarget.value)}
+      ref={textFieldInputRef}
+      placeholder={t('TWITTER.TWEET_MESSAGE_PLACEHOLDER')}
       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"
     />
   );

diff --git a/apps/phone/src/apps/twitter/components/twitter.css b/apps/phone/src/apps/twitter/components/twitter.css
@@ -3,36 +3,36 @@ some of the Material UI primary theme settings */
 
  override buttons on the tweet modal
 #twitter-app .MuiButton-containedPrimary {
-  background: #ff5455 !important;
+  background: #0ea5e9 !important;
 }
 
 /* override the bottom navigation active color */
 #twitter-app .Mui-selected {
-  color: #ff5455 !important;
+  color: #0ea5e9 !important;
 }
 /* override the FAB (action buttons) background when selected */
 #twitter-app .MuiFab-primary {
-  background: #ff5455 !important;
+  background: #0ea5e9 !important;
 }
 
 /* override the labels on text fields */
 #twitter-app .MuiInputLabel-formControl.Mui-focused {
-  color: #ff5455 !important;
+  color: #0ea5e9 !important;
 }
 
 /* override the underlines of text fields */
 #twitter-app .Mui-focused:after {
-  border-bottom-color: #ff5455 !important;
+  border-bottom-color: #0ea5e9 !important;
 }
 
 /* override circular progress on the likes button */
 #twitter-app .MuiCircularProgress-colorPrimary {
-  color: #ff5455 !important;
+  color: #0ea5e9 !important;
 }
 
 /* override circular progress on the report button */
 #twitter-report-progress {
-  color: #ff5455 !important;
+  color: #0ea5e9!important;
 }
 
 /*

diff --git a/apps/phone/src/apps/twitter/twitter.theme.ts b/apps/phone/src/apps/twitter/twitter.theme.ts
@@ -1,14 +1,14 @@
 import { common } from '@mui/material/colors';
 
-export const TWITTER_APP_PRIMARY_COLOR = '#ff5455';
+export const TWITTER_APP_PRIMARY_COLOR = '#0ea5e9';
 export const TWITTER_APP_TEXT_COLOR = common.white;
 
 const theme = {
   palette: {
     primary: {
       main: TWITTER_APP_PRIMARY_COLOR,
-      dark: '#ff5455',
-      light: '#ff5455',
+      dark: '#0ea5e9',
+      light: '#0ea5e9',
       contrastText: TWITTER_APP_TEXT_COLOR,
     },
     secondary: {

diff --git a/apps/phone/src/ui/components/Modal.tsx b/apps/phone/src/ui/components/Modal.tsx
@@ -63,7 +63,7 @@ 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.Overlay className="bg-black/50 fixed inset-0 absolute 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>