Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ThinMenuへのConcord追加、メニューアイコンのサイズを視覚的に違和感が無いよう整えた #813

Merged
merged 4 commits into from
Jan 24, 2025
+93 −43
Merged

ThinMenuへのConcord追加、メニューアイコンのサイズを視覚的に違和感が無いよう整えた #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a82404c
Update Menu.tsx
waonme Jan 23, 2025
5da3c13
Update Menu.tsx
waonme Jan 23, 2025
66f97a2
Update MobileMenu.tsx
waonme Jan 23, 2025
e3d5dcd
Update MobileMenu.tsx
waonme Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 86 additions & 37 deletions src/components/Menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,16 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
if (res) event.preventDefault()
}}
>
<HomeIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>
>
<HomeIcon sx={{ color: 'background.contrastText' }} />
</Box>
<ListItemText primary={t('home.title')} />
</ListItemButton>
</ListItem>
Expand All @@ -125,23 +130,36 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
to="/notifications"
onClick={props.onClick}
>
<NotificationsIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>

>
<NotificationsIcon sx={{ color: 'background.contrastText' }} />
</Box>
<ListItemText primary={t('notifications.title')} />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton sx={{ gap: 1 }} component={NavLink} to="/contacts" onClick={props.onClick}>
<ContactsIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>

>
<ContactsIcon
sx={{
color: 'background.contrastText',
fontSize: '1.5rem'
}}
/>
</Box>
<ListItemText primary={t('contacts.title')} />
</ListItemButton>
</ListItem>
Expand All @@ -152,12 +170,21 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
to="/explorer/timelines"
onClick={props.onClick}
>
<ExploreIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>

>
<ExploreIcon
sx={{
color: 'background.contrastText',
fontSize: '1.65rem'
}}
/>
</Box>
<ListItemText primary={t('explore.title')} />
</ListItemButton>
</ListItem>
Expand All @@ -169,12 +196,16 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
to="/concord/assets"
onClick={props.onClick}
>
<CellTowerIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>

>
<CellTowerIcon sx={{ color: 'background.contrastText' }} />
</Box>
<ListItemText primary={'Concord'} />
</ListItemButton>
</ListItem>
Expand All @@ -187,18 +218,27 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
to="/tutorial"
onClick={props.onClick}
>
<Badge
color="secondary"
variant="dot"
invisible={progress !== 0 || !isMasterSession}
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
>
<MenuBookIcon
sx={{
color: 'background.contrastText'
}}
/>
</Badge>

<Badge
color="secondary"
variant="dot"
invisible={progress !== 0 || !isMasterSession}
>
<MenuBookIcon
sx={{
color: 'background.contrastText',
fontSize: '1.57rem'
}}
/>
</Badge>
</Box>
<ListItemText primary={t('tutorial.title')} />
</ListItemButton>
</ListItem>
Expand All @@ -211,23 +251,32 @@ export const Menu = memo<MenuProps>((props: MenuProps): JSX.Element => {
to="/devtool"
onClick={props.onClick}
>
<TerminalIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>

>
<TerminalIcon sx={{ color: 'background.contrastText' }} />
</Box>
<ListItemText primary={t('devtool.title')} />
</ListItemButton>
</ListItem>
)}
<ListItem disablePadding>
<ListItemButton sx={{ gap: 1 }} component={NavLink} to="/settings" onClick={props.onClick}>
<SettingsIcon
<Box
sx={{
color: 'background.contrastText'
display: 'flex',
alignItems: 'center',
width: '1.75rem',
justifyContent: 'center'
}}
/>
>
<SettingsIcon sx={{ color: 'background.contrastText' }} />
</Box>
<ListItemText primary={t('settings.title')} />
</ListItemButton>
</ListItem>
Expand Down
13 changes: 7 additions & 6 deletions src/components/Menu/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,12 @@ export const MobileMenu = (): JSX.Element => {
component={NavLink}
to="/contacts"
>
<ContactsIcon />
<ContactsIcon
sx={{
color: 'background.contrastText',
fontSize: '1.5rem'
}}
/>
</Button>
{!tutorialCompleted && (
<Button
Expand All @@ -108,11 +113,7 @@ export const MobileMenu = (): JSX.Element => {
to="/tutorial"
>
<Badge color="secondary" variant="dot" invisible={progress !== 0 || !isMasterSession}>
<MenuBookIcon
sx={{
color: 'background.contrastText'
}}
/>
<MenuBookIcon />
</Badge>
</Button>
)}
Expand Down
Loading