diff --git a/app/assets/images/budgets/budget_multiple_heading_icon.png b/app/assets/images/budgets/budget_multiple_heading_icon.png
new file mode 100644
index 000000000..14a3ec1eb
Binary files /dev/null and b/app/assets/images/budgets/budget_multiple_heading_icon.png differ
diff --git a/app/assets/images/budgets/budget_single_heading_icon.png b/app/assets/images/budgets/budget_single_heading_icon.png
new file mode 100644
index 000000000..2a1f72e35
Binary files /dev/null and b/app/assets/images/budgets/budget_single_heading_icon.png differ
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index fbb7a3176..a634ecf07 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -665,7 +665,8 @@ code {
display: flex;
flex-wrap: wrap;
- a {
+ a,
+ button {
@include regular-button;
margin-left: auto;
}
diff --git a/app/assets/stylesheets/admin/budgets/heading_mode.scss b/app/assets/stylesheets/admin/budgets/heading_mode.scss
new file mode 100644
index 000000000..d3ee8eadd
--- /dev/null
+++ b/app/assets/stylesheets/admin/budgets/heading_mode.scss
@@ -0,0 +1,77 @@
+.admin .heading-mode {
+ border-radius: rem-calc(12);
+ color: $admin-text;
+ display: flex;
+ flex-wrap: wrap;
+ max-width: $global-width * 0.6;
+ width: 100%;
+
+ section {
+ @include grid-column-gutter;
+ display: flex;
+ flex-flow: column;
+ margin-bottom: $line-height;
+ width: 100%;
+
+ @include breakpoint(medium) {
+ width: 50%;
+
+ &:last-of-type {
+ border-left: $admin-border;
+ }
+ }
+
+ &.single-heading-option h2::after {
+ content: image-url("budgets/budget_single_heading_icon.png");
+ }
+
+ &.multiple-heading-option h2::after {
+ content: image-url("budgets/budget_multiple_heading_icon.png");
+ }
+
+ h2::after {
+ display: block;
+ text-align: center;
+ }
+ }
+
+ h1 {
+ margin-bottom: $line-height * 2;
+ margin-top: $line-height;
+ text-transform: uppercase;
+ width: 100%;
+ }
+
+ h1,
+ h2 {
+ font-size: rem-calc(24);
+ text-align: center;
+ }
+
+ h2 {
+ font-weight: 500;
+ padding-top: $line-height;
+ }
+
+ p {
+ font-size: $small-font-size;
+ font-style: italic;
+ flex: 1;
+ }
+
+ a {
+ @include hollow-button;
+ margin: 0 auto;
+ max-width: max-content;
+ }
+
+ .close-button {
+ border: 3px solid $admin-text;
+ border-radius: 50%;
+ color: $admin-text;
+ font-size: rem-calc(23);
+ font-weight: bold;
+ height: rem-calc(30);
+ width: rem-calc(30);
+ }
+}
diff --git a/app/components/admin/budgets/form_component.html.erb b/app/components/admin/budgets/form_component.html.erb
index 12464d641..0c0e8aac4 100644
--- a/app/components/admin/budgets/form_component.html.erb
+++ b/app/components/admin/budgets/form_component.html.erb
@@ -1,4 +1,6 @@
<%= translatable_form_for [namespace, budget], html: { class: "budgets-form" } do |f| %>
+ <%= hidden_field_tag(:mode, helpers.budget_mode) if helpers.respond_to?(:budget_mode) %>
+