add a new component - WordWrap, update theme_color in manifest.json
This commit is contained in:
parent
fe550c372f
commit
5c88ae991c
|
@ -10,6 +10,6 @@
|
|||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#f50057",
|
||||
"theme_color": "#303030",
|
||||
"background_color": "#303030"
|
||||
}
|
||||
|
|
27
src/common/WordWrap/WordWrap.tsx
Normal file
27
src/common/WordWrap/WordWrap.tsx
Normal file
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
interface Props {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function WordWrap({ children }: Props) {
|
||||
const classes = useStyles();
|
||||
return <span className={classes.wordWrap}>{children}</span>;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
wordWrap: {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
'-ms-word-break': 'break-all',
|
||||
wordBreak: 'break-word',
|
||||
'-ms-hyphens': 'auto',
|
||||
'-moz-hyphens': 'auto',
|
||||
'-webkit-hyphens': 'auto',
|
||||
hyphens: 'auto',
|
||||
},
|
||||
}));
|
||||
|
||||
export default WordWrap;
|
|
@ -12,6 +12,7 @@ import { makeStyles } from '@material-ui/core/styles';
|
|||
|
||||
import { Chip, Toolbar, Typography, Tabs, ChipProps } from '@material-ui/core';
|
||||
import Content from '@common/Content/Content';
|
||||
import WordWrap from '@common/WordWrap/WordWrap';
|
||||
import Link from '@common/Link/Link';
|
||||
import TabLink from '@common/Link/TabLink';
|
||||
|
||||
|
@ -42,7 +43,9 @@ function PageLayout({ children }: Props) {
|
|||
<Toolbar className={classes.toolbar}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<div className={classes.playerNameContainer}>
|
||||
<Typography variant="h3">{player.name}</Typography>
|
||||
<Typography variant="h3">
|
||||
<WordWrap>{player.name}</WordWrap>
|
||||
</Typography>
|
||||
<div className={classes.chipContainer}>
|
||||
{!player.exists ? (
|
||||
<Chip {...chipProps} label={t('pageLayout.noLongerExists')} />
|
||||
|
|
|
@ -10,6 +10,7 @@ import * as NAMESPACES from '@config/namespaces';
|
|||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
import { Chip, Toolbar, Typography, Tabs, ChipProps } from '@material-ui/core';
|
||||
import WordWrap from '@common/WordWrap/WordWrap';
|
||||
import Content from '@common/Content/Content';
|
||||
import TabLink from '@common/Link/TabLink';
|
||||
|
||||
|
@ -39,7 +40,9 @@ function PageLayout({ children }: Props) {
|
|||
<header className={clsx(classes.header, 'bg-' + bg)}>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<Typography variant="h3">{tribe.name}</Typography>
|
||||
<Typography variant="h3">
|
||||
<WordWrap>{tribe.name}</WordWrap>
|
||||
</Typography>
|
||||
<div className={classes.tribeTagContainer}>
|
||||
<Typography variant="h3">{tribe.tag}</Typography>
|
||||
<div className={classes.chipContainer}>
|
||||
|
|
|
@ -7,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
|
|||
|
||||
import { Toolbar, Typography } from '@material-ui/core';
|
||||
import Content from '@common/Content/Content';
|
||||
import WordWrap from '@common/WordWrap/WordWrap';
|
||||
import PlayerProfileLink from '@features/ServerPage/common/PlayerProfileLink/PlayerProfileLink';
|
||||
|
||||
import background from './backgrounds/bg-1-dark.jpg';
|
||||
|
@ -26,7 +27,7 @@ function PageLayout({ children, village, server, t }: Props) {
|
|||
<Toolbar className={classes.toolbar}>
|
||||
<div>
|
||||
<Typography variant="h3">
|
||||
{village.fullName} (
|
||||
<WordWrap>{village.fullName}</WordWrap> (
|
||||
{t('pageLayout.points', {
|
||||
points: formatNumber('commas', village.points),
|
||||
})}
|
||||
|
|
|
@ -32,7 +32,6 @@ const createTheme = (): Theme => {
|
|||
color: 'default',
|
||||
},
|
||||
MuiLink: {
|
||||
// color: 'secondary',
|
||||
underline: 'none',
|
||||
},
|
||||
},
|
||||
|
|
Reference in New Issue
Block a user