[#1979] Changed date captions in caselist

src/open_inwoner/scss/components/Card/Card.scss

@@ -98,6 +98,15 @@
     object-fit: contain;
   }
 
+  &__caption {
+    color: var(--color-gray-900);
+    margin: 0;
+  }
+
+  &__text--small {
+    font-size: var(--font-size-body-small);
+  }
+
   &__body {
     padding: var(--card-spacing);
 
@@ -223,6 +232,16 @@
     font-size: var(--font-size-heading-card);
   }
 
+  &__heading--h4,
+  &__heading--h4 .link {
+    color: var(--color-black);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-heading-4);
+    font-weight: var(--font-weight-heading-4);
+    line-height: var(--font-line-height-heading-4);
+    margin: 0;
+  }
+
   &--product {
     padding: 20px;
     align-items: end;

src/open_inwoner/scss/components/Cases/CaseDetail.scss

@@ -39,7 +39,7 @@
         @extend .button--disabled;
         background-color: var(--color-gray);
         border-color: var(--color-gray);
-        color: var(--color-gray-90);
+        color: var(--color-gray-900);
         cursor: default;
         font-weight: bold;
         justify-content: center;
@@ -52,7 +52,7 @@
       @extend .button--disabled;
       background-color: var(--color-gray);
       border-color: var(--color-gray);
-      color: var(--color-gray-90);
+      color: var(--color-gray-900);
       cursor: default;
       font-weight: bold;
       justify-content: center;

src/open_inwoner/scss/components/Dashboard/Dashboard.scss

@@ -49,7 +49,7 @@
   }
 
   &__item-label {
-    color: var(--color-gray-90);
+    color: var(--color-gray-900);
   }
 
   .h4 {

src/open_inwoner/scss/components/Form/FileInput.scss

@@ -88,7 +88,7 @@
       border-color: var(--color-red-notification);
 
       .p {
-        color: var(--color-gray-90);
+        color: var(--color-gray-900);
       }
 
       [class*='icon'] {

src/open_inwoner/scss/components/List/_ListItem.scss

@@ -21,7 +21,8 @@
   }
 
   & &__caption {
-    color: var(--color-gray-lighter);
+    color: var(--color-gray-900);
+    font-size: var(--font-size-body-small);
     margin-top: 0;
   }
 

src/open_inwoner/scss/components/Status/_StatusList.scss

@@ -51,7 +51,7 @@
     }
 
     .link-future {
-      color: var(--color-gray-90);
+      color: var(--color-gray-900);
     }
 
     .p-date {

src/open_inwoner/scss/components/Table/Tabled.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
 
   &__key {
-    color: var(--color-gray-90);
+    color: var(--color-gray-900);
   }
   &__value {
     color: var(--color-gray-dark);

src/open_inwoner/scss/views/App.scss

@@ -25,7 +25,7 @@
   --color-black: #000;
   --color-blue: #1261a3;
   --color-gray: #d2d2d2;
-  --color-gray-90: #676767;
+  --color-gray-900: #676767;
   --color-gray-dark: #4b4b4b;
   --color-gray-lighter: #7a7a7a;
   --color-gray-light: #d2d2d2;

src/open_inwoner/templates/pages/cases/list_inner.html

@@ -17,13 +17,16 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
                 <!-- submission cases -->
                 {% if case.case_type == "OpenSubmission" %}
                     <a href="{{ case.vervolg_link }}"  class="cases__link">
-                    <p class="h4"><span class="link link__text">{{ case.naam }}</span></p>
+                    <h4 class="card__heading--h4"><span class="link link__text">{{ case.naam }}</span></h4>
                     {% render_list %}
                     <span class="case-list">
+                        <li class="list-item list-item--compact">
+                            <p class="card__caption card__text--small"><span>Aanvraag ingediend op:</span> <span>{{ case.start_date }}</span></p>
+                        </li>
                         {% list_item text="Openstaande aanvraag" caption=_("Status") compact=True strong=False %}
-                        {% list_item text=case.datum_laatste_wijziging caption=_("Laatste wijziging") compact=True strong=False %}
+                        <!-- {% list_item text=case.datum_laatste_wijziging caption=_("Laatste wijziging") compact=True strong=False %} -->
                         {% with end_date=case.eind_datum_geldigheid|default:"Geen" %}
-                            {% list_item text=end_date caption=_("Verloopt op") compact=True strong=False%}
+                            {% list_item text=end_date caption=_("Aanvraag verloopt op:") compact=True strong=False%}
                         {% endwith %}
                     </span>
                     {% endrender_list %}
@@ -35,15 +38,17 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
                 <!-- other cases -->
                 {% else %}
                     <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
-                    <p class="h4"><span class="link link__text">{{ case.description }}</span></p>
+                    <h4 class="card__heading--h4"><span class="link link__text">{{ case.description }}</span></h4>
                     {% render_list %}
                         <span class="case-list">
+                        <li class="list-item list-item--compact">
+                            <p class="card__caption card__text--small"><span>Aanvraag ingediend op:</span> <span>{{ case.start_date }}</span></p>
+                        </li>
                         {% if case.current_status %}
                             {% list_item case.current_status caption=_("Status") compact=True strong=False %}
                         {% else %}
                             {% list_item "No status" caption=_("Status") compact=True strong=False %}
                         {% endif%}
-                        {% list_item case.start_date caption=_("Ontvangstdatum") compact=True strong=False %}
                         {% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
                         </span>
                     {% endrender_list %}