diff --git a/opentech/apply/projects/models.py b/opentech/apply/projects/models.py
index d971b4072c7cede19ae014c7c43487f17f0c3a68..5d72a9718228a7938e36d8a42a9d3969db7e8ef4 100644
--- a/opentech/apply/projects/models.py
+++ b/opentech/apply/projects/models.py
@@ -289,6 +289,10 @@ class Project(models.Model):
correct_state = self.status == COMMITTED and not self.is_locked
return correct_state and self.user_has_updated_details
+ @property
+ def requires_approval(self):
+ return not self.approvals.exists()
+
def get_missing_document_categories(self):
"""
Get the number of documents required to meet each DocumentCategorys minimum
diff --git a/opentech/apply/projects/templates/application_projects/project_admin_detail.html b/opentech/apply/projects/templates/application_projects/project_admin_detail.html
index d2d810e213ee4629e7a69eaf0f3c7c3680088207..103d65b265caf37edd8662965e470858d774c123 100644
--- a/opentech/apply/projects/templates/application_projects/project_admin_detail.html
+++ b/opentech/apply/projects/templates/application_projects/project_admin_detail.html
@@ -46,13 +46,25 @@
</div>
{% endif %}
-{% if object.can_send_for_approval %}
-<a data-fancybox
- data-src="#send-for-approval"
- class="button button--bottom-space button--primary button--full-width"
- href="#">
- Submit for Approval
-</a>
+{% if object.requires_approval %}
+ <a
+ {% if not object.can_send_for_approval %}
+ onclick="return false"
+ data-tooltip="
+ {% if not object.lead %}
+ A lead must be assigned
+ {% elif not object.user_has_updated_details %}
+ Project approval form must be completed
+ {% elif object.is_locked %}
+ Currently awaiting approval
+ {% endif %}"
+ {% endif %}
+ data-fancybox
+ data-src="#send-for-approval"
+ class="button button--bottom-space button--primary button--full-width {% if not object.can_send_for_approval %}button--tooltip-disabled{% endif %}"
+ href="#">
+ Submit for Approval
+ </a>
{% endif %}
{% if object.can_make_approval %}
diff --git a/opentech/apply/projects/templates/application_projects/project_applicant_detail.html b/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
index 2ca4b45978990b5f19dc4d1b5537fd11141a2aa4..d7e3d95b391a77c85ad79dfeefb4f5fdebf3298c 100644
--- a/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
+++ b/opentech/apply/projects/templates/application_projects/project_applicant_detail.html
@@ -2,17 +2,15 @@
{% block notifications %}
{% if not object.editable %}
-<div class="wrapper wrapper--sidebar">
- <div class="wrapper--sidebar--inner wrapper--error">
- <div>
- <p>Your project is not editable at this point.</p>
+ <div class="error-bar">
+ <p class="error-bar__copy">
+ Your project is not editable at this point.
{% if not object.lead %}
- <p>We are awaiting a lead to be assigned.</p>
+ We are awaiting a lead to be assigned.
{% else %}
- <p>It is currently under review by a staff member.</p>
+ It is currently under review by a staff member.
{% endif %}
- </div>
+ </p>
</div>
-</div>
{% endif %}
{% endblock %}
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 579ea4e6fe566e624b8ee51757c97649ddff4da6..aadcc4a8f3d611d87a5ecc3edc852a17b5a54ec8 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -17,6 +17,7 @@ $color--mid-dark-grey: #919191;
// Brand
$color--lightest-blue: #24aae1;
$color--light-blue: #0d7db0;
+$color--lighter-blue: #7ab8d4;
$color--dark-blue: #0c72a0;
$color--darkest-blue: #3d6bdb;
$color--mustard: #e6ab32;
@@ -61,6 +62,7 @@ $color--default: $color--dark-grey;
$color--primary: $color--light-blue;
$color--error: $color--tomato;
$color--correct: $color--mint;
+$color--button-disabled: $color--lighter-blue;
// Fonts
$font--primary: 'noto-sans';
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 03396c4f09819ec1ba16cb8cb52ead7be3b4a208..f5b89abb31e2b2d794f975eaf89f6b15934e514a 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -317,4 +317,13 @@
&--link {
color: $color--primary;
}
+
+ &--tooltip-disabled {
+ background-color: $color--button-disabled;
+
+ &:hover {
+ cursor: default;
+ background-color: $color--button-disabled;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_error-bar.scss b/opentech/static_src/src/sass/apply/components/_error-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..07465dce7bc77ec71a23ceeb7f59c173d4fd6858
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_error-bar.scss
@@ -0,0 +1,15 @@
+.error-bar {
+ padding: $mobile-gutter;
+ margin: 0 auto 2rem;
+ background: $color--tomato;
+ color: $color--white;
+
+ &__copy {
+ margin: 0 0 1rem;
+ font-weight: $weight--bold;
+
+ &:last-child {
+ margin: 0;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_tooltip.scss b/opentech/static_src/src/sass/apply/components/_tooltip.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61af9c25ae8f87f33ec7d9e32a056f082d24bd2e
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_tooltip.scss
@@ -0,0 +1,30 @@
+[data-tooltip] {
+ position: relative;
+ z-index: 2;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+[data-tooltip]::before {
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity, bottom, $transition;
+ position: absolute;
+ bottom: 110%;
+ margin-bottom: 5px;
+ padding: 7px;
+ background-color: $color--dark-grey;
+ color: $color--white;
+ content: attr(data-tooltip);
+ text-align: center;
+ font-size: 14px;
+}
+
+[data-tooltip]:hover::before {
+ visibility: visible;
+ opacity: 1;
+ bottom: 130%;
+}
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 77d1f71ed4a5141790056dc54694b3fae28fdc9c..0510a5a0c98ecef0fbecc80b7e940e3e30c4445f 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -16,6 +16,7 @@
@import 'components/comment';
@import 'components/button';
@import 'components/editor';
+@import 'components/error-bar';
@import 'components/feed';
@import 'components/filters';
@import 'components/grid';
@@ -49,6 +50,7 @@
@import 'components/submission-meta';
@import 'components/revision';
@import 'components/table';
+@import 'components/tooltip';
@import 'components/traffic-light';
@import 'components/wrapper';
@import 'components/revisions';