fixed design for mobile

TIHLDE · Nov 18, 2023 · e9a0c78 · e9a0c78
1 parent a8a3a30
commit e9a0c78
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 9 deletions.
diff --git a/src/components/miscellaneous/reactions/EmojiItem.tsx b/src/components/miscellaneous/reactions/EmojiItem.tsx
@@ -67,8 +67,8 @@ export const EmojiItem = ({ data, emoji, content_type }: EmojiItemProps) => {
     return (
       <Button onClick={() => handleDelete(userReaction.reaction_id)} variant='outlined'>
         <Stack direction='row' spacing={0.5}>
-          <Typography>{emoji.emoji}</Typography>
-          <Typography fontSize={12}>{emoji.count}</Typography>
+          <Typography sx={{ fontSize: { xs: 14, md: 16 } }}>{emoji.emoji}</Typography>
+          <Typography sx={{ fontSize: { xs: 10, md: 12 } }}>{emoji.count}</Typography>
         </Stack>
       </Button>
     );

diff --git a/src/components/miscellaneous/reactions/EmojiPickHandler.tsx b/src/components/miscellaneous/reactions/EmojiPickHandler.tsx
@@ -58,7 +58,7 @@ export const EmojiPickerHandler = ({ data, content_type }: ReactionHandlerProps)
   return (
     <Container>
       <Button onClick={openPopover} variant='outlined'>
-        <AddReactionOutlinedIcon />
+        <AddReactionOutlinedIcon fontSize='small' />
       </Button>
 
       <MuiDialog onClose={closePopover} open={open}>

diff --git a/src/components/miscellaneous/reactions/EmojiShowAll.tsx b/src/components/miscellaneous/reactions/EmojiShowAll.tsx
@@ -14,7 +14,6 @@ export const EmojiShowAll = ({ data, content_type }: ReactionHandlerProps) => {
   const closeDialog = () => setOpen(false);
 
   const emojiCollections: Record<string, number> = {};
-
   data?.reactions?.forEach((r) => {
     emojiCollections[r.emoji] = (emojiCollections[r.emoji] || 0) + 1;
   });
@@ -29,7 +28,7 @@ export const EmojiShowAll = ({ data, content_type }: ReactionHandlerProps) => {
   return (
     <Container>
       <Button onClick={openDialog} variant='outlined'>
-        <ArrowOutwardIcon />
+        <ArrowOutwardIcon fontSize='small' />
       </Button>
 
       <Dialog onClose={closeDialog} open={open} titleText={`Alle reaksjoner (${data.reactions?.length})`}>

diff --git a/src/components/miscellaneous/reactions/EmojiShowcase.tsx b/src/components/miscellaneous/reactions/EmojiShowcase.tsx
@@ -3,7 +3,7 @@ import { Stack } from '@mui/material';
 import { EmojiItem } from './EmojiItem';
 import { ReactionHandlerProps } from './ReactionHandler';
 
-export const EmojiShowcase = ({ data }: ReactionHandlerProps) => {
+export const EmojiShowcase = ({ data, content_type }: ReactionHandlerProps) => {
   const emojiCollections: Record<string, number> = {};
 
   data?.reactions?.forEach((r) => {
@@ -18,7 +18,7 @@ export const EmojiShowcase = ({ data }: ReactionHandlerProps) => {
   return (
     <Stack direction='row' spacing={1}>
       {topEmojiCollections.map((emoji, index) => (
-        <EmojiItem data={data} emoji={emoji} key={index} />
+        <EmojiItem content_type={content_type} data={data} emoji={emoji} key={index} />
       ))}
     </Stack>
   );

diff --git a/src/pages/NewsDetails/components/NewsRenderer.tsx b/src/pages/NewsDetails/components/NewsRenderer.tsx
@@ -60,7 +60,7 @@ const NewsRenderer = ({ data, preview = false }: NewsRendererProps) => {
               </Button>
             </HavePermission>
           )}
-          <Stack alignItems='center' direction='row' justifyContent='space-between'>
+          <Stack alignItems='center' justifyContent='space-between' sx={{ flexDirection: { xs: 'column', md: 'row' }, gap: { xs: '12px', md: '0px' } }}>
             <Stack alignItems='center' direction='row' justifyContent='space-between'>
               <Typography variant='body2'>
                 Publisert: {formatDate(parseISO(data.created_at), { time: false })}
@@ -75,7 +75,6 @@ const NewsRenderer = ({ data, preview = false }: NewsRendererProps) => {
                 )}
               </Typography>
             </Stack>
-
             {data?.emojis_allowed && <ReactionHandler content_type='news' data={data} />}
           </Stack>
           <Paper>