[Glitch] Add sign-up button to logged-out web UI

Port e623c302d5d4dfc05689eb8fb8e051e30fc38ec8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

4 files changed, 27 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
index c8403a8ad..e08a1ea67 100644
--- a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
+++ b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { registrationsOpen } from 'flavours/glitch/util/initial_state';
 
 const SignInBanner = () => (
   <div className='sign-in-banner'>
     <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.' /></p>
     <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
+    <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
   </div>
 );
 
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index cf5339d36..1c3540b33 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -118,6 +118,26 @@
     }
   }
 
+  &.button-tertiary {
+    background: transparent;
+    padding: 6px 17px;
+    color: $highlight-text-color;
+    border: 1px solid $highlight-text-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: $ui-highlight-color;
+      color: $primary-text-color;
+      border: 0;
+      padding: 7px 18px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
   &.button--block {
     display: block;
     width: 100%;
diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss
index 2b5cccd92..74eccf497 100644
--- a/app/javascript/flavours/glitch/styles/components/signed_out.scss
+++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss
@@ -5,4 +5,8 @@
     color: $darker-text-color;
     margin-bottom: 20px;
   }
+
+  .button {
+    margin-bottom: 10px;
+  }
 }
diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js
index af29e4735..4db3e6c64 100644
--- a/app/javascript/flavours/glitch/util/initial_state.js
+++ b/app/javascript/flavours/glitch/util/initial_state.js
@@ -25,6 +25,7 @@ export const searchEnabled = getMeta('search_enabled');
 export const maxChars = (initialState && initialState.max_toot_chars) || 500;
 export const pollLimits = (initialState && initialState.poll_limits);
 export const limitedFederationMode = getMeta('limited_federation_mode');
+export const registrationsOpen = getMeta('registrations_open');
 export const repository = getMeta('repository');
 export const source_url = getMeta('source_url');
 export const version = getMeta('version');