Skip to content

Commit

Permalink
Update image and text on doc upload instructions page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@bseeger
bseeger committed Jun 13, 2024
1 parent 89f7ab9 commit dff8d39
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 22 deletions.
4 changes: 2 additions & 2 deletions src/main/resources/messages.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@ offboarding-information.continue-text=Ok, next

# How to add documents
how-to-add-documents.title=How to add documents
how-to-add-documents.header=How to add documents
how-to-add-documents.take-photos=Take photos on your phone
how-to-add-documents.header=Ways to add documents
how-to-add-documents.take-photos=Take photos with a phone, a tablet or other mobile device
how-to-add-documents.select-files=Select files stored on your device
how-to-add-documents.take-screenshot=Take a screenshot on your device
how-to-add-documents.you-can-upload=You can upload <b>up to {0} files</b>.
Expand Down
37 changes: 37 additions & 0 deletions src/main/resources/templates/fragments/icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2201,6 +2201,43 @@ <h1>Icons</h1>
</svg>
</td>
</tr>
<tr>
<td>personalDevices</td>
<td>
<svg th:fragment="personalDevices" aria-hidden="true" width="179" height="178" viewBox="0 0 179 178" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.1847 150.572C62.0872 148.724 40.0118 149.744 26.9712 134.423C13.5995 118.713 14.5039 96.3787 18.9472 76.2752C23.4466 55.9175 32.9763 36.8304 50.921 26.0629C71.2163 13.8851 96.5594 6.61065 117.879 16.9124C139.139 27.1855 145.833 52.0813 151.827 74.8213C158.184 98.937 168.796 127.511 151.881 145.91C135.35 163.891 106.578 152.815 82.1847 150.572Z" fill="#F8C441"/>
<rect x="36" y="23" width="106" height="85" fill="white"/>
<rect x="105" y="91" width="46" height="62" fill="white"/>
<path d="M117.6 112.407H143.999" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M108 130.845L144 130.845" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M108 122.329L144 122.329" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M108 139.359L144 139.359" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112.331 111.334H108V115.747H112.331V111.334Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M117.6 100.433H143.999" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M112.331 98H108V102.413H112.331V98Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M158.475 104.076H130.743C129.497 104.076 128.518 105.055 128.518 106.301V157.992C128.518 159.203 129.479 160.182 130.671 160.217L150.376 160.218H150.411H158.475C159.685 160.218 160.7 159.239 160.7 157.993L160.7 106.302C160.7 105.055 159.686 104.077 158.475 104.077L158.475 104.076ZM146.976 157.494H142.206C141.672 157.494 141.245 157.084 141.245 156.533C141.245 156.016 141.654 155.571 142.206 155.571H146.976C147.51 155.571 147.937 156.016 147.937 156.533C147.937 157.084 147.51 157.494 146.976 157.494ZM157.371 152.385H131.828V109.825H157.371V152.385Z" fill="#00223D"/>
<path d="M126.614 152.427H105.236V91.4082H149.897V102.177H154.062V87.3145C154.062 85.2853 152.406 83.6299 150.377 83.6299H140.587L104.757 83.6305C102.657 83.6305 101.037 85.2506 101.037 87.3151V156.486C101.037 158.551 102.728 160.206 104.757 160.206H127.345C126.9 159.565 126.615 158.835 126.615 157.981L126.614 152.427ZM122.396 86.2284H132.756C133.272 86.2284 133.717 86.638 133.717 87.1897C133.717 87.2609 133.717 87.3496 133.681 87.4035L132.346 88.1336H122.397C121.862 88.1336 121.435 87.7239 121.435 87.1723C121.435 86.6201 121.862 86.2284 122.396 86.2284Z" fill="#00223D"/>
<path d="M18.3008 135.013C18.3008 139.748 22.1459 143.593 26.8804 143.593H99.1484V133.108H18.3008V135.013Z" fill="#00223D"/>
<path d="M19.1016 131.203H99.1482V128.123L30.28 128.124C29.9242 128.124 29.6212 127.928 29.4612 127.644C29.2654 127.323 29.3013 126.95 29.4966 126.664L36.5633 115.699C36.8484 115.254 37.418 115.13 37.863 115.414C38.308 115.699 38.4326 116.269 38.1481 116.714L32.0247 126.219H99.1485L99.1479 113.029H30.7959L19.1016 131.203Z" fill="#00223D"/>
<path d="M36.6354 23.1931H142.35V81.7016H147.743V23.1931C147.743 20.2027 145.322 17.7998 142.35 17.7998H36.6354C33.645 17.7998 31.2422 20.2206 31.2422 23.1931V111.125H99.1492L99.1486 105.732H36.635L36.6354 23.1931Z" fill="#00223D"/>
<path d="M69.4004 50.4072H109" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M55 68.8447L108.999 68.8447" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M55 60.3291L108.999 60.3291" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M55 77.3594L108.999 77.3594" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M61.4963 49.334H55V53.7468H61.4963V49.334Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M69.4004 38.4326H109" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M61.4963 36H55V40.4128H61.4963V36Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="131" y="109" width="27" height="44" fill="white"/>
<path d="M143 125H155" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M135 139H155" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M135 133H155" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M135 145H155" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M138.609 124.631H135V127.818H138.609V124.631Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M143 117H155" stroke="#121111" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M138.609 115H135V118.187H138.609V115Z" fill="#FFF5FF" stroke="#121111" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</td>
</tr>
</tbody>
</table>
</article>
Expand Down
43 changes: 23 additions & 20 deletions src/main/resources/templates/mdBenefitsFlow/docUploadInstructions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,37 @@
maxSize=${@environment.getProperty('form-flow.uploads.max-file-size')}">
<th:block
th:replace="~{fragments/cardHeader :: cardHeader(header=#{how-to-add-documents.header})}"/>
<th:block th:replace="~{fragments/form :: form(action=${formAction}, content=~{::formContent})}">
<th:block th:ref="formContent">
<div class="form-card__content">
<div class="center">
<th:block th:replace="~{fragments/icons :: takingPicWithPhone}"></th:block>
</div>
<ul class="list--bulleted">
<li th:text="#{how-to-add-documents.take-photos}"></li>
<li th:text="#{how-to-add-documents.select-files}"></li>
<li th:text="#{how-to-add-documents.take-screenshot}"></li>
</ul>
<span class="spacing-left-1_5" th:utext="${#messages.msg('how-to-add-documents.you-can-upload', maxFiles)}"></span>
<br/>
<span class="spacing-left-1_5" th:utext="${#messages.msg('how-to-add-documents.each-file', maxSize)}"></span>
</div>
<div class="form-card__footer">
<th:block th:replace="~{fragments/inputs/yesOrNo :: yesOrNo(
<th:block
th:replace="~{fragments/form :: form(action=${formAction}, content=~{::formContent})}">
<th:block th:ref="formContent">
<div class="form-card__content">
<div class="center">
<th:block th:replace="~{fragments/icons :: personalDevices}"></th:block>
</div>
<ul class="list--bulleted">
<li th:text="#{how-to-add-documents.take-photos}"></li>
<li th:text="#{how-to-add-documents.select-files}"></li>
<li th:text="#{how-to-add-documents.take-screenshot}"></li>
</ul>
<span class="spacing-left-1_5"
th:utext="${#messages.msg('how-to-add-documents.you-can-upload', maxFiles)}"></span>
<br/>
<span class="spacing-left-1_5"
th:utext="${#messages.msg('how-to-add-documents.each-file', maxSize)}"></span>
</div>
<div class="form-card__footer">
<th:block th:replace="~{fragments/inputs/yesOrNo :: yesOrNo(
inputName='addDocuments',
ariaDescribe='header',
overrideNoText=#{doc-upload-instructions.skip-documents},
overrideYesText=#{doc-upload-instructions.add-documents})}"/>
</div>
</th:block>
</div>
</th:block>
</th:block>
</main>
</div>
</section>
</div>
<th:block th:replace="~{fragments/footer :: footer}" />
<th:block th:replace="~{fragments/footer :: footer}"/>
</body>
</html>

0 comments on commit dff8d39

Please sign in to comment.