Move styles from theme.scss to SFCs (#113)

packages/web-forms/src/components/ControlLabel.vue

@@ -4,6 +4,20 @@ const props = defineProps<{question: AnyLeafNode}>();
 </script>
 
 <template>
-	<label :for="question.nodeId"><span v-if="question.currentState.required">*</span> {{ props.question.currentState.label?.asString }}</label>
+	<label :for="question.nodeId">
+		<span v-if="question.currentState.required" class="required">* </span>
+		<span>{{ props.question.currentState.label?.asString }}</span>
+	</label>
 </template>
 
+<style scoped lang="scss">
+
+label {
+	font-weight: 400;
+
+	.required {
+		color: var(--red-500); // TODO/sk danger color should be a variable
+	}
+}
+
+</style>

packages/web-forms/src/components/FormHeader.vue

@@ -11,3 +11,21 @@ defineProps<{title: string}>();
 	</Card>
 </template>
 
+<style scoped lang="scss">
+.form-title {
+	border-radius: 10px;
+	box-shadow: 0px 1px 3px 1px #00000026;
+	border-top: none;
+	margin-top: 20px;
+
+	:deep(.p-card-content) {
+		padding: 0 1rem;
+
+		h1 {
+			font-size: 1.5rem;
+			font-weight: 500;
+			margin: 10px 0;
+		}
+	}
+}
+</style>

packages/web-forms/src/components/FormLanguageMenu.vue

@@ -37,3 +37,26 @@ const handleLanguageChange = (event: LanguageDropdownChangeEvent) => {
 	</Dropdown>
 </template>
 
+<style scoped lang="scss">
+.p-dropdown.rounded {
+	border-radius: 30px;
+	border: none;
+	width: 160px;
+	color: #424242;
+
+	&.p-focus {
+		box-shadow: inset 0 0 0 1px var(--primary-500);
+	}
+
+	:deep(.p-dropdown-label) {
+		padding: 5px 16px;
+		span {
+			vertical-align: middle;
+		}
+	}
+
+	.icon-language {
+		margin-right: 10px;
+	}
+}
+</style>

packages/web-forms/src/components/FormPanel.vue

@@ -24,7 +24,6 @@ const props = withDefaults(defineProps<PanelProps>(), {
 });
 
 const panelClass = computed(() => [
-	'with-title',
 	props.menuItems && props.menuItems.length > 0 ? 'with-context-menu' : 'no-context-menu',
 	props.class
 ]);
@@ -69,3 +68,64 @@ const toggleMenu = (event:  Event) => {
 	</template>
 </template>
 
+<style scoped lang="scss">
+h2 {
+	font-size: 1.2rem;
+	font-weight: 500;
+	margin: 0;
+	display: flex;
+}
+
+.label-number {
+	display: inline-block;
+	margin: 2px 5px 0 17px;
+	padding-top: 4px;
+	width: 20px;
+	height: 20px;
+	font-weight: 400;
+	border-radius: 30px;
+	background-color: var(--gray-200);
+	font-size: 10px;
+	text-align: center;
+}
+
+.panel-title {
+	cursor: pointer;
+}
+
+.btn-context {
+	margin-top: -10px;
+
+	.p-button-icon {
+		font-size: 1.5rem;
+	}
+}
+
+.p-panel.p-panel-toggleable {	
+	background: var(--surface-0);
+	box-shadow: none;
+
+	.p-panel {
+		margin-left: -10px;
+	}
+
+	:deep(.p-panel-header) {
+		display: flex;
+		padding: 0;
+		height: 40px;
+		align-items: start;
+	}
+
+	:deep(.p-panel-content) {
+		border-left: 2px solid var(--gray-200);
+		margin-left: 10px;
+		border-radius: 0;
+		padding: 0 0 0 1.5rem;
+	}
+
+	:deep(.p-panel-toggler){
+		display: none;
+	}
+	
+}
+</style>

packages/web-forms/src/components/OdkWebForm.vue

@@ -35,7 +35,7 @@ const print = () => window.print();
 	<div v-if="odkForm" class="odk-form">
 		<div class="form-wrapper">
 			<div class="odk-menu-bar flex justify-content-end flex-wrap gap-3">
-				<Button severity="secondary" rounded icon="icon-local_printshop" @click="print" />
+				<Button class="print-button" severity="secondary" rounded icon="icon-local_printshop" @click="print" />
 				<FormLanguageMenu :form="odkForm" />
 			</div>
 
@@ -60,3 +60,46 @@ const print = () => window.print();
 	</div>
 </template>
 
+<style scoped lang="scss">
+.odk-form {
+	width: 100%;
+
+	.form-wrapper {
+		max-width: 800px;
+		margin: auto;
+		padding-top: 10px;
+		padding-bottom: 20px;
+
+		.questions-card {
+			border-radius: 10px;
+			box-shadow: 0px 1px 3px 1px #00000026;
+			border-top: none;
+			margin-top: 20px;
+
+			:deep(.p-card-content) {
+				padding: 1rem;
+			}
+		}
+	}
+
+	.print-button.p-button {
+		height: 2rem;
+		width: 2rem;
+	}
+
+	.footer {
+		margin-top: 20px;
+
+		button {
+			min-width: 160px;
+		}
+	}
+
+}
+
+	
+
+
+
+
+</style>

packages/web-forms/src/components/RepeatRange.vue

@@ -20,3 +20,20 @@ const label = computed(() => props.node.currentState.label?.asString);
 	</FormPanel>
 </template>
 
+<style scoped lang="scss">
+
+.p-button.p-button-outlined.btn-add {
+	box-shadow: inset 0 0 0 1px #cbcacc;
+	margin-left: 36px;
+
+	&:hover {
+		background: var(--primary-100);
+	}
+}
+
+.repeat {
+	.p-button.p-button-outlined.btn-add {
+		margin-left: 25px;
+	}
+}
+</style>

packages/web-forms/src/components/controls/InputText.vue

@@ -16,11 +16,22 @@ const setValue = (value = '') => {
 
 	<InputText
 		:id="question.nodeId"
-		:required="question.currentState.required"
-		:readonly="question.currentState.readonly"
+		:required="question.currentState.required" 
+		:disabled="question.currentState.readonly"
 		variant="filled"
 		:model-value="question.currentState.value"
 		@update:model-value="setValue"
 	/>
 </template>
 
+<style scoped lang="scss">
+input.p-inputtext {
+		&:read-only {
+			cursor: not-allowed;
+		}
+
+		&.p-variant-filled:enabled:focus {
+			background-color: var(--surface-100);
+		}
+	}
+</style>

packages/web-forms/src/components/controls/SelectControl.vue

@@ -71,3 +71,24 @@ const value = computed(() => {
 		</div>
 	</template>
 </template>
+
+<style scoped lang="scss">
+
+.select1,
+.selectN {
+	display: flex;
+	align-items: center;
+
+	label {
+		padding-left: 0.5rem;
+		margin-left: 0;
+		margin-bottom: 0;
+		cursor: pointer;
+	}
+
+	&.disabled,
+	&.disabled label {
+		cursor: not-allowed;
+	}
+}
+</style>