feature/gh-1643-report-page (#1664)

* style report page

opentech/apply/projects/forms.py

@@ -381,10 +381,10 @@ class UpdateProjectLeadForm(forms.ModelForm):
 
 class ReportEditForm(forms.ModelForm):
     public_content = RichTextField(
-        help_text="This section will be shared with the wider community."
+        help_text="This section of the report will be shared with the broader community."
     )
     private_content = RichTextField(
-        help_text="This section will be shared with staff members only."
+        help_text="This section of the report will be shared with staff only."
     )
     file_list = forms.ModelMultipleChoiceField(
         widget=forms.CheckboxSelectMultiple(attrs={'class': 'delete'}),

opentech/apply/projects/templates/application_projects/report_form.html

@@ -8,15 +8,21 @@
         <a class="admin-bar__back-link" href="{{ object.project.get_absolute_url }}">
             Project
         </a>
-        <h2 class="heading heading--no-margin">Report for the period {{ report.start_date }} to {{ report.end_date }}</h2>
-        <h5 class="heading heading--no-margin">{{ object.project.title }}</h5>
+        <h2 class="heading heading--no-margin">{{ object.project.title }}</h2>
+        <h5 class="heading heading--no-margin">Submit a report</h5>
     </div>
 </div>
 
 {% include "forms/includes/form_errors.html" with form=form %}
 
-<div class="wrapper wrapper--light-grey-bg wrapper--form wrapper--sidebar">
+<div class="wrapper wrapper--light-grey-bg wrapper--form">
     <div class="wrapper--sidebar--inner">
+
+        <div class="alert">
+            <svg class="alert__icon"><use xlink:href="#exclamation-point"></use></svg>
+            <p class="alert__text">You are reporting for the period running from {{ report.start_date }} to {{ report.end_date }}</p>
+        </div>
+
         <form class="form" action="" method="post" enctype="multipart/form-data" novalidate>
             {% csrf_token %}
             {{ form.media }}

opentech/static_src/src/sass/apply/components/_alert.scss

+.alert {
+    border: 2px solid $color--lighter-blue;
+    padding: 1rem;
+    margin: 0 0 2rem;
+    background-color: $color--light-blue-90;
+    display: flex;
+    align-items: center;
+
+    @include media-query(tablet-portrait) {
+        padding: 1.5rem;
+    }
+
+    &__icon {
+        width: 25px;
+        height: 25px;
+        fill: $color--light-blue;
+        margin-right: .8rem;
+    }
+
+    &__text {
+        margin: 0;
+        flex: 1;
+    }
+}

opentech/static_src/src/sass/apply/components/_data-block.scss

@@ -169,6 +169,7 @@
         margin-right: 1rem;
         text-decoration: underline;
         color: $color--primary;
+        word-break: normal;
 
         &:last-child {
             margin: 0;

opentech/static_src/src/sass/apply/main.scss

@@ -8,6 +8,7 @@
 @import 'base/typography';
 
 // Components
+@import 'components/alert';
 @import 'components/all-submissions-table';
 @import 'components/all-rounds-table';
 @import 'components/admin-bar';