diff --git a/frontend/package.json b/frontend/package.json index e7690c85..f6c0fb2a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "@typescript-eslint/parser": "^4.28.1", "babel-eslint": "^10.1.0", "classnames": "^2.3.1", + "country-flag-icons": "^1.4.11", "date-fns": "2.22.1", "eslint": "^7.30.0", "eslint-config-prettier": "^8.3.0", @@ -46,6 +47,7 @@ "react": "^17.0.2", "react-async": "10.0.1", "react-dom": "17.0.2", + "react-icons": "^4.3.1", "react-intl": "^5.20.6", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", @@ -97,6 +99,7 @@ } }, "devDependencies": { - "@formatjs/cli": "^4.2.29" + "@formatjs/cli": "^4.2.29", + "@types/country-flag-icons": "^1.2.0" } } diff --git a/frontend/public/index.html b/frontend/public/index.html index c25a4ff8..68172f41 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -47,10 +47,6 @@ content="/images/favicon/browserconfig.xml" /> - diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0ab9ebf8..7237560f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,11 +6,13 @@ import { AuthProvider, HealthProvider, LocaleProvider } from "context"; import { intl } from "locale"; import { RawIntlProvider } from "react-intl"; +import lightTheme from "./theme/customTheme"; + function App() { return ( - + diff --git a/frontend/src/components/Flag/Flag.tsx b/frontend/src/components/Flag/Flag.tsx index a52db3d8..f2322e40 100644 --- a/frontend/src/components/Flag/Flag.tsx +++ b/frontend/src/components/Flag/Flag.tsx @@ -1,6 +1,9 @@ import React from "react"; -import cn from "classnames"; +import { Box } from "@chakra-ui/layout"; +import { hasFlag } from "country-flag-icons"; +// @ts-ignore Creating a typing for a subfolder is not easily possible +import Flags from "country-flag-icons/react/3x2"; export interface FlagProps { /** @@ -8,21 +11,21 @@ export interface FlagProps { */ className?: string; /** - * Country code of flag + * Two letter country code of flag */ - country: string; - /** - * Size of the flag - */ - size?: string; + countryCode: string; } -export const Flag: React.FC = ({ className, country, size }) => { - const classes = [ - `flag-country-${country.toLowerCase()}`, - { - [`flag-${size}`]: !!size, - }, - ]; +export const Flag: React.FC = ({ className, countryCode }) => { + countryCode = countryCode.toUpperCase(); - return ; + if (hasFlag(countryCode)) { + const FlagElement = Flags[countryCode]; + return ( + + ); + } else { + console.error(`No flag for country ${countryCode} found!`); + + return ; + } }; diff --git a/frontend/src/components/LocalePicker.tsx b/frontend/src/components/LocalePicker.tsx index 0f705af6..f27d49b4 100644 --- a/frontend/src/components/LocalePicker.tsx +++ b/frontend/src/components/LocalePicker.tsx @@ -45,13 +45,13 @@ export const LocalePicker: React.FC = ({ - + {options.map((item) => { return ( } + icon={} onClick={() => changeTo(item[0])} rel={item[1]} key={`locale-${item[0]}`}> diff --git a/frontend/src/components/ThemeSwitcher.tsx b/frontend/src/components/ThemeSwitcher.tsx new file mode 100644 index 00000000..902740f5 --- /dev/null +++ b/frontend/src/components/ThemeSwitcher.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +import { Button, Icon, useColorMode } from "@chakra-ui/react"; +import { FiSun, FiMoon } from "react-icons/fi"; + +export const ThemeSwitcher: React.FC = () => { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + + ); +}; diff --git a/frontend/src/fonts/feather/feather-webfont.eot b/frontend/src/fonts/feather/feather-webfont.eot deleted file mode 100755 index 8350e161..00000000 Binary files a/frontend/src/fonts/feather/feather-webfont.eot and /dev/null differ diff --git a/frontend/src/fonts/feather/feather-webfont.svg b/frontend/src/fonts/feather/feather-webfont.svg deleted file mode 100755 index 164c09c6..00000000 --- a/frontend/src/fonts/feather/feather-webfont.svg +++ /dev/null @@ -1,1038 +0,0 @@ - - - - -Created by FontForge 20170910 at Tue Jan 16 19:54:31 2018 - By jimmywarting - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/fonts/feather/feather-webfont.ttf b/frontend/src/fonts/feather/feather-webfont.ttf deleted file mode 100755 index f75018c8..00000000 Binary files a/frontend/src/fonts/feather/feather-webfont.ttf and /dev/null differ diff --git a/frontend/src/fonts/feather/feather-webfont.woff b/frontend/src/fonts/feather/feather-webfont.woff deleted file mode 100755 index 8ce9004f..00000000 Binary files a/frontend/src/fonts/feather/feather-webfont.woff and /dev/null differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff new file mode 100644 index 00000000..f2a7dd34 Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2 b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2 new file mode 100644 index 00000000..ce34a9fe Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2 differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff new file mode 100644 index 00000000..38faafb9 Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2 b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2 new file mode 100644 index 00000000..a63c7279 Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2 differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff new file mode 100644 index 00000000..4e767cf5 Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2 b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2 new file mode 100644 index 00000000..d3e979ba Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2 differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff new file mode 100644 index 00000000..5b6e97be Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff differ diff --git a/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2 b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2 new file mode 100644 index 00000000..36bdc0e3 Binary files /dev/null and b/frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2 differ diff --git a/frontend/src/fonts/tabler-webfont/tabler-webfont.eot b/frontend/src/fonts/tabler-webfont/tabler-webfont.eot deleted file mode 100755 index 836cd0d3..00000000 Binary files a/frontend/src/fonts/tabler-webfont/tabler-webfont.eot and /dev/null differ diff --git a/frontend/src/fonts/tabler-webfont/tabler-webfont.svg b/frontend/src/fonts/tabler-webfont/tabler-webfont.svg deleted file mode 100755 index e497d921..00000000 --- a/frontend/src/fonts/tabler-webfont/tabler-webfont.svg +++ /dev/null @@ -1,1044 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/fonts/tabler-webfont/tabler-webfont.ttf b/frontend/src/fonts/tabler-webfont/tabler-webfont.ttf deleted file mode 100755 index fd3124eb..00000000 Binary files a/frontend/src/fonts/tabler-webfont/tabler-webfont.ttf and /dev/null differ diff --git a/frontend/src/fonts/tabler-webfont/tabler-webfont.woff b/frontend/src/fonts/tabler-webfont/tabler-webfont.woff deleted file mode 100755 index 0466bbde..00000000 Binary files a/frontend/src/fonts/tabler-webfont/tabler-webfont.woff and /dev/null differ diff --git a/frontend/src/fonts/tabler-webfont/tabler-webfont.woff2 b/frontend/src/fonts/tabler-webfont/tabler-webfont.woff2 deleted file mode 100755 index 7975c2f8..00000000 Binary files a/frontend/src/fonts/tabler-webfont/tabler-webfont.woff2 and /dev/null differ diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 8a3e6b8e..eba74033 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -1,3 +1,5 @@ +@import "styles/fonts.scss"; + html, body, #root { diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 0af0eda6..dc85ff00 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,10 +1,11 @@ import * as React from "react"; +import { ColorModeScript } from "@chakra-ui/react"; import * as ReactDOM from "react-dom"; import App from "./App"; - import "./index.scss"; +import customTheme from "./theme/customTheme"; declare global { interface Function { @@ -18,4 +19,10 @@ declare global { } } -ReactDOM.render(, document.getElementById("root")); +ReactDOM.render( + <> + + + , + document.getElementById("root"), +); diff --git a/frontend/src/locale/IntlProvider.tsx b/frontend/src/locale/IntlProvider.tsx index 93c1409e..ee2fc807 100644 --- a/frontend/src/locale/IntlProvider.tsx +++ b/frontend/src/locale/IntlProvider.tsx @@ -21,12 +21,12 @@ export const getFlagCodeForLocale = (locale?: string) => { switch (locale) { case "de-DE": case "de": - return "de"; + return "DE"; case "fa-IR": case "fa": - return "ir"; + return "IR"; default: - return "us"; + return "US"; } }; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index e86077ca..ec17b1fa 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/frontend/src/pages/Login/index.tsx @@ -10,11 +10,13 @@ import { Button, useColorModeValue, useToast, + Link, } from "@chakra-ui/react"; import { LocalePicker } from "components"; import { useAuthState } from "context"; import { intl } from "locale"; +import { ThemeSwitcher } from "../../components/ThemeSwitcher"; import logo from "../../img/logo-256.png"; function Login() { @@ -58,89 +60,94 @@ function Login() { return ( - - - Logo - - - - + + + + + + + + + Logo + +
- - - {intl.formatMessage({ - id: "user.email", - defaultMessage: "Email", - })} - - - - - - {intl.formatMessage({ - id: "user.password", - defaultMessage: "Password", - })} - - - - - - + + + + {intl.formatMessage({ + id: "user.email", + defaultMessage: "Email", + })} + + + + + + {intl.formatMessage({ + id: "user.password", + defaultMessage: "Password", + })} + + + + + + Forgot password? + + + - -
- + + + + ); } diff --git a/frontend/src/styles/fonts.scss b/frontend/src/styles/fonts.scss new file mode 100644 index 00000000..0ca1cff6 --- /dev/null +++ b/frontend/src/styles/fonts.scss @@ -0,0 +1,47 @@ +/* source-sans-pro-regular - latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 400; + src: local(""), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2") + format("woff2"), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff") + format("woff"); +} + +/* source-sans-pro-italic - latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 400; + src: local(""), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2") + format("woff2"), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff") + format("woff"); +} + +/* source-sans-pro-700 - latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: normal; + font-weight: 700; + src: local(""), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2") + format("woff2"), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff") + format("woff"); +} + +/* source-sans-pro-700italic - latin */ +@font-face { + font-family: "Source Sans Pro"; + font-style: italic; + font-weight: 700; + src: local(""), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2") + format("woff2"), + url("../fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff") + format("woff"); +} diff --git a/frontend/src/theme/customTheme.ts b/frontend/src/theme/customTheme.ts new file mode 100644 index 00000000..1a1b5e29 --- /dev/null +++ b/frontend/src/theme/customTheme.ts @@ -0,0 +1,16 @@ +import { theme as chakraTheme, ThemeConfig } from "@chakra-ui/react"; +import { extendTheme } from "@chakra-ui/react"; + +// declare a variable for fonts and set our fonts +const fonts = { + ...chakraTheme.fonts, + body: `"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`, + heading: `"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`, +}; + +const config: ThemeConfig = { + initialColorMode: "system", +}; + +const lightTheme = extendTheme({ fonts, config }); +export default lightTheme;