From ee7aba09218f9b3bad54c916255f3e6a21a69b9e Mon Sep 17 00:00:00 2001 From: itschip Date: Mon, 15 Jan 2024 14:23:01 +0100 Subject: [PATCH] tweak(phone/twitter): search input update & colors --- .../apps/twitter/components/AddTweetModal.tsx | 33 -------------- .../twitter/components/BottomNavigation.tsx | 11 ++--- .../apps/twitter/components/TwitterSearch.tsx | 43 +++++++------------ .../twitter/components/tweet/TweetMessage.tsx | 4 +- .../src/apps/twitter/components/twitter.css | 14 +++--- apps/phone/src/apps/twitter/twitter.theme.ts | 6 +-- apps/phone/src/ui/components/Modal.tsx | 2 +- 7 files changed, 34 insertions(+), 79 deletions(-) diff --git a/apps/phone/src/apps/twitter/components/AddTweetModal.tsx b/apps/phone/src/apps/twitter/components/AddTweetModal.tsx index c530479a3..1e9cf0ff8 100644 --- 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 = () => { ); - - return ( - - - - - 0} - images={images} - removeImage={removeImage} - /> - - - - - - ); }; export default memo(AddTweetModal); diff --git a/apps/phone/src/apps/twitter/components/BottomNavigation.tsx b/apps/phone/src/apps/twitter/components/BottomNavigation.tsx index 7d29298d3..334ff701b 100644 --- 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 ( - } /> - } /> - } /> + } /> + } /> + } /> ); } diff --git a/apps/phone/src/apps/twitter/components/TwitterSearch.tsx b/apps/phone/src/apps/twitter/components/TwitterSearch.tsx index 9f9530a1d..733f83508 100644 --- 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 ( <> - - - input && input.focus()} - /> - +
+
+
+ + +
+
{filteredTweets.length > 0 && } - +
); diff --git a/apps/phone/src/apps/twitter/components/tweet/TweetMessage.tsx b/apps/phone/src/apps/twitter/components/tweet/TweetMessage.tsx index 5f0185a7e..abe2805bd 100644 --- 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(null); const { ResourceConfig } = usePhone(); const [t] = useTranslation(); @@ -52,6 +52,8 @@ export const TweetMessage = ({ modalVisible, message, handleChange, onEnter }) = 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 index 1e6a21fa7..13cae50b6 100644 --- 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 index be14e2d16..77cf935ec 100644 --- 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 index 29c3aff45..988904043 100644 --- 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 ( - + {children}