fixed some style issues

Author: royweb

UI/layouts/Header/Actions/AccountButton/index.tsx

@@ -7,6 +7,7 @@ import Stack from '@mui/material/Stack'
 import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Avatar from '@mui/material/Avatar'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import PersonRoundedIcon from '@mui/icons-material/PersonRounded'
 import EditRoundedIcon from '@mui/icons-material/EditRounded'
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'
@@ -26,6 +27,7 @@ const AccountButton: FC = () => {
   const theme = useTheme()
 
   const { Menu, open, close } = useAnchorMenu()
+  const matches = useMediaQuery(theme.breakpoints.up('sm'))
 
   const onLogout = () => {
     close()
@@ -35,22 +37,44 @@ const AccountButton: FC = () => {
   }
 
   if (!account && !didname) {
+    if (matches) {
+      return (
+        <Button variant="gradient" onClick={() => selectDialog.open()}>
+          Login
+        </Button>
+      )
+    }
     return (
-      <Button variant="gradient" onClick={() => selectDialog.open()}>
-        Login
-      </Button>
+      <Avatar
+        alt={profile.name}
+        sx={{
+          width: 24,
+          height: 24,
+        }}
+      />
     )
   }
   if (!didname) {
+    if (matches) {
+      return (
+        <Button
+          variant="outlined"
+          onClick={() => {
+            onLogout()
+          }}
+        >
+          Logging in
+        </Button>
+      )
+    }
     return (
-      <Button
-        variant="outlined"
-        onClick={() => {
-          onLogout()
+      <Avatar
+        alt={profile.name}
+        sx={{
+          width: 24,
+          height: 24,
         }}
-      >
-        Logging in
-      </Button>
+      />
     )
   }
   return (
@@ -59,7 +83,7 @@ const AccountButton: FC = () => {
         component="button"
         elevation={3}
         sx={{
-          p: '10px 20px',
+          p: matches ? '10px 20px' : '5px',
           borderRadius: '12px',
           border: 'solid 1px transparent',
           '&:hover': {
@@ -69,19 +93,30 @@ const AccountButton: FC = () => {
         }}
         onClick={open}
       >
-        <Stack spacing={2} direction="row" justifyContent="center">
+        {matches ? (
+          <Stack spacing={2} direction="row" justifyContent="center">
+            <Avatar
+              alt={profile.name}
+              src={format(profile.avatar)}
+              sx={{
+                width: 36,
+                height: 36,
+              }}
+            />
+            <H4 fontWeight="medium" lineHeight="36px">
+              {didname}
+            </H4>
+          </Stack>
+        ) : (
           <Avatar
             alt={profile.name}
             src={format(profile.avatar)}
             sx={{
-              width: 36,
-              height: 36,
+              width: 24,
+              height: 24,
             }}
           />
-          <H4 fontWeight="medium" lineHeight="36px">
-            {didname}
-          </H4>
-        </Stack>
+        )}
       </Paper>
       <Menu
         sx={{

UI/layouts/Header/Actions/index.tsx

@@ -19,7 +19,7 @@ const Content = styled(Stack)`
 const Actions: FC = () => {
   return (
     <ROOT>
-      <Content direction="row" spacing={{ xs: 2, sm: 4 }}>
+      <Content direction="row" spacing={{ xs: 1, sm: 2 }}>
         <Menu />
         <AccountButton />
       </Content>

UI/layouts/Header/Menu/index.tsx

@@ -29,7 +29,7 @@ const Menu: FC = () => {
 
   return (
     <ROOT>
-      <Content direction="row" spacing={{ xs: 2, sm: 4 }}>
+      <Content direction="row" spacing={{ xs: 1, sm: 2 }}>
         <MenuLink
           href="/app/explore"
           onClick={(e) => {

UI/layouts/Header/index.tsx

@@ -35,6 +35,7 @@ const MobileBODY = styled(Box)`
 const MobileRow = styled(Box)`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   ${({ theme }) => ({
     marginBottom: `${theme.spacing(2)}`,
   })}

UI/profile-board/Tabs/index.tsx

@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'
 import MuiTabs from '@mui/material/Tabs'
 import MuiTab from '@mui/material/Tab'
 import Box from '@mui/material/Box'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import { Paragraph } from 'components/Typography'
 
 const applyProps = (index: number) => {
@@ -41,10 +42,19 @@ type TabTitleProps = {
   icon: ReactNode
 }
 const TabTitle: FC<TabTitleProps> = ({ icon, label }) => {
+  const theme = useTheme()
+  const matches = useMediaQuery(theme.breakpoints.up('sm'))
+
   return (
     <Stack spacing={1} direction="row">
-      {icon}
-      <Paragraph lineHeight="24px">{label}</Paragraph>
+      {matches && icon}
+      {matches ? (
+        <Paragraph lineHeight="24px">{label}</Paragraph>
+      ) : (
+        <Paragraph lineHeight="24px" fontSize="12px">
+          {label}
+        </Paragraph>
+      )}
     </Stack>
   )
 }
@@ -76,14 +86,13 @@ const Tabs: FC<TabsProps> = ({ tabs }) => {
             },
           }}
           variant="fullWidth"
-          allowScrollButtonsMobile
           value={value}
           onChange={handleChange}
         >
           {tabs.map(({ title }, index) => {
             return (
               <Tab
-                sx={{ width: { xs: 'auto', sm: '23%' } }}
+                sx={{ width: { xs: 'auto', sm: '18%', padding: '0 5px', minWidth: '0' } }}
                 key={title.label}
                 label={<TabTitle {...title} />}
                 {...applyProps(index)}

components/Follow/FollowCard.tsx

@@ -123,7 +123,7 @@ const FollowCard: FC<FollowMember> = (props) => {
               sx={{ cursor: 'pointer', '&:hover': { color: theme.palette.primary.main } }}
               onClick={goToProfileBoard}
               fontWeight="medium"
-              ellipsis
+              ellipsis="true"
             >
               {name}.isme
             </H4>

components/Typography.tsx

@@ -3,15 +3,15 @@ import { Box, styled } from '@mui/material'
 import clsx from 'clsx'
 import React, { type ReactNode } from 'react'
 
-const StyledBox = styled(Box)<{ ellipsis?: boolean }>(({ ellipsis }) => ({
+const StyledBox = styled(Box)<{ ellipsis?: boolean | string }>(({ ellipsis }) => ({
   ...(ellipsis && {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   }),
 }))
 
-type Props = { ellipsis?: boolean }
+type Props = { ellipsis?: boolean | string }
 
 export const H1: React.FC<BoxProps & Props> = (props) => {
   const { ellipsis, children, className, ...others } = props