Feature/hedgedoc logo (#606)

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')

public/icons/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/icons/mstile-150x150.png"/>
-            <TileColor>#333333</TileColor>
+            <TileColor>#b51f08</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/icons/site.webmanifest

@@ -13,7 +13,6 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
+    "theme_color": "#b51f08",
-    "background_color": "#ffffff",
+    "background_color": "#303030"
-    "display": "standalone"
 }

public/index.html

@@ -7,11 +7,13 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
     <link rel="manifest" href="/icons/site.webmanifest">
-    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#333333">
+    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#b51f08">
     <link rel="shortcut icon" href="/icons/favicon.ico">
-    <meta name="msapplication-TileColor" content="#333333">
+    <meta name="apple-mobile-web-app-title" content="HedgeDoc">
+    <meta name="application-name" content="HedgeDoc">
+    <meta name="msapplication-TileColor" content="#b51f08">
     <meta name="msapplication-config" content="/icons/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="theme-color" content="#b51f08">
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
     <meta content="HedgeDoc - Collaborative markdown notes" name="description"/>
 </head>

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 {
+  @keyframes animation-jump {
-    animation: pulse 2s ease-in-out infinite;
+    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);
-    }
-  }
 }

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<LoadingScreenProps> = ({ failedTitle }) => {
   return (
-    <div className="loader middle text-light">
+    <div className="loader middle text-light overflow-hidden">
       <div className="mb-3 text-light">
-        <ForkAwesomeIcon icon="file-text" size="5x"
+        <span className={`d-block ${failedTitle ? 'animation-shake' : 'animation-jump'}`}>
-          className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
+          <HedgeDocLogo size={HedgeDocLogoSize.BIG}/>
+        </span>
       </div>
-      <ShowIf condition={ !!failedTitle}>
+      <ShowIf condition={!!failedTitle}>
         <Alert variant={'danger'}>
           The task '{failedTitle}' failed.<br/>
           For further information look into the browser console.

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<BrandingProps> = ({ inline = false }) => {
+export const Branding: React.FC<BrandingProps> = ({ inline = false, delimiter = true }) => {
   const branding = useSelector((state: ApplicationState) => state.config.branding, equal)
   const showBranding = !!branding.name || !!branding.logo
 
   return (
     <ShowIf condition={showBranding}>
-      <strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`}>@</strong>
+      <ShowIf condition={delimiter}>
+        <strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`}>@</strong>
+      </ShowIf>
       {
         branding.logo
           ? <img

src/components/common/hedge-doc-logo/hedge-doc-logo-with-text.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { ReactComponent as LogoColorVertical } from './logo_text_color_vertical.svg'
+import { ReactComponent as LogoBwHorizontal } from './logo_text_bw_horizontal.svg'
+import { ReactComponent as LogoWbHorizontal } from './logo_text_wb_horizontal.svg'
+
+export enum HedgeDocLogoSize {
+  SMALL = 32,
+  MEDIUM = 64,
+  BIG= 256
+}
+
+export interface HedgeDocLogoProps {
+  size?: HedgeDocLogoSize | number,
+  logoType: HedgeDocLogoType
+}
+
+export enum HedgeDocLogoType {
+  COLOR_VERTICAL,
+  BW_HORIZONTAL,
+  WB_HORIZONTAL
+}
+
+export const HedgeDocLogoWithText: React.FC<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM, logoType }) => {
+  switch (logoType) {
+    case HedgeDocLogoType.COLOR_VERTICAL:
+      return <LogoColorVertical className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+    case HedgeDocLogoType.BW_HORIZONTAL:
+      return <LogoBwHorizontal className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+    case HedgeDocLogoType.WB_HORIZONTAL:
+      return <LogoWbHorizontal className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+    default:
+      return null
+  }
+}

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<HedgeDocLogoProps> = ({ size = HedgeDocLogoSize.MEDIUM }) => {
+  return <LogoColor className={'w-auto'} title={'HedgeDoc logo with text'} style={{ height: size }}/>
+}

src/components/common/hedge-doc-logo/logo_color.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="1486" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 1486 1486" width="1486" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(200 -420 420 200 660 1340)" gradientUnits="userSpaceOnUse" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#fcca8c"/><stop offset="1" stop-color="#dca055"/></linearGradient><g fill-rule="nonzero" transform="translate(-142.756 -142.754)"><path d="m1553.66 961.083 75.25-75.258-75.25-75.246 56.61-90.096-90.1-56.616 35.15-100.446-100.44-35.142 11.91-105.746-105.74-11.912-11.92-105.75-105.74 11.912-35.15-100.445-100.43 35.145-56.63-90.1-90.107 56.617-75.242-75.246-75.242 75.25-90.104-56.612-56.612 90.096-100.442-35.15-35.142 100.441-105.75-11.916-11.912 105.741-105.742 11.913 11.917 105.741-100.454 35.15 35.145 100.438-90.1 56.612 56.621 90.117-75.258 75.25 75.25 75.258-56.613 90.107 90.1 56.61-35.145 100.44 100.45 35.15-11.913 105.73 105.742 11.92 11.912 105.74 105.75-11.91 35.142 100.43 100.437-35.13 56.617 90.1 90.096-56.62 75.25 74.55 75.25-74.53 90.099 56.61 56.61-90.11 100.45 35.15 35.14-100.44 105.75 11.91 11.91-105.75 105.75-11.91-11.92-105.74 100.45-35.15-35.15-100.45 90.1-56.61z" fill="#b51f08"/><path d="m1401.3 1004.78c0-145.437-117.9-263.341-263.34-263.341-72.24 0-137.68 29.112-185.252 76.225l-.033-.034-67.096 67.1-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55 423.217-423.49c52.88-49.77 92.25-120 92.25-200.1" fill="#fcca8c"/><path d="m885.579 884.73-54.862-54.862c-48.267-55.067-119.071-89.879-198.042-89.879-145.442 0-263.342 117.904-263.342 263.341 0 76 32.23 144.43 83.721 192.49l432.779 432.55" fill="url(#a)"/></g><path d="m743.077 1485.616-.254-743.64" fill="none"/><g fill-rule="nonzero" transform="translate(-142.756 -142.754)"><path d="m961.011 1553.59c-19.279-19.35-45.917-31.31-75.325-31.31-29.417 0-56.046 11.96-75.329 31.31.308 41.34 33.908 74.76 75.325 74.76 41.416 0 75.02-33.43 75.329-74.76" fill="#010007"/><path d="m797.707 1098.22c0 31.8-25.767 57.57-57.571 57.57-31.787 0-57.558-25.77-57.558-57.57s25.771-57.57 57.558-57.57c31.804 0 57.571 25.77 57.571 57.57" fill="#010007"/><path d="m777.962 1089.59c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96" fill="#fffffa"/><path d="m1089.65 1098.22c0 31.8-25.77 57.57-57.57 57.57-31.79 0-57.567-25.77-57.567-57.57s25.777-57.57 57.567-57.57c31.8 0 57.57 25.77 57.57 57.57" fill="#010007"/><path d="m1069.9 1089.59c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96" fill="#fffffa"/></g></svg>

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 (
     <Navbar.Brand>
       <Link to="/intro" className="text-secondary text-decoration-none d-flex align-items-center">
-        <ForkAwesomeIcon icon="file-text" className={'mr-2'}/>
+        <HedgeDocLogoWithText
-        <span>HedgeDoc</span>
+          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
+          size={HedgeDocLogoSize.SMALL}/>
         <Branding inline={true}/>
       </Link>
     </Navbar.Brand>

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 <Fragment>
-    <h1 dir='auto' className={'align-items-center d-flex justify-content-center'}>
+    <h1 dir='auto' className={'align-items-center d-flex justify-content-center flex-column'}>
-      <ForkAwesomeIcon icon="file-text" className={'mr-2'}/>
+      <HedgeDocLogoWithText logoType={HedgeDocLogoType.COLOR_VERTICAL} size={HedgeDocLogoSize.BIG}/>
-      <span>HedgeDoc</span>
-      <Branding/>
     </h1>
-    <p className="lead mb-5">
+    <p className="lead">
       <Trans i18nKey="app.slogan"/>
     </p>
+    <div className={'mb-5'}>
+      <Branding delimiter={false}/>
+    </div>
 
     <CoverButtons/>
-
     <img alt={t('landing.intro.screenShotAltText')} src={screenshot} className="img-fluid mb-5"/>
     <FeatureLinks/>
   </Fragment>