Commit c16fa9e0 authored by Eugen Rochko's avatar Eugen Rochko

Add sign up / login prompt

parent 33149417
...@@ -308,7 +308,8 @@ h4 { ...@@ -308,7 +308,8 @@ h4 {
} }
} }
.page-heading { .page-heading,
.connect-prompt {
padding: 20px; padding: 20px;
margin-bottom: 30px; margin-bottom: 30px;
...@@ -330,6 +331,59 @@ h4 { ...@@ -330,6 +331,59 @@ h4 {
} }
} }
.connect-prompt {
background: $vibrant;
color: $white;
border-radius: 4px;
text-align: center;
padding: 40px;
h3,
p {
color: #fff;
text-align: center;
}
h3 {
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
a {
color: #fff;
text-decoration: underline;
}
}
& > a {
font-weight: 500;
color: $vibrant;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: inherit;
display: inline-block;
text-align: center;
font-size: 16px;
text-decoration: none;
line-height: 36px;
padding: 4px 16px;
margin: 0 auto;
border: 0;
cursor: pointer;
&.secondary {
padding: 2px 14px;
border: 2px solid #fff;
background: transparent;
margin-left: 4px;
color: #fff;
}
}
}
.connections { .connections {
li { li {
padding: 0 10px; padding: 0 10px;
...@@ -579,21 +633,6 @@ h4 { ...@@ -579,21 +633,6 @@ h4 {
} }
} }
.connect-prompt {
background: $vibrant;
margin-top: -30px;
margin-bottom: 30px;
color: $white;
padding: 10px;
border-radius: 0 0 5px 5px;
text-align: center;
a {
color: $white;
font-weight: 500;
}
}
.hero-link { .hero-link {
display: block; display: block;
text-decoration: none; text-decoration: none;
......
import PropTypes from 'prop-types';
import React from 'react';
const ConnectPrompt = ({ domains }) => (
<div className='connect-prompt'>
<h3><i className='fa fa-check' /> Almost there!</h3>
<p>For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, <a href='#domains'>see where your friends have signed up</a> or click the button below.</p>
<a target='_blank' href='/users/auth/mastodon'>Login via Mastodon</a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}>Create Mastodon account</a>}
</div>
);
ConnectPrompt.propTypes = {
domains: PropTypes.array.isRequired,
};
export default ConnectPrompt;
...@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; ...@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { Motion, StaggeredMotion, spring, presets } from 'react-motion'; import { Motion, StaggeredMotion, spring, presets } from 'react-motion';
import { FormattedMessage, FormattedNumber } from 'react-intl'; import { FormattedMessage, FormattedNumber } from 'react-intl';
import ConnectPrompt from './ConnectPrompt';
export default class HelloWorld extends React.PureComponent { export default class HelloWorld extends React.PureComponent {
static propTypes = { static propTypes = {
...@@ -50,16 +51,12 @@ export default class HelloWorld extends React.PureComponent { ...@@ -50,16 +51,12 @@ export default class HelloWorld extends React.PureComponent {
return ( return (
<div> <div>
<div className={`page-heading ${!mastodonIsConnected ? 'bottomless' : ''}`}> {mastodonIsConnected ? (<div className='page-heading'>
<h3> <h3>
Your friends Your friends
<small>Here are your Twitter friends who are on Mastodon:</small> <small>Here are your Twitter friends who are on Mastodon:</small>
</h3> </h3>
</div> </div>) : <ConnectPrompt domains={domains} />}
{!mastodonIsConnected && <div className='connect-prompt'>
For your friends to find you as well, you still need to <a target='_blank' href='/users/auth/mastodon'>login via Mastodon</a>
</div>}
<StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => { <StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
return i == 0 return i == 0
...@@ -93,7 +90,7 @@ export default class HelloWorld extends React.PureComponent { ...@@ -93,7 +90,7 @@ export default class HelloWorld extends React.PureComponent {
</h3> </h3>
</div> </div>
<div className='grid'> <div className='grid' id='domains'>
{domains.map(domain => ( {domains.map(domain => (
<a target='_blank' className='instance-card' href={`https://${domain.uri}/about`} key={domain.uri} style={{ backgroundImage: `url(${domain.thumbnail})` }}> <a target='_blank' className='instance-card' href={`https://${domain.uri}/about`} key={domain.uri} style={{ backgroundImage: `url(${domain.thumbnail})` }}>
<div className='info'> <div className='info'>
...@@ -104,6 +101,13 @@ export default class HelloWorld extends React.PureComponent { ...@@ -104,6 +101,13 @@ export default class HelloWorld extends React.PureComponent {
</div> </div>
</a> </a>
))} ))}
<a target='_blank' className='instance-card' href='https://joinmastodon.org/#getting-started'>
<div className='info'>
<span className='title'>Find more on</span>
<span className='uri'>joinmastodon.org</span>
</div>
</a>
</div> </div>
</div> </div>
); );
......
...@@ -38,7 +38,7 @@ development: ...@@ -38,7 +38,7 @@ development:
host: localhost host: localhost
port: 3035 port: 3035
public: localhost:3035 public: localhost:3035
hmr: rue hmr: true
# Inline should be set to true if using HMR # Inline should be set to true if using HMR
inline: true inline: true
overlay: true overlay: true
......
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