diff --git a/cypress/integration/intro.spec.ts b/cypress/integration/intro.spec.ts index 79ec73b53..b492c54e9 100644 --- a/cypress/integration/intro.spec.ts +++ b/cypress/integration/intro.spec.ts @@ -49,7 +49,8 @@ describe('Intro', () => { .click() cy.get('#versionModal') .should('be.visible') - cy.get('body') + cy.get('#versionModal .modal-footer .btn') + .contains('Close') .click() cy.get('#versionModal') .should('not.be.visible') diff --git a/public/icons/android-chrome-192x192.png b/public/icons/android-chrome-192x192.png index 8123d4d0b..1b42c8b78 100644 Binary files a/public/icons/android-chrome-192x192.png and b/public/icons/android-chrome-192x192.png differ diff --git a/public/icons/android-chrome-512x512.png b/public/icons/android-chrome-512x512.png index fda8885b0..1eedb77af 100644 Binary files a/public/icons/android-chrome-512x512.png and b/public/icons/android-chrome-512x512.png differ diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png index c0b0fd5ab..54deb68d3 100644 Binary files a/public/icons/apple-touch-icon.png and b/public/icons/apple-touch-icon.png differ diff --git a/public/icons/browserconfig.xml b/public/icons/browserconfig.xml index 1204516c8..be3e03846 100644 --- a/public/icons/browserconfig.xml +++ b/public/icons/browserconfig.xml @@ -3,7 +3,7 @@ - #333333 + #b51f08 diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png index 14cdef554..695b8aaa0 100644 Binary files a/public/icons/favicon-16x16.png and b/public/icons/favicon-16x16.png differ diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png index b0c931b93..80afec65c 100644 Binary files a/public/icons/favicon-32x32.png and b/public/icons/favicon-32x32.png differ diff --git a/public/icons/favicon.ico b/public/icons/favicon.ico index c43f0c3ed..7188efc4a 100644 Binary files a/public/icons/favicon.ico and b/public/icons/favicon.ico differ diff --git a/public/icons/mstile-144x144.png b/public/icons/mstile-144x144.png index 9c775822f..fa2152abd 100644 Binary files a/public/icons/mstile-144x144.png and b/public/icons/mstile-144x144.png differ diff --git a/public/icons/mstile-150x150.png b/public/icons/mstile-150x150.png index a430fac0f..5b277a2cb 100644 Binary files a/public/icons/mstile-150x150.png and b/public/icons/mstile-150x150.png differ diff --git a/public/icons/mstile-310x150.png b/public/icons/mstile-310x150.png index 4fb12d72f..ab952960c 100644 Binary files a/public/icons/mstile-310x150.png and b/public/icons/mstile-310x150.png differ diff --git a/public/icons/mstile-310x310.png b/public/icons/mstile-310x310.png index 7b5de1a39..a43ae7cca 100644 Binary files a/public/icons/mstile-310x310.png and b/public/icons/mstile-310x310.png differ diff --git a/public/icons/mstile-70x70.png b/public/icons/mstile-70x70.png index d7aaf360f..ce4b9fa96 100644 Binary files a/public/icons/mstile-70x70.png and b/public/icons/mstile-70x70.png differ diff --git a/public/icons/safari-pinned-tab.svg b/public/icons/safari-pinned-tab.svg index e0c2475bd..aedf0d299 100644 --- a/public/icons/safari-pinned-tab.svg +++ b/public/icons/safari-pinned-tab.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/icons/site.webmanifest b/public/icons/site.webmanifest index 234153cc4..adbd7a984 100644 --- a/public/icons/site.webmanifest +++ b/public/icons/site.webmanifest @@ -13,7 +13,6 @@ "type": "image/png" } ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" + "theme_color": "#b51f08", + "background_color": "#303030" } diff --git a/public/index.html b/public/index.html index 7bcca202d..62c7cb83d 100644 --- a/public/index.html +++ b/public/index.html @@ -7,11 +7,13 @@ - + - + + + - + diff --git a/src/components/application-loader/application-loader.scss b/src/components/application-loader/application-loader.scss index a8ff924aa..e0fd7a1b6 100644 --- a/src/components/application-loader/application-loader.scss +++ b/src/components/application-loader/application-loader.scss @@ -1,11 +1,51 @@ .loader { + @keyframes animation-roll { + 0% { transform: translateX(calc(-100vw / 2 - 100%)) rotateZ(0deg); } + 100% { transform: translateX(calc(100vw / 2 + 100%)) rotateZ(720deg); } + } - .animation-pulse { - animation: pulse 2s ease-in-out infinite; + @keyframes animation-jump { + 0% { transform: scale(1,1) translateY(0); } + 10% { transform: scale(1.1,.9) translateY(0); } + 30% { transform: scale(.9,1.1) translateY(-100px); } + 50% { transform: scale(1.05,.95) translateY(0); } + 57% { transform: scale(1,1) translateY(-7px); } + 64% { transform: scale(1,1) translateY(0); } + 100% { transform: scale(1,1) translateY(0); } + } + + @keyframes animation-shake { + 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } + } + + .animation-roll { + transform-origin: center center; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-name: animation-roll; + animation-timing-function: linear; + } + + .animation-jump { + transform-origin: bottom; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-name: animation-jump; + animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1); } .animation-shake { - animation: shake 0.3s ease-in-out; + animation: animation-shake 0.3s ease-in-out; } height: 100vh; @@ -21,55 +61,4 @@ .progress { width: 50%; } - - @keyframes pulse { - 0% { - transform: scale(1, 1); - filter: drop-shadow(0 0 0px black); - } - 10% { - transform: scale(1.5, 1.5); - filter: drop-shadow(0 0 100px white); - } - 100% { - transform: scale(1, 1); - filter: drop-shadow(0 0 0px black); - } - } - - @keyframes shake { - 0% { - transform: translate(1px, 1px) rotate(0deg); - } - 10% { - transform: translate(-1px, -2px) rotate(-1deg); - } - 20% { - transform: translate(-3px, 0px) rotate(1deg); - } - 30% { - transform: translate(3px, 2px) rotate(0deg); - } - 40% { - transform: translate(1px, -1px) rotate(1deg); - } - 50% { - transform: translate(-1px, 2px) rotate(-1deg); - } - 60% { - transform: translate(-3px, 1px) rotate(0deg); - } - 70% { - transform: translate(3px, 1px) rotate(-1deg); - } - 80% { - transform: translate(-1px, -1px) rotate(1deg); - } - 90% { - transform: translate(1px, 2px) rotate(0deg); - } - 100% { - transform: translate(1px, -2px) rotate(-1deg); - } - } } diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx index 41b1a0812..9bb85826e 100644 --- a/src/components/application-loader/loading-screen.tsx +++ b/src/components/application-loader/loading-screen.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Alert } from 'react-bootstrap' -import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon' +import { HedgeDocLogo, HedgeDocLogoSize } from '../common/hedge-doc-logo/hedge-doc-logo' import { ShowIf } from '../common/show-if/show-if' export interface LoadingScreenProps { @@ -9,12 +9,13 @@ export interface LoadingScreenProps { export const LoadingScreen: React.FC = ({ failedTitle }) => { return ( -
+
- + + +
- + The task '{failedTitle}' failed.
For further information look into the browser console. diff --git a/src/components/common/branding/branding.tsx b/src/components/common/branding/branding.tsx index f5e4b90ca..4a6d9a0ba 100644 --- a/src/components/common/branding/branding.tsx +++ b/src/components/common/branding/branding.tsx @@ -7,15 +7,18 @@ import './branding.scss' export interface BrandingProps { inline?: boolean + delimiter?: boolean } -export const Branding: React.FC = ({ inline = false }) => { +export const Branding: React.FC = ({ inline = false, delimiter = true }) => { const branding = useSelector((state: ApplicationState) => state.config.branding, equal) const showBranding = !!branding.name || !!branding.logo return ( - @ + + @ + { branding.logo ? = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => { + switch (logoType) { + case HedgeDocLogoType.COLOR_VERTICAL: + return + case HedgeDocLogoType.BW_HORIZONTAL: + return + case HedgeDocLogoType.WB_HORIZONTAL: + return + default: + return null + } +} diff --git a/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx b/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx new file mode 100644 index 000000000..44c309871 --- /dev/null +++ b/src/components/common/hedge-doc-logo/hedge-doc-logo.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { ReactComponent as LogoColor } from './logo_color.svg' + +export enum HedgeDocLogoSize { + SMALL = 32, + MEDIUM = 64, + BIG = 256 +} + +export interface HedgeDocLogoProps { + size?: HedgeDocLogoSize | number +} + +export const HedgeDocLogo: React.FC = ({ size = HedgeDocLogoSize.MEDIUM }) => { + return +} diff --git a/src/components/common/hedge-doc-logo/logo_color.svg b/src/components/common/hedge-doc-logo/logo_color.svg new file mode 100644 index 000000000..fc3ffd3a9 --- /dev/null +++ b/src/components/common/hedge-doc-logo/logo_color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg b/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg new file mode 100644 index 000000000..8721be9e6 --- /dev/null +++ b/src/components/common/hedge-doc-logo/logo_text_bw_horizontal.svg @@ -0,0 +1 @@ + diff --git a/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg b/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg new file mode 100644 index 000000000..cd5f80101 --- /dev/null +++ b/src/components/common/hedge-doc-logo/logo_text_color_vertical.svg @@ -0,0 +1 @@ + diff --git a/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg b/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg new file mode 100644 index 000000000..9c4500009 --- /dev/null +++ b/src/components/common/hedge-doc-logo/logo_text_wb_horizontal.svg @@ -0,0 +1 @@ + diff --git a/src/components/editor/app-bar/navbar-branding.tsx b/src/components/editor/app-bar/navbar-branding.tsx index 7b56c4b73..137ccb45a 100644 --- a/src/components/editor/app-bar/navbar-branding.tsx +++ b/src/components/editor/app-bar/navbar-branding.tsx @@ -1,15 +1,24 @@ import React from 'react' import { Navbar } from 'react-bootstrap' +import { useSelector } from 'react-redux' import { Link } from 'react-router-dom' +import { ApplicationState } from '../../../redux' import { Branding } from '../../common/branding/branding' -import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon' +import { + HedgeDocLogoSize, + HedgeDocLogoType, + HedgeDocLogoWithText +} from '../../common/hedge-doc-logo/hedge-doc-logo-with-text' export const NavbarBranding: React.FC = () => { + const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode) + return ( - - HedgeDoc + diff --git a/src/components/intro-page/intro-page.tsx b/src/components/intro-page/intro-page.tsx index b6c2c7568..051428b2f 100644 --- a/src/components/intro-page/intro-page.tsx +++ b/src/components/intro-page/intro-page.tsx @@ -1,7 +1,11 @@ import React, { Fragment } from 'react' import { Trans, useTranslation } from 'react-i18next' import { Branding } from '../common/branding/branding' -import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon' +import { + HedgeDocLogoSize, + HedgeDocLogoType, + HedgeDocLogoWithText +} from '../common/hedge-doc-logo/hedge-doc-logo-with-text' import { CoverButtons } from './cover-buttons/cover-buttons' import { FeatureLinks } from './feature-links' import screenshot from './img/screenshot.png' @@ -10,17 +14,17 @@ export const IntroPage: React.FC = () => { const { t } = useTranslation() return -

- - HedgeDoc - +

+

-

+

+
+ +
- {t('landing.intro.screenShotAltText')}