Helpful copy and image lightbox fix

* On the "Certification Required" error page: show help text under the
  checklist to make it clear that clicking the checklist item will link
  to the profile photo or cert photo upload page.
* Add more helpful text around the site to address common confusion:
  * On the Photo Upload page for profile_pic and the user is already at
    quota: add special text saying they can use an existing gallery
    photo as their profile pic instead.
  * On the self Gallery view page: if the user has no profile pic
    currently set, offer advice and links on how to set one.
* Fix the image max-width on Gallery lightbox modals

web/static/css/theme.css

@@ -52,6 +52,7 @@ img {
 .photo-modal {
     max-width: calc(100vw - 40px);
     max-height: calc(100vh - 40px);
+    width: auto;
 }
 .photo-modal #detailImg {
     position: relative;

web/templates/errors/certification_required.html

@@ -32,13 +32,15 @@
                 {{if .CurrentUser.ProfilePhoto.ID}}
                 <span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
                 {{else}}
-                <span class="icon"><i class="fa fa-circle has-text-danger"></i></span>
+                <span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
                 {{end}}
                 <span>
                     Upload a Profile Picture to your account that shows your face
-                    {{if not .CurrentUser.ProfilePhoto.ID}}
+
-                    <span class="icon"><i class="fa fa-external-link"></i></span>
+                    <p class="help ml-5 pl-2">
-                    {{end}}
+                        Click here to upload a new profile picture
+                        <i class="fa fa-external-link ml-1"></i>
+                    </p>
                 </span>
             </a>
         </li>
@@ -48,13 +50,15 @@
                 {{if .CurrentUser.Certified}}
                 <span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
                 {{else}}
-                <span class="icon"><i class="fa fa-circle has-text-danger"></i></span>
+                <span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
                 {{end}}
                 <span>
                     Get certified by uploading a verification selfie
-                    {{if not .CurrentUser.Certified}}
+
-                    <span class="icon"><i class="fa fa-external-link"></i></span>
+                    <p class="help ml-5 pl-2">
-                    {{end}}
+                        Click here to go to the Certification Photo upload page
+                        <i class="fa fa-external-link ml-1"></i>
+                    </p>
                 </span>
             </a>
         </li>

web/templates/photo/certification.html

@@ -72,7 +72,10 @@
                                         re-approved with a new Certification Photo to be recertified.
                                     </p>
 
-                                    <button type="submit" class="button is-danger">
+                                    <button type="submit" class="button is-danger"
+                                        {{if eq .CertificationPhoto.Status "approved"}}
+                                        onclick="return window.confirm('Removing this photo will mark your account as Not Certified.\n\nYou will then need to upload a new certification photo for approval to certify your account again.\n\nAre you sure you want to do this?')"
+                                        {{end}}>
                                         <span class="icon"><i class="fa fa-trash"></i></span>
                                         <span>Delete This Photo</span>
                                     </button>

web/templates/photo/gallery.html

@@ -283,6 +283,47 @@
                 </div>
             </div>
 
+            <!-- If viewing our own profile, and we don't have a profile picture set, offer advice. -->
+            {{if and (not .IsSiteGallery) (eq .CurrentUser.ProfilePhoto.ID 0)}}
+            <div class="notification is-success is-light content">
+                <p>
+                    <i class="fa-regular fa-id-badge mr-1"></i>
+                    <strong>Your default profile picture is not set</strong>
+
+                    <p>
+                        Your default profile picture is currently not set to anything, and appears to other members as
+                        the default blue <img src="/static/img/shy.png" width="16" height="16"> placeholder image.
+                    </p>
+
+                    <ul>
+                        <li>
+                            To upload a <strong>new</strong> profile picture, <a href="/photo/upload?intent=profile_pic">click here</a>.
+                        </li>
+                        <li>
+                            To use one of your <strong>existing</strong> photos as your profile picture:
+                            <ol class="my-2">
+                                <li>
+                                    Click on the "Edit" button beneath one of your photos below.
+                                </li>
+                                <li>
+                                    On the edit page, below the picture, click on the button to "Set this as my profile photo (crop image)"
+                                    and select the square shape you want for your profile pic.
+                                </li>
+                                <li>
+                                    Click on "Save Changes" when done!
+                                </li>
+                            </ol>
+                        </li>
+                    </ul>
+
+                    <p>
+                        Having a profile picture set, along with an approved <a href="/photo/certification">certification photo</a>,
+                        is required to access the social features on {{PrettyTitle}} such as the chat room, forums and member directory.
+                    </p>
+                </p>
+            </div>
+            {{end}}
+
             <!-- Indicator if friends-only is selected. -->
             {{if eq .FilterWho "friends"}}
             <div class="notification is-success is-light">

web/templates/photo/upload.html

@@ -78,6 +78,13 @@
                     {{end}}
                 </p>
 
+                {{if and (eq .Intent "profile_pic") (ge .PhotoCount .PhotoQuota)}}
+                <p class="block">
+                    You have reached your maximum number of photos. <strong>To use one of your existing photos as your profile picture,</strong>
+                    please visit your <a href="/u/{{.CurrentUser.Username}}/photos">Gallery page</a>, click on the "Edit" button for a photo,
+                    then the button to set it as your profile picture will appear on the Edit page. Remember to click "Save" when done!
+                </p>
+                {{else}}
                 <p class="block">
                     You may upload <strong>{{SubtractInt .PhotoQuota .PhotoCount}}</strong> more photo{{Pluralize (SubtractInt .PhotoQuota .PhotoCount)}}.
                     {{if not .CurrentUser.Certified}}
@@ -85,6 +92,7 @@
                         additional pictures.
                     {{end}}
                 </p>
+                {{end}}
             </div>
             {{end}}