tweak(phone/twitter): update profile page

project-error · Jan 15, 2024 · ac384c7 · ac384c7
1 parent 0b25b8d
commit ac384c7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 37 deletions.
diff --git a/apps/phone/src/apps/twitter/components/profile/Profile.tsx b/apps/phone/src/apps/twitter/components/profile/Profile.tsx
@@ -15,6 +15,7 @@ import { useQueryParams } from '@common/hooks/useQueryParams';
 import qs from 'qs';
 import { Box, Button, styled } from '@mui/material';
 import ImageIcon from '@mui/icons-material/Image';
+import { ImagePlus } from 'lucide-react';
 
 const ProfileRoot = styled(Box)({
   position: 'relative',
@@ -39,7 +40,9 @@ export function Profile() {
   // Annoyingling adding conditionals above this line to not render
   // when profile === null results in a react error that different
   // amounts of hooks are rendering
-  const [avatarUrl, handleAvatarChange] = useState(profile.avatar_url || '');
+  const [avatarUrl, handleAvatarChange] = useState(
+    profile.avatar_url || 'https://i.fivemanage.com/images/3ClWwmpwkFhL.png',
+  );
   const [name, handleNameChange] = useState(profile.profile_name || '');
 
   const handleChooseImage = useCallback(() => {
@@ -85,17 +88,24 @@ export function Profile() {
 
   return (
     <ProfileRoot>
-      {enableAvatars && <Avatar avatarUrl={avatarUrl} showInvalidImage />}
-      <Box height={8} />
-
-      <Box display="flex" alignItems="center">
-        <div>
-          <ImageIcon />
+      {enableAvatars && (
+        <div className="reletive flex">
+          <div
+            className="group relative flex w-auto rounded-full bg-black"
+            onClick={handleChooseImage}
+          >
+            <img
+              src={avatarUrl}
+              className="h-20 w-20 cursor-pointer rounded-full object-cover object-center hover:opacity-75"
+              alt="profileimage"
+            />
+            <div className="pointer-events-none absolute left-[50%] top-[50%] flex hidden translate-x-[-50%] translate-y-[-50%] transform items-center justify-center group-hover:block">
+              <ImagePlus size={24} className="text-white" />
+            </div>
+          </div>
         </div>
-        <div>
-          <Button onClick={handleChooseImage}>{t('TWITTER.AVATAR_CHOOSE_IMAGE')}</Button>
-        </div>
-      </Box>
+      )}
+      <Box height={8} />
 
       <ProfileField
         label={t('TWITTER.EDIT_PROFILE_AVATAR')}

diff --git a/apps/phone/src/apps/twitter/utils/constants.ts b/apps/phone/src/apps/twitter/utils/constants.ts
@@ -11,8 +11,7 @@ export const MockTwitterProfile = {
   id: 1,
   profile_name: 'npwd admin',
   identifier: '421431414441124124',
-  avatar_url:
-    'https://libertycity.net/uploads/download/gta5_newskins/fulls/9kfhpadblk227v1tocv8mmgod3/1542874685734_653468-4.jpg',
+  avatar_url: 'https://i.fivemanage.com/images/3ClWwmpwkFhL.png',
   bio: 'Please no ERP',
   location: 'In my admin car',
   job: '',

diff --git a/apps/phone/src/ui/components/ProfileField.tsx b/apps/phone/src/ui/components/ProfileField.tsx
@@ -1,16 +1,5 @@
-import React, { forwardRef } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import { TextField } from './Input';
-
-const useStyles = makeStyles({
-  formContainer: {
-    width: '100%',
-    marginTop: '8px',
-  },
-  textField: {
-    width: '100%',
-  },
-});
+import { forwardRef } from 'react';
+import { NPWDInput } from './Input';
 
 interface ProfileFieldProps {
   label: string;
@@ -22,23 +11,17 @@ interface ProfileFieldProps {
 }
 
 const ProfileField = forwardRef<HTMLInputElement, ProfileFieldProps>(
-  ({ label, value, handleChange, allowChange, multiline, maxLength }, ref) => {
-    const classes = useStyles();
+  ({ label, value, handleChange, allowChange }, ref) => {
     const _handleChange = (e) => handleChange(e.target.value);
 
     return (
-      <div className={classes.formContainer}>
-        <TextField
-          className={classes.textField}
-          label={label}
+      <div className="mt-[8px] w-full">
+        <label className="text-sm font-medium text-neutral-400">{label}</label>
+        <NPWDInput
+          className="border border-neutral-700 focus:ring-2 focus:ring-sky-500"
           value={value}
           onChange={_handleChange}
           disabled={!allowChange}
-          inputProps={{
-            maxLength: maxLength,
-          }}
-          multiline={multiline}
-          inputRef={ref}
         />
       </div>
     );