Actual share icons in the share dialog

[lentinj]

We'd like to share with actual social networks, not just copy URLs.

[lentinj]

I think using native share is more future proof, and all round more useful. If I'm wrong we need the following for icons:

diff --git a/OZprivate/scss/tree.scss b/OZprivate/scss/tree.scss
index 84c53ee3..2e1efdc2 100644
--- a/OZprivate/scss/tree.scss
+++ b/OZprivate/scss/tree.scss
@@ -273,6 +273,19 @@ ul#controlButtons.button-label-hidden {
 }

 #share-modal {
+    .links a {
+        display: inline-block;
+        text-align: center;
+        font-size: 80%;
+        margin-right: 1rem;
+
+        > *[uk-icon] {
+            display: block;
+            > svg {
+                width: 50px;
+            }
+        }
+    }
     form {
         position: relative; /* Contain input[type='submit'] */
         > input[type='url'] {
diff --git a/views/treeviewer/UI_layer.load b/views/treeviewer/UI_layer.load
index 5e323c1f..e09f1a1b 100755
--- a/views/treeviewer/UI_layer.load
+++ b/views/treeviewer/UI_layer.load
@@ -314,6 +314,13 @@ unchecked>
     <div class="uk-modal-dialog uk-modal-body">
         <button class="uk-modal-close-default" type="button" uk-close></button>
         <h2 class="uk-modal-title">{{=T('Share')}}</h2>
+        <p class="links">
+          {{# https://faq.whatsapp.com/425247423114725}}
+          <a href="https://wa.me/?text=" target="_blank" rel="noopener"><span uk-icon="icon: whatsapp"></span>Whatsapp</a>
+          {{# https://www.codewithfaraz.com/article/82/comprehensive-list-of-social-media-share-links-urls-for-facebook-twitter-instagram-and-more}}
+          <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" rel="noopener"><span uk-icon="icon: facebook"></span>Facebook</a>
+          <a href="https://twitter.com/intent/tweet?url=" target="_blank" rel="noopener"><span uk-icon="icon: x"></span>X</a>
+        </p>
         <form class="no_disable">
           <input type="url" name="url"
               class="uk-input"