Merge pull request #281 from tolgee/develop

Update logo, font and images
tolgee · Mar 4, 2021 · 75fbeab · 75fbeab
2 parents 2b1aa31 + 7fbc913
commit 75fbeab
Show file tree

Hide file tree

Showing 13 changed files with 21,689 additions and 156 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -4,8 +4,8 @@
   "main": "dist/index.js",
   "sideEffects": false,
   "scripts": {
-    "start": "webpack-dev-server --env mode=development --hot",
-    "startProd": "webpack-dev-server --env mode=production",
+    "start": "webpack serve --env mode=development --hot",
+    "startProd": "webpack serve --env mode=production",
     "build": "webpack --env mode=production",
     "watch": "webpack --watch",
     "test": "jest",
@@ -16,9 +16,9 @@
   "author": "Jan Cizmar",
   "license": "BSD",
   "dependencies": {
+    "@sentry/browser": "^6.2.1",
     "@tolgee/react": "^1.0.0-alpha.31",
     "@tolgee/ui": "^1.0.0-alpha.31",
-    "@sentry/browser": "^6.2.1",
     "@types/yup": "^0.29.11",
     "clsx": "^1.1.1",
     "formik": "^2.2.6",
@@ -85,7 +85,6 @@
     "typescript": "^4.1.5",
     "webpack": "^5.24.2",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-conditional-loader": "^1.0.12",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-conditional-loader": "^1.0.12"
   }
 }
diff --git a/webapp/src/component/common/EmptyListMessage.tsx b/webapp/src/component/common/EmptyListMessage.tsx
@@ -1,9 +1,9 @@
 import {default as React, FunctionComponent} from 'react';
 
-import {SadGoatMessage} from "./SadGoatMessage";
+import {SadEmotionMessage} from "./SadEmotionMessage";
 import {Box} from "@material-ui/core";
 import {T} from '@tolgee/react';
 
 export const EmptyListMessage: FunctionComponent = (props) => {
-    return <Box p={8}><SadGoatMessage>{props.children || <T>global_empty_list_message</T>}</SadGoatMessage></Box>
+    return <Box p={8}><SadEmotionMessage>{props.children || <T>global_empty_list_message</T>}</SadEmotionMessage></Box>
 };
diff --git a/webapp/src/component/common/GlobalError.tsx b/webapp/src/component/common/GlobalError.tsx
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 import {GlobalError as GlobalErrorError} from "../../error/GlobalError";
-import {SadGoatMessage} from "./SadGoatMessage";
+import {SadEmotionMessage} from "./SadEmotionMessage";
 import {GlobalActions} from "../../store/global/globalActions";
 import {container} from "tsyringe";
 
@@ -23,7 +23,7 @@ export default function GlobalError(props: { error: GlobalErrorError }) {
 
                             {!dev &&
                             <Box>
-                                <SadGoatMessage>{null}</SadGoatMessage>
+                                <SadEmotionMessage>{null}</SadEmotionMessage>
                             </Box>}
 
                             {props.error.publicInfo &&

diff --git a/...p/src/component/common/SadGoatMessage.tsx → ...rc/component/common/SadEmotionMessage.tsx b/...p/src/component/common/SadGoatMessage.tsx → ...rc/component/common/SadEmotionMessage.tsx
@@ -3,7 +3,6 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
 import createStyles from "@material-ui/core/styles/createStyles";
 import {Theme, Typography} from "@material-ui/core";
 import Box from "@material-ui/core/Box";
-import SadGoat from '../../svgs/sadGoat.svg'
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -17,14 +16,14 @@ const useStyles = makeStyles((theme: Theme) =>
     }),
 );
 
-export const SadGoatMessage: FunctionComponent<{ children: ReactNode }> = (props) => {
+export const SadEmotionMessage: FunctionComponent<{ children: ReactNode }> = (props) => {
     const classes = useStyles({});
 
     return (
         <>
             <Box display="flex" justifyContent="center" flexDirection="column" alignItems="center">
-                <Box className={classes.goat}>
-                    <SadGoat width={200}/>
+                <Box className={classes.goat} style={{fontSize: "200px"}}>
+                    😢
                 </Box>
                 {props.children &&
                 <Box p={4} className={classes.text}>

diff --git a/webapp/src/component/layout/TopBar.tsx b/webapp/src/component/layout/TopBar.tsx
@@ -59,7 +59,7 @@ export function TopBar(props: TopBarProps) {
                                 <Box pr={1} display="flex" justifyItems="center">
                                     <TolgeeLogo fontSize="large"/>
                                 </Box>
-                                <Typography variant="h6" color="inherit">
+                                <Typography variant="h6" color="inherit" style={{fontFamily: "Righteous, Rubik, Arial"}}>
                                     Tolgee
                                 </Typography>
                             </Box>

diff --git a/webapp/src/fonts/Righteous/righteous-latin-ext.woff2 b/webapp/src/fonts/Righteous/righteous-latin-ext.woff2
diff --git a/webapp/src/fonts/Righteous/righteous-latin.woff2 b/webapp/src/fonts/Righteous/righteous-latin.woff2
diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
@@ -12,8 +12,10 @@ import {container} from 'tsyringe';
 import {dispatchService} from './service/dispatchService';
 
 import ErrorBoundary from "./component/ErrorBoundary";
-import RubikTTf from './fonts/Rubik/Rubik-Regular.woff2';
-import {blue, red} from "@material-ui/core/colors";
+import RubikWoff2 from './fonts/Rubik/Rubik-Regular.woff2';
+import RighteousLatinWoff2 from './fonts/Righteous/righteous-latin.woff2';
+import RighteousLatinExtWoff2 from './fonts/Righteous/righteous-latin-ext.woff2';
+
 import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles';
 import {TolgeeProvider} from "@tolgee/react";
 import {UI} from "@tolgee/ui";
@@ -28,38 +30,66 @@ const SnackbarProvider = React.lazy(() => import(/* webpackChunkName: "notistack
 
 container.resolve(dispatchService).store = store;
 
-const raleway = {
+const rubik = {
     fontFamily: 'Rubik',
     fontStyle: 'normal',
     fontDisplay: 'swap',
     fontWeight: 400,
     src: `
     local('Rubik'),
     local('Rubik-Regular'),
-    url(${RubikTTf}) format('woff2')
+    url(${RubikWoff2}) format('woff2')
   `,
     unicodeRange:
         'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
 };
 
+
+const righteousLatin = {
+    fontFamily: 'Righteous',
+    fontStyle: 'normal',
+    fontDisplay: 'swap',
+    fontWeight: 400,
+    src: `
+    local('Righteous'),
+    local('Righteous-Regular'),
+    url(${RighteousLatinWoff2}) format('woff2')
+  `,
+    unicodeRange:
+        "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
+};
+
+const righteousLatinExt = {
+    fontFamily: 'Righteous',
+    fontStyle: 'normal',
+    fontDisplay: 'swap',
+    fontWeight: 400,
+    src: `
+    local('Righteous'),
+    local('Righteous-Regular'),
+    url(${RighteousLatinExtWoff2}) format('woff2')
+  `,
+    unicodeRange: "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF"
+};
+
 const theme = createMuiTheme({
     typography: {
         fontFamily: 'Rubik, Arial',
     },
     palette: {
         primary: {
-            main: blue['600'],
+            main: "#822B55"
         },
         secondary: {
-            main: red['300'],
-        },
+            main: "#2B5582"
+        }
     },
     overrides: {
         MuiCssBaseline: {
             // @ts-ignore
             '@global': {
                 // @ts-ignore
-                '@font-face': [raleway],
+                '@font-face': [rubik, righteousLatinExt, righteousLatin]
             },
         },
         MuiButton: {

diff --git a/webapp/src/svgs/happyGoat.svg b/webapp/src/svgs/happyGoat.svg