From fd131b84c15f5410cd7ca3f059fd725d45c5ff6d Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Mon, 23 Sep 2019 18:04:59 -0400
Subject: [PATCH] Add Logo to join flow standalone page. Will need some css
 work, especially for small screens.

---
 src/views/join/join.jsx  | 13 +++++++++++++
 src/views/join/join.scss | 29 +++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/views/join/join.scss

diff --git a/src/views/join/join.jsx b/src/views/join/join.jsx
index 60379fd86a9..a62e7d449e5 100644
--- a/src/views/join/join.jsx
+++ b/src/views/join/join.jsx
@@ -5,8 +5,21 @@ const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx'
 // Require this even though we don't use it because, without it, webpack runs out of memory...
 const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
 
+require('./join.scss');
 const Register = () => (
     <ErrorBoundary>
+        <div className="join">
+            <a
+                aria-label="Scratch"
+                href="/"
+            >
+                <img
+                    className="logo"
+                    src="/images/logo_sm.png"
+                />
+            </a>
+
+        </div>
         <JoinModal
             isOpen
             key="scratch3registration"
diff --git a/src/views/join/join.scss b/src/views/join/join.scss
new file mode 100644
index 00000000000..9aefc03fa0b
--- /dev/null
+++ b/src/views/join/join.scss
@@ -0,0 +1,29 @@
+@import "../../frameless";
+
+.join {
+    position: absolute;
+    z-index: 1000;
+    top: 12px;
+    left: 12px;
+    left: calc(25% - 76px);
+
+    .logo {
+      width: 76px;
+  }
+}
+
+@media #{$small} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}
+@media #{$medium} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}
+@media #{$intermediate} {
+    .join {
+        left: calc(50% - 38px);
+    }
+}