From fa33b6ba0d4b827cafb1f232331e13fa31b342a1 Mon Sep 17 00:00:00 2001 From: Nisar Hassan Naqvi Date: Tue, 10 Nov 2020 18:27:02 +0000 Subject: [PATCH 1/4] update get started section. Fixes gitpod-io/website#819 --- src/components/MoreInfo.tsx | 16 +- .../gitpod-vs-codespaces/Difference.tsx | 68 ++-- src/components/index/GetStarted.tsx | 75 ++-- src/components/index/PrefixInput.tsx | 334 ------------------ src/components/index/Project.tsx | 2 +- src/components/index/SecurityAndOSS.tsx | 7 +- src/components/index/TextFeature.tsx | 2 +- src/pages/index.tsx | 5 +- src/resources/chrome-logo.svg | 5 + src/resources/firefox-logo.svg | 3 + src/utils/helpers.ts | 13 + 11 files changed, 117 insertions(+), 413 deletions(-) delete mode 100644 src/components/index/PrefixInput.tsx create mode 100644 src/resources/chrome-logo.svg create mode 100644 src/resources/firefox-logo.svg diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx index 04fa41e4d..60fbaba9f 100644 --- a/src/components/MoreInfo.tsx +++ b/src/components/MoreInfo.tsx @@ -5,6 +5,12 @@ import { borders, sizes } from '../styles/variables' import { Link } from 'gatsby' import MapGrey from '../resources/map-grey.svg' +const StyledMoreInfo = styled.div<{negativeSpaceTop?: string}>` + @media(min-width: calc(${sizes.breakpoints.md} + 1px)) { + margin-top: ${({negativeSpaceTop}) => negativeSpaceTop }; + } +` + const StyledPricingLinks = styled.section` max-width: 850px; display: flex; @@ -62,9 +68,10 @@ export interface PricingLinksProps { text?: JSX.Element links?: JSX.Element backgroundShouldBeWhite?: boolean + negativeSpaceTop?: string } -const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: PricingLinksProps) => { +const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, negativeSpaceTop }: PricingLinksProps) => { let Img = img let Title = title let Text = text @@ -89,9 +96,10 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric ) } return ( -
@@ -103,7 +111,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
- + ) } diff --git a/src/components/gitpod-vs-codespaces/Difference.tsx b/src/components/gitpod-vs-codespaces/Difference.tsx index 279f4fe04..3138b168a 100644 --- a/src/components/gitpod-vs-codespaces/Difference.tsx +++ b/src/components/gitpod-vs-codespaces/Difference.tsx @@ -1,20 +1,11 @@ import React, { useEffect, useState } from 'react' import styled from '@emotion/styled' +import Chrome from '../../resources/chrome-logo.svg' +import Firefox from '../../resources/firefox-logo.svg' +import { getBrowser } from '../../utils/helpers' -const getBrowser = (userAgent: string) => { - const browsers = ['Opera', 'Chrome', 'Firefox', 'IE'] - let browser - - browsers.forEach((b) => { - if (userAgent.indexOf(b) !== -1) { - browser = b - } - }) - - return browser -} - -const StyledDifference = styled.section` +const StyledDifference = styled.section<{spacing?: 'small'}>` + padding: ${({spacing}) => spacing === 'small' ? '6rem 0' : ''}; text-align: center; p { @@ -22,28 +13,53 @@ const StyledDifference = styled.section` } h2 + p { - margin: 3rem 0 2rem; + max-width: 700px; + margin: 3rem auto 2rem; } .btn { - margin-bottom: 5rem; + margin: 2.5rem 0 5rem; + padding-left: 1.5rem; + + span { + display: flex; + align-items: center; + } + + img { + width: 4rem; + margin-right: 2.5rem; + } } ` -const Difference = () => { - const [browser, setBrowser] = useState() +interface DifferenceProps { + title?: string + spacing?: 'small' +} + +const Difference = ({title, spacing}: DifferenceProps) => { + const [browser, setBrowser] = useState() + + const getBrowserString = (browser: any) => { + if ( browser === 'Firefox') { + return 'Firefox' + } + return 'Chrome' + } useEffect(() => { - setBrowser(getBrowser(window.navigator.userAgent)) + let usersBrowser = getBrowser(window.navigator.userAgent) + setBrowser(getBrowserString(usersBrowser)) }) return ( - +

- Want to See the Difference for Yourself? + {title ? title : 'Want to See the Difference for Yourself?'}

-

Add a Gitpod button to your repository.

+

Install the browser extension which adds a Gitpod button to your GitLab, GitHub and Bitbucket projects to easily spin up a dev environment with a single click.

{ target="_blank" className="btn btn--big btn--cta" > - Install Browser Extension + + {browser} + Add to {browser} +

Or prefix any GitLab, GitHub or Bitbucket URL with gitpod.io/# diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx index d0e55af16..edc2e1b03 100644 --- a/src/components/index/GetStarted.tsx +++ b/src/components/index/GetStarted.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled' import { sizes } from '../../styles/variables' import { projects } from '../../contents/projects' import Project from './Project' -import PrefixInput from './PrefixInput' +import Difference from '../gitpod-vs-codespaces/Difference' const StyledGetStarted = styled.div` /* ------------------------------------------- */ @@ -12,25 +12,6 @@ const StyledGetStarted = styled.div` /* ------------------------------------------- */ .get-started { - padding-top: 0; - text-align: center; - - h3 { - font-weight: 400; - } - - &__prefix { - display: flex; - margin-bottom: 12rem; - text-align: left; - } - - h2 + p { - font-size: 2rem; - } - - /* ----- Projects ----- */ - &__projects { display: flex; justify-content: center; @@ -55,35 +36,33 @@ const StyledGetStarted = styled.div` ` const GetStarted = () => ( - -

-

- Get Started -

-

- Prefix any GitLab, GitHub, or Bitbucket URL with gitpod.io/# -

- -
- -
- -

Or Try an Example Project

- -
- {projects.map((project, i) => ( - - ))} -
+
+ +
+ +

Or Try an Example Project

+
+ {projects.map((project, i) => ( + + ))} +
+ +
- ) export default GetStarted diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx deleted file mode 100644 index 877486d2f..000000000 --- a/src/components/index/PrefixInput.tsx +++ /dev/null @@ -1,334 +0,0 @@ -import React, { useState } from 'react' - -import styled from '@emotion/styled' -import Close from '../../resources/close.svg' -import Plus from '../../resources/plus.svg' -import World from '../../resources/world.svg' -import ArrowPointer from '../../resources/arrow-pointer.svg' -import { colors, sizes } from '../../styles/variables' - -const Styled = styled.label` - display: flex; - flex-direction: column; - flex: 1; - background: #252629; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - - .header { - display: flex; - align-items: center; - padding-top: .8rem; - } - - .dots { - display: flex; - align-items: center; - padding: 0 1.5rem; - height: 100%; - - span { - display: block; - height: 15px; - width: 15px; - background: #fff; - border-radius: 50%; - - &:not(:last-of-type) { - margin-right: .7rem; - } - - &:nth-of-type(1) { - background: #FF5A52; - } - - &:nth-of-type(2) { - background: #E6C029; - } - - &:nth-of-type(3) { - background: #54C22C; - } - } - } - - .tab, - .main { - background: #36393b; - } - - .tab { - display: flex; - justify-content: space-around; - padding: 1rem; - flex: 0 0 45%; - height: 4rem; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - - .bar { - flex: 0 0 85%; - } - } - - .bar { - background: #4e4e4e; - border-radius: 10rem; - } - - .new-tab { - display: flex; - margin-left: 2rem; - color: #bdbfc3; - } - - .main { - display: flex; - align-items: center; - padding: .8rem 0; - - .bar { - height: 2rem; - width: 2.8rem; - - &-container { - display: flex; - padding-left: 1.5rem; - margin-right: 1rem; - - @media(max-width: 640px) { - display: none; - } - } - - &:last-of-type { - width: 3.2rem; - } - - &:not(:last-of-type) { - margin-right: 1.2rem; - } - - } - - .input-container { - display: flex; - padding: .8rem; - flex: 1; - color: ${colors.offWhite0}; - line-height: 1; - border: 1px solid #aaa; - border-top-left-radius: 10rem; - border-bottom-left-radius: 10rem; - border-right: none; - - @media(max-width: 640px) { - margin-left: 1rem; - } - } - - .wrapper { - position: relative; - flex: 1; - - &::before { - content: url(${ArrowPointer}); - position: absolute; - bottom: -5rem; - } - - .message { - position: absolute; - bottom: -12rem; - left: 2.5rem; - display: flex; - flex-direction: column; - align-items: baseline; - - .btn { - margin-top: 2rem; - } - - @media(max-width: 829px) { - bottom: -14rem; - } - - @media(max-width: ${sizes.breakpoints.md}) { - bottom: -13rem; - } - - @media(max-width: 700px) { - bottom: -14rem; - } - - @media(max-width: 530px) { - left: -12rem; - } - - @media(max-width: 410px) { - left: -14rem; - transform: scale(.8); - } - - @media(max-width: 340px) { - left: -16rem; - bottom: -13rem; - } - } - } - - .label { - display: flex; - align-items: center; - @media(max-width: 340px) { - font-size: 90%; - } - - img { - height: 1rem; - margin: 0 1.5rem; - transform: scale(2); - } - - span { - margin-right: .3rem; - background: #3f638b; - } - } - - input { - display: block; - width: 100%; - max-width: 50rem; - padding: .3rem 0; - color: ${colors.text}; - background: ${colors.offWhite0}; - border: 2px solid ${colors.link}; - - @media(max-width: 340px) { - font-size: 90%; - } - } - - } - - .info { - height: 14rem; - background: #292c31; - border-bottom-right-radius: 3px; - } - - .btn--small { - border: 2px solid ${colors.link}; - padding: .96rem 2.3rem; - - &:hover { - border: 2px solid ${colors.lightBlue}; - } - } -` - -const errorMessage = 'Please enter a valid GitLab, GitHub, or Bitbucket repository URL' - -const PrefixInput = () => { - const [url, setUrl] = useState(`https://github.com/gitpod-io/spring-petclinic`) - const [error, setError] = useState('') - - const validateUrl = (url: string) => { - const lowerCaseUrl = url.toLowerCase() - if (lowerCaseUrl.includes('github.com')) { - return true; - } - if (lowerCaseUrl.includes('gitlab.com')) { - return true; - } - if (lowerCaseUrl.includes('bitbucket.org')) { - return true; - } - return false; - } - - const handleChange = (e: React.FormEvent) => { - const el = e.target as HTMLInputElement - if(validateUrl(el.value) || el.value == '') { - setError('') - setUrl(el.value) - } else { - setError(errorMessage) - } - } - - const handleReturn = (e: React.KeyboardEvent) => { - if(e.key === 'Enter') { - const el = e.target as HTMLInputElement - if(validateUrl(el.value)) { - window.open(`https://gitpod.io/#${el.value}`, '_blank') - setError('') - } else { - setError(errorMessage) - } - } - } - - return ( - - -
- -
-
- - https://gitpod.io/# -
- - -
- <> -

- { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' } -

- - Start Workspace - - -
- -
-
-
-   -
- - ) -} - -export default PrefixInput diff --git a/src/components/index/Project.tsx b/src/components/index/Project.tsx index 969b2d586..5872f2eca 100644 --- a/src/components/index/Project.tsx +++ b/src/components/index/Project.tsx @@ -9,7 +9,7 @@ const StyledProject = styled.div` text-align: center; font-weight: 600; border: ${borders.light2}; - background: ${colors.white}; + background: ${colors.offWhite}; border-radius: 3px; min-width: 22rem; diff --git a/src/components/index/SecurityAndOSS.tsx b/src/components/index/SecurityAndOSS.tsx index d9a8ad1f7..d1ca46286 100644 --- a/src/components/index/SecurityAndOSS.tsx +++ b/src/components/index/SecurityAndOSS.tsx @@ -4,6 +4,11 @@ import TextFeature from './TextFeature' import ImageProvider from '../ImageProvider' const Styled = styled.section` + .pattern { + padding-bottom: 12rem; + margin-top: 12rem; + } + .text-container { display: flex; justify-content: center; @@ -29,7 +34,7 @@ const Styled = styled.section` const SecurityAndOSS = () => ( -
+
} diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx index 133298eb0..ec18c5cbe 100644 --- a/src/components/index/TextFeature.tsx +++ b/src/components/index/TextFeature.tsx @@ -6,7 +6,7 @@ import { colors, borders } from '../../styles/variables' const StyledTextFeature = styled.div` max-width: 600px; padding: 4rem 6rem; - background: ${colors.offWhite}; + background: ${colors.white}; border: ${borders.light}; border-radius: 3px; max-width: 450px; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 12e2e05fe..c6d7da05e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -145,7 +145,10 @@ const IndexPage: React.SFC<{}> = () => ( - + ) diff --git a/src/resources/chrome-logo.svg b/src/resources/chrome-logo.svg new file mode 100644 index 000000000..0cf2efd36 --- /dev/null +++ b/src/resources/chrome-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/resources/firefox-logo.svg b/src/resources/firefox-logo.svg new file mode 100644 index 000000000..955aa4f0b --- /dev/null +++ b/src/resources/firefox-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 59c275d44..046401723 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -2,3 +2,16 @@ export const isEurope = () => { const offset = new Date().getTimezoneOffset(); return offset <= 0 && offset >= -180; } + +export const getBrowser = (userAgent: string) => { + const browsers = ['Opera', 'Chrome', 'Firefox', 'IE'] + let browser + + browsers.forEach((b) => { + if (userAgent.indexOf(b) !== -1) { + browser = b + } + }) + + return browser +} From d8d81547d6d6ab5c48ac02c312ca3a51dfe7e03b Mon Sep 17 00:00:00 2001 From: Nisar Hassan Naqvi Date: Sun, 20 Dec 2020 18:31:02 +0000 Subject: [PATCH 2/4] add browser extension flow pages. --- src/components/Footer.tsx | 2 +- src/components/MinimalFooter.tsx | 45 ++++ src/components/Nav.tsx | 106 +++++---- src/components/extension-uninstall/Form.tsx | 142 ++++++++++++ .../extension-uninstall/Message.tsx | 47 ++++ .../gitpod-vs-codespaces/Difference.tsx | 8 +- src/functions/submit-form.ts | 10 +- src/layouts/index.tsx | 9 +- src/pages/extension-activation.tsx | 208 ++++++++++++++++++ src/pages/extension-uninstall.tsx | 57 +++++ src/resources/code-together.svg | 1 + src/resources/extension-screenshot.png | Bin 0 -> 80135 bytes src/resources/sven-signature-style-name.svg | 3 + src/resources/sven.png | Bin 0 -> 31845 bytes src/styles/base.ts | 7 +- src/styles/variables.ts | 5 +- 16 files changed, 593 insertions(+), 57 deletions(-) create mode 100644 src/components/MinimalFooter.tsx create mode 100644 src/components/extension-uninstall/Form.tsx create mode 100644 src/components/extension-uninstall/Message.tsx create mode 100644 src/pages/extension-activation.tsx create mode 100644 src/pages/extension-uninstall.tsx create mode 100644 src/resources/code-together.svg create mode 100644 src/resources/extension-screenshot.png create mode 100644 src/resources/sven-signature-style-name.svg create mode 100644 src/resources/sven.png diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index d8403c6be..5646a16c5 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -216,7 +216,7 @@ const Footer: React.SFC<{}> = () => (
-

Copyright © Gitpod

+

Copyright © Gitpod

Imprint | Terms of Service | Privacy Policy
diff --git a/src/components/MinimalFooter.tsx b/src/components/MinimalFooter.tsx new file mode 100644 index 000000000..282d2b69c --- /dev/null +++ b/src/components/MinimalFooter.tsx @@ -0,0 +1,45 @@ +import React from 'react' + +import styled from '@emotion/styled' +import { Link } from 'gatsby' +import { colors } from '../styles/variables' + +const StyledMinimalFooter = styled.footer` + padding: 5rem 0 6rem; + text-align: center; + color: ${colors.lightGrey}; + background: ${colors.offWhite}; + + p { + margin-bottom: 2rem; + } + + a, + .link { + color: inherit; + font-weight: 400; + } + + .link { + padding: 0 1rem; + + &:not(:last-child) { + border-right: 1px solid; + } + } +` + +const MinimalFooter = () => ( + +
+

Copyright © Gitpod

+
+ Imprint + Terms of Service + Privacy Policy +
+
+ +) + +export default MinimalFooter diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 1faa0e029..a87c30e8d 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -5,6 +5,8 @@ import { Link } from 'gatsby' import GitpodLogoDark from '../resources/gitpod-logo-dark.svg' import { colors, sizes, borders } from '../styles/variables' import { Global, css } from '@emotion/core' +import { getBrowser } from '../utils/helpers' +import { getBrowserString } from './gitpod-vs-codespaces/Difference' const StyledNav = styled.nav` display: flex; @@ -207,8 +209,9 @@ const StyledNav = styled.nav` } ` -const Nav = () => { +const Nav = ({ isAFlowPage, showReInstallExtensionButton }: { isAFlowPage?: boolean; showReInstallExtensionButton?: boolean }) => { const [isNavRendered, setIsNavRendered] = useState(false) + const [browser, setBrowser] = useState() const unLock = () => { if (window.innerWidth >= 1040) { @@ -218,6 +221,8 @@ const Nav = () => { useEffect(() => { window.addEventListener('resize', unLock) + let usersBrowser = getBrowser(window.navigator.userAgent) + setBrowser(getBrowserString(usersBrowser)) return () => { window.removeEventListener('resize', unLock) @@ -239,51 +244,70 @@ const Nav = () => { />
-
+
Gitpod Logo -
- Log In -
- -
-
+ + close menu icon + + + + hamburger menu icon + + + +
+
: null + } + { + showReInstallExtensionButton ? + Reinstall Extension + : null + }
-
    -
  • Features
    • -
  • Screencasts
    • -
  • Install
    • -
  • Pricing
    • -
  • Docs
    • -
  • Blog
    • -
  • Community
    • -
  • Log In
    • -
+ { + !isAFlowPage ? ( +
    +
  • Features
    • +
  • Screencasts
    • +
  • Install
    • +
  • Pricing
    • +
  • Docs
    • +
  • Blog
    • +
  • Community
    • +
  • Log In
    • +
+ ) : null + }
diff --git a/src/components/extension-uninstall/Form.tsx b/src/components/extension-uninstall/Form.tsx new file mode 100644 index 000000000..930ab2bb0 --- /dev/null +++ b/src/components/extension-uninstall/Form.tsx @@ -0,0 +1,142 @@ +import React, { useState, useEffect } from 'react' +import styled from '@emotion/styled' +import { borders } from '../../styles/variables' +import { Email } from '../../functions/submit-form' +import tick from '../../resources/tick.svg' + +const StyledForm = styled.form` + p { + margin-bottom: 1.2rem; + } + + label, textarea { + display: flex; + align-items: center; + } + + label { + &:not(:last-of-type) { + margin-bottom: .7rem; + } + } + + textarea { + width: 100%; + min-height: 100px; + margin: 1.5rem 0; + padding: 1rem; + border: ${borders.light2}; + border-radius: 3px; + } + + input { + margin-right: 1rem; + } + + .sucess { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + } + + .tick { + margin-bottom: 3rem; + } +` + +const Form = () => { + const [state, setState] = useState<{ + feedback: string + otherFeedback?: string + messageSent?: boolean + }>({ + feedback: '' + }) + + useEffect(() => { + console.log(state) + }, [state]) + + const handleChange = (e: React.ChangeEvent) => { + const text = e.target.getAttribute('data-text') + setState({ + ...state, + feedback: e.target.checked ? state.feedback + `\n${text}` : state.feedback.replace(`\n${text}`, '') + }) + } + + const handleTextAreaChange = (e: React.ChangeEvent) => { + setState({ + ...state, + [e.target.name]: e.target.value + }) + } + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + + const email: Email = { + subject: 'Why did I uninstall the browser extension?', + feedback: state.feedback, + otherFeedback: state.otherFeedback + } + + fetch('/.netlify/functions/submit-form', { + method: 'POST', + body: JSON.stringify(email) + }) + .then(() => + setState({ + ...state, + messageSent: true + }) + ) + .catch((error) => alert(error)) + } + + return ( + + { + !state.messageSent ? ( + <> + +

Why did you uninstall the browser extension?

+

Check all that apply:

+
+ + + + + + +
+ ) : ( +
+ Tick +

Thanks for your Feedback

+
+ ) + } + + ) +} + +export default Form diff --git a/src/components/extension-uninstall/Message.tsx b/src/components/extension-uninstall/Message.tsx new file mode 100644 index 000000000..3a0163613 --- /dev/null +++ b/src/components/extension-uninstall/Message.tsx @@ -0,0 +1,47 @@ +import React from 'react' +import Sven from '../../resources/sven.png' +import SvenName from '../../resources/sven-signature-style-name.svg' +import styled from '@emotion/styled' +import { colors } from '../../styles/variables' + +const StyledMessage = styled.blockquote` + padding: 4rem 5rem; + background: ${colors.offWhite}; + + @media(min-width: 1001px) { + min-width: 400px; + } + + .sig { + display: block; + margin-top: 1.5rem; + } + + .ceo { + display: flex; + align-items: center; + margin-top: 5rem; + + img { + height: 6rem; + margin-right: 1rem; + } + } +` + +const Message = () => ( + +

Hey there,

+

It’d be great if you could shortly let us know why you uninstalled the browser extension.

+

We’d like your feedback to understand how we can make Gitpod more useful. We’re committed to improving it, and we’re hoping to see you soon again. +

+

Best,

+ Sven +
+ Sven Efftinge +

Co-Founder & CEO

+
+ +) + +export default Message diff --git a/src/components/gitpod-vs-codespaces/Difference.tsx b/src/components/gitpod-vs-codespaces/Difference.tsx index 3138b168a..57ab5de09 100644 --- a/src/components/gitpod-vs-codespaces/Difference.tsx +++ b/src/components/gitpod-vs-codespaces/Difference.tsx @@ -38,16 +38,16 @@ interface DifferenceProps { spacing?: 'small' } -const Difference = ({title, spacing}: DifferenceProps) => { - const [browser, setBrowser] = useState() - - const getBrowserString = (browser: any) => { +export const getBrowserString = (browser: any) => { if ( browser === 'Firefox') { return 'Firefox' } return 'Chrome' } +const Difference = ({title, spacing}: DifferenceProps) => { + const [browser, setBrowser] = useState() + useEffect(() => { let usersBrowser = getBrowser(window.navigator.userAgent) setBrowser(getBrowserString(usersBrowser)) diff --git a/src/functions/submit-form.ts b/src/functions/submit-form.ts index faa1f458b..4cec7894c 100644 --- a/src/functions/submit-form.ts +++ b/src/functions/submit-form.ts @@ -6,17 +6,19 @@ export interface Email { email: string, name?: string }, - from: { + from?: { email: string, name?: string } subject: string, - message: string + message?: string, + feedback?: string, + otherFeedback?: string } async function sendEmail(client: client.MailService, email: Email): Promise<{statusCode: number, errorMessage?: string}> { const data: client.MailDataRequired = { - from: email.from, + from: email.from || '', subject: email.subject, to: [ email.to! @@ -24,7 +26,7 @@ async function sendEmail(client: client.MailService, email: Email): Promise<{sta content: [ { type: "text/plain", - value: email.message + value: `${email.message ? email.message : `${email.feedback}\n${email.otherFeedback}`}` } ] } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index e6fdc602e..d956ea7e0 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -12,6 +12,7 @@ import LayoutRoot from '../components/LayoutRoot' import LayoutMain from '../components/LayoutMain' import Nav from '../components/Nav' import Footer from '../components/Footer' +import MinimalFooter from '../components/MinimalFooter' // import AnnoucementBanner from '../components/AnnouncementBanner' type StaticQueryProps = { @@ -24,7 +25,7 @@ type StaticQueryProps = { } } -class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, ogImage?:string }, {}> { +class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean, showReInstallExtensionButton?: boolean, ogImage?:string}, {}> { handleFirstTab = (e: any) => { if (e.key === 'Tab') { // the "I am a keyboard user" key @@ -90,7 +91,7 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string; {/* */} -