add a new component - WordWrap, update theme_color in manifest.json

public/manifest.json

@@ -10,6 +10,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#f50057",
+  "theme_color": "#303030",
   "background_color": "#303030"
 }

src/common/WordWrap/WordWrap.tsx

@@ -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;

src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx

@@ -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')} />

src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx

@@ -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}>

src/features/ServerPage/features/VillagePage/components/PageLayout/PageLayout.tsx

@@ -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),
               })}

src/theme/createTheme.ts

@@ -32,7 +32,6 @@ const createTheme = (): Theme => {
           color: 'default',
         },
         MuiLink: {
-          // color: 'secondary',
           underline: 'none',
         },
       },