Lots of progress

src/OAP/Oap.Theme/Views/ButtonPart.cshtml

@@ -0,0 +1,16 @@
+@using OrchardCore.Forms.Models
+@model OrchardCore.DisplayManagement.Views.ShapeViewModel<ButtonPart>
+@{
+    var formElementPart = Model.Value.ContentItem.As<FormElementPart>();
+    var formInputElementPart = Model.Value.ContentItem.As<FormInputElementPart>();
+    var elementId = formElementPart.Id;
+    var elementName = formInputElementPart.Name;
+    var id = !string.IsNullOrEmpty(elementId) ? elementId : !string.IsNullOrEmpty(elementName) ? Html.GenerateIdFromName(elementName) : default(string);
+}
+<button
+    class="block cursor-pointer rounded-md bg-amber-300 px-4 py-2 text-gray-800 hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-600"
+    type="@Model.Value.Type"
+    name="@elementName"
+    id="@elementId">
+    @Model.Value.Text
+</button>

src/OAP/Oap.Theme/Views/Content-OapApplicationFormStep.cshtml

@@ -1,10 +1,20 @@
 <h1 class="mb-6 border-b-2 border-solid border-black pb-1 text-center text-2xl font-bold">
-    @Model.Header.TitlePart.Title
+    Form Title
 </h1>
 
 <div class="flex flex-row gap-x-4">
     <aside class="h-full min-h-full">
         <menu alias="alias:application-steps-menu" cache-id="application-steps-menu" cache-fixed-duration="00:05:00" cache-tag="alias:application-steps-menu" />
     </aside>
-    
+
+    <div>
+        <h2 class="text-lg font-bold">
+            @Model.Header.TitlePart.Title
+        </h2>
+        
+        @await DisplayAsync(Model.Content.HtmlBodyPart)
+
+        @await DisplayAsync(Model.Content.FlowPart)
+    </div>
+
 </div>

src/OAP/Oap.Theme/Views/Form-FlowPart.cshtml

@@ -0,0 +1,13 @@
+@model OrchardCore.Flows.ViewModels.FlowPartViewModel
+@inject OrchardCore.ContentManagement.Display.IContentItemDisplayManager ContentItemDisplayManager
+
+@foreach (var widget in Model.FlowPart.Widgets)
+{
+    var widgetContent = await ContentItemDisplayManager.BuildDisplayAsync(
+        widget,
+        Model.BuildPartDisplayContext.Updater,
+        Model.BuildPartDisplayContext.DisplayType,
+        Model.BuildPartDisplayContext.GroupId);
+        
+    @await DisplayAsync(widgetContent)
+}

src/OAP/Oap.Theme/Views/LabelPart.cshtml

@@ -0,0 +1,8 @@
+@using OrchardCore.Forms.Models
+@model OrchardCore.DisplayManagement.Views.ShapeViewModel<LabelPart>
+
+@{
+    var contentItem = Model.Value.ContentItem;
+    var formElementPart = contentItem.As<FormElementPart>();
+}
+<label id="@formElementPart.Id" for="@Model.Value.For">@contentItem.DisplayText</label>

src/OAP/Oap.Theme/Views/OapExplanationPart.cshtml

@@ -0,0 +1,3 @@
+<p class="pl-4 my-2 text-sm text-gray-500">
+    @Html.Raw(Model.Html)
+</p>

src/OAP/Oap.Theme/Views/Widget-Button.cshtml

@@ -0,0 +1,3 @@
+<div class="flex justify-end">
+    @await DisplayAsync(Model.Content)
+</div>

src/OAP/Oap.Theme/Views/Widget-Form.cshtml

@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4">
+    @await DisplayAsync(Model.Content)
+</div>

src/OAP/Oap.Theme/Views/Widget-Input.cshtml

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-2">
+    @await DisplayAsync(Model.Content)
+</div>

src/OAP/Oap.Theme/Views/Widget-OapExplanation.cshtml

@@ -0,0 +1,3 @@
+<div>
+    @await DisplayAsync(Model.Content)
+</div>

src/OAP/Oap.Theme/Views/Widget-Select.cshtml

@@ -0,0 +1,3 @@
+<div class="flex flex-col">
+    @await DisplayAsync(Model.Content)
+</div>

src/OAP/Oap.Theme/wwwroot/site.css

@@ -564,15 +564,25 @@ span.field-validation-error {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .mb-6 {
   margin-bottom: 1.5rem;
 }
+.block {
+  display: block;
+}
 .flex {
   display: flex;
 }
 .table {
   display: table;
 }
+.grid {
+  display: grid;
+}
 .hidden {
   display: none;
 }
@@ -585,18 +595,39 @@ span.field-validation-error {
 .max-w-screen-md {
   max-width: 768px;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
 .flex-col {
   flex-direction: column;
 }
+.justify-end {
+  justify-content: flex-end;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
 .gap-x-4 {
   column-gap: 1rem;
 }
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -618,6 +649,10 @@ span.field-validation-error {
   --tw-border-opacity: 1;
   border-right-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.bg-amber-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 211 77 / var(--tw-bg-opacity));
+}
 .p-6 {
   padding: 1.5rem;
 }
@@ -629,6 +664,14 @@ span.field-validation-error {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -638,6 +681,9 @@ span.field-validation-error {
 .pt-1 {
   padding-top: 0.25rem;
 }
+.pl-4 {
+  padding-left: 1rem;
+}
 .text-center {
   text-align: center;
 }
@@ -652,6 +698,10 @@ span.field-validation-error {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .font-bold {
   font-weight: 700;
 }
@@ -663,9 +713,28 @@ span.field-validation-error {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+.hover\:bg-amber-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
+}
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+.disabled\:bg-gray-400:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+.disabled\:text-gray-600:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}