Verified Commit a908f9ce authored by insert's avatar insert 🎺

Add react helmet and notification colours to PWA

Co-authored-by: 's avatarnizune <riotdevelopers@gmail.com>
parent b720abba
Pipeline #243 passed with stage
in 1 minute and 44 seconds
......@@ -11,6 +11,7 @@
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-scripts": "3.0.1",
"riotchat.js": "^0.1.7",
"typescript": "3.5.3"
......@@ -39,6 +40,7 @@
},
"devDependencies": {
"@types/classnames": "^2.2.9",
"@types/react-helmet": "^5.0.8",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0"
}
......
......@@ -10,8 +10,7 @@
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#7b68ee">
<meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml">
<meta name="msapplication-TileColor" content="#7B68EE">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<meta name="theme-color" content="#7B68EE">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
......
import React, { useState, createContext } from 'react';
import Helmet from 'react-helmet';
import styles from './App.module.scss';
import Load from './pages/Load';
......@@ -46,6 +47,9 @@ export default function App() {
return (
<div className={`theme-${theme} ${styles.app}`}>
<Helmet>
<meta name="theme-color" content="#7B68EE" />
</Helmet>
<AppContext.Provider value={states}>
{ page === Page.LOAD && <Load waitForClient={ready} /> }
{ page === Page.LOGIN && <Login /> }
......
.button {
display: flex;
color: white;
padding: 10px 20px;
padding: 2px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
height: 38px;
align-items: center;
font-size: .875rem;
border-radius: 4px;
cursor: pointer;
......
import React, { useState, ReactNode } from 'react';
import Helmet from 'react-helmet'
import classNames from 'classnames';
import styles from './Modal.module.scss';
import { Button, ButtonType } from './Button';
......@@ -57,6 +58,9 @@ export default function Modal(props: ModalProps) {
return (
<div className={modalClasses} onClick={handleClose}>
<Helmet>
<meta name="theme-color" content='#00000' />
</Helmet>
<div className={classes}>
<div className={styles.container}>
<span className={styles.title}>{props.title}</span>
......
import React from 'react';
import Helmet from 'react-helmet';
import styles from './Notification.module.scss';
interface NotificationProps {
......@@ -10,6 +11,9 @@ interface NotificationProps {
export default function Notification(props: NotificationProps) {
return (
<div className={styles.banner}>
<Helmet>
<meta name="theme-color" content='#D14F4F' />
</Helmet>
<span className={styles.title}>{props.title}</span>
{ props.text && <span className={styles.divider} /> }
<span className={styles.text}>{props.text}</span>
......
......@@ -1390,6 +1390,13 @@
dependencies:
"@types/react" "*"
"@types/react-helmet@^5.0.8":
version "5.0.8"
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.8.tgz#f080eea6652e44f60b4574463d238f268d81d9af"
integrity sha512-ZTr12eDAYI0yUiMx1K82EHqRYa8J1BOOLus+0gL+AkksUiIPwLE0wLiXa9FNqD8r9GXAi+yRPZImkRh1JNlTkQ==
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@16.8.23":
version "16.8.23"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.23.tgz#ec6be3ceed6353a20948169b6cb4c97b65b97ad2"
......@@ -4040,6 +4047,11 @@ execall@^2.0.0:
dependencies:
clone-regexp "^2.1.0"
exenv@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
......@@ -8514,7 +8526,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@^15.6.2:
prop-types@^15.5.4, prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -8740,6 +8752,21 @@ react-error-overlay@^5.1.6:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
react-fast-compare@^2.0.2:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-helmet@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
dependencies:
object-assign "^4.1.1"
prop-types "^15.5.4"
react-fast-compare "^2.0.2"
react-side-effect "^1.1.0"
react-is@^16.8.1, react-is@^16.8.4:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
......@@ -8805,6 +8832,14 @@ react-scripts@3.0.1:
optionalDependencies:
fsevents "2.0.6"
react-side-effect@^1.1.0:
version "1.1.5"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
integrity sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==
dependencies:
exenv "^1.2.1"
shallowequal "^1.0.1"
react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
......@@ -9532,6 +9567,11 @@ shallow-clone@^1.0.0:
kind-of "^5.0.0"
mixin-object "^2.0.1"
shallowequal@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment