Commit c16fa9e0 authored by Eugen Rochko's avatar Eugen Rochko

Add sign up / login prompt

parent 33149417
......@@ -308,7 +308,8 @@ h4 {
}
}
.page-heading {
.page-heading,
.connect-prompt {
padding: 20px;
margin-bottom: 30px;
......@@ -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 {
li {
padding: 0 10px;
......@@ -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 {
display: block;
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';
import React from 'react';
import { Motion, StaggeredMotion, spring, presets } from 'react-motion';
import { FormattedMessage, FormattedNumber } from 'react-intl';
import ConnectPrompt from './ConnectPrompt';
export default class HelloWorld extends React.PureComponent {
static propTypes = {
......@@ -50,16 +51,12 @@ export default class HelloWorld extends React.PureComponent {
return (
<div>
<div className={`page-heading ${!mastodonIsConnected ? 'bottomless' : ''}`}>
{mastodonIsConnected ? (<div className='page-heading'>
<h3>
Your friends
<small>Here are your Twitter friends who are on Mastodon:</small>
</h3>
</div>
{!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>}
</div>) : <ConnectPrompt domains={domains} />}
<StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
return i == 0
......@@ -93,7 +90,7 @@ export default class HelloWorld extends React.PureComponent {
</h3>
</div>
<div className='grid'>
<div className='grid' id='domains'>
{domains.map(domain => (
<a target='_blank' className='instance-card' href={`https://${domain.uri}/about`} key={domain.uri} style={{ backgroundImage: `url(${domain.thumbnail})` }}>
<div className='info'>
......@@ -104,6 +101,13 @@ export default class HelloWorld extends React.PureComponent {
</div>
</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>
);
......
......@@ -38,7 +38,7 @@ development:
host: localhost
port: 3035
public: localhost:3035
hmr: rue
hmr: true
# Inline should be set to true if using HMR
inline: 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