Add styling for various components of the survey

survey-frontend/src/survey.scss

@@ -4,6 +4,29 @@
 	visibility: hidden;
 }
 
+.survey-title {
+	color: #2db394;
+}
+
+.survey-description {
+	color: #262261;
+	font-weight: 400;
+}
+
+.survey-title:after {
+    content: '';
+    display: inline-block;
+    width: 0.1rem;
+    height: 1em;
+    background-color: #2db394;
+    margin: 0 .5rem;
+    vertical-align: middle;
+}
+
+.survey-title-nren {
+	color: #262261;
+}
+
 #sv-nav-complete {
 	width: 0px;
 	height: 0px;
@@ -11,22 +34,94 @@
 	visibility: hidden;
 }
 
+.sv-header-flex {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 2rem;
+	color: #2db394;
+	font-weight: bold;
+	padding-left: 1rem !important;
+}
+
+.sv-container-modern__title {
+	display: none;
+}
+
+.sv-title.sv-page__title {
+	// display: none;
+	// all: unset;
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: #2db394;
+	margin-bottom: 0.25rem;
+}
+
+.sv-title.sv-panel__title {
+	color: #262261
+}
+
+.sv-description {
+	font-weight: bold;
+	color: #262261
+}
+
+.sv-text {
+	border-bottom: .2rem dotted var(--text-border-color, #d4d4d4)
+}
+
 .verification {
+	min-height: 1.5rem;
+	order: 2; // Make sure the button comes last
+	margin-left: auto; // Push button to the right
 	display: inline-block;
-	margin-left: 20px;
+	border-radius: 1rem;
+	padding: 0 1rem;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+	margin-right: .4rem;
+	box-shadow: 0 0 2px 2px #2db394;
 }
 
 .verification-required {
-	color: red;
-	border-style: solid;
-	border-width: 1px;
+	font-size: 0.85rem;
+	font-weight: bold;
+	text-transform: uppercase;
+	background-color: white;
+}
+
+.verification-ok {
+	color: white;
+	font-size: 0.85rem;
+	font-weight: bold;
+	text-transform: uppercase;
+	background-color: #2db394;
+
+	// disable hover/clicking/... for the button when verified
+	pointer-events: none;
+
 }
 
 .sv-action-bar-item.verification.verification-ok:hover {
 	cursor: auto;
-	background-color: transparent;
+	background-color: #2db394;
 }
 
+.survey-content,
 .survey-progress {
-	display: flex;
+	padding-right: 5rem;
+	padding-left: 5rem;
+}
+
+.survey-container {
+
+	margin-top: 2.5rem;
+
+	// limit the width on very large screens
+	@media screen and (min-width: 1441px) {
+		max-width: 65vw;
+	}
+
+	// default to 100vw
+	max-width: 100vw;
 }
\ No newline at end of file