IP-310: In the problem page, the user sees a 'submit your solution' b…

…utton. Upon clicking, they see the form or they are taken to the login page. After login they should be redirected.

resources/assets/sass/problem/show-page.scss

@@ -1,6 +1,8 @@
 @import "bootstrap_4point6_custom_xxl"; // this page uses custom styles to support one more bootstrap size: xxl from 1260px and UP
 
 #single-problem-page {
+	position: relative;
+
 	#single-problem-overview,
 	.row.problem-description {
 		padding-bottom: 3.25rem;
@@ -63,6 +65,35 @@
 			padding: unset;
 		}
 	}
+
+	#propose-solution-cta-sticky-container {
+		&.sticky-container-outer-column {
+			position: absolute;
+			top: 30px;
+			right: 60px;
+			height: 100%;
+			z-index: 10;
+		}
+
+		.sticky-container-inner-div {
+			position: sticky;
+			top: 8rem;
+
+			.propose-solution-cta {
+				padding: 1.25rem 1.5rem;
+				width: 19rem;
+				background-color: var(--clr-primary-white);
+				border: none;
+				-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.25);
+				box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.25);
+				border-radius: 20px;
+			}
+		}
+
+		h3 {
+			font-size: 1.5rem;
+		}
+	}
 }
 
 // from "sm" and UP

resources/views/problem/partials/propose-solution-cta.blade.php

@@ -0,0 +1,11 @@
+<div class="propose-solution-cta">
+    <h3 class="mb-3 text-center">
+        Have a solution to suggest?
+    </h3>
+    <div class="d-flex justify-content-center">
+        <button type="button" title="Propose a Solution" class="btn btn-primary call-to-action align"
+            onclick="let currentUrl = window.location.href; if (!currentUrl.endsWith('/')) {currentUrl += '/';} window.location.href = currentUrl + 'solutions/propose';">
+            Propose a Solution
+        </button>
+    </div>
+</div>

resources/views/problem/show.blade.php

@@ -23,6 +23,12 @@
             @include('problem.partials.solutions-list')
         </section>
 
+        <section id="propose-solution-cta-sticky-container" class="sticky-container-outer-column d-none d-sm-block">
+            <div class="sticky-container-inner-div">
+                @include('problem.partials.propose-solution-cta')
+            </div>
+        </section>
+
     </div>
 
     @if (App::environment('local'))