Merge branch 'help-add-members' into dev

Author: gustavotoyota

apps/client/public/help/inviting-users/accept-reject-invitation.webp

@@ -22,21 +22,33 @@
           </router-link>
         </li>
 
+        <li>
+          <router-link :to="{ name: 'help/offline-usage' }">
+            Can I use DeepNotes while offline?
+          </router-link>
+        </li>
+
+        <li>
+          <router-link :to="{ name: 'help/multi-page-text-search' }">
+            Can I search text across multiple pages?
+          </router-link>
+        </li>
+
         <li>
           <router-link :to="{ name: 'help/how-to-create-a-group' }">
             How to create a group?
           </router-link>
         </li>
 
         <li>
-          <router-link :to="{ name: 'help/offline-usage' }">
-            Can I use DeepNotes while offline?
+          <router-link :to="{ name: 'help/inviting-users' }">
+            How to invite users to a group?
           </router-link>
         </li>
 
         <li>
-          <router-link :to="{ name: 'help/multi-page-text-search' }">
-            Can I search text across multiple pages?
+          <router-link :to="{ name: 'help/joining-group' }">
+            How to join a group?
           </router-link>
         </li>
       </ul>

apps/client/public/help/inviting-users/group-settings-button.webp

@@ -0,0 +1,71 @@
+<template>
+  <div style="font-size: 28px; font-weight: bold">{{ title }}</div>
+
+  <Gap style="height: 36px" />
+
+  <div style="max-width: 600px">
+    <ol class="steps">
+      <li>
+        Go to a page of the group you want to add members to. Make sure there's
+        nothing selected on the page.
+      </li>
+
+      <li>
+        On the right sidebar, click on <b>Group settings</b>.<br />
+
+        <br />
+
+        <img src="/help/inviting-users/group-settings-button.webp" />
+      </li>
+
+      <li>
+        Go to the <b>Join invitations</b> tab and click on
+        <b>Invite new member</b>.<br />
+
+        <br />
+
+        <img src="/help/inviting-users/group-settings-tabs.webp" />
+
+        <InlineGap style="width: 24px" />
+
+        <img src="/help/inviting-users/invite-new-member-button.webp" />
+      </li>
+
+      <li>
+        Fill the form fields and click <b>Ok</b> to invite the user.<br />
+
+        <br />
+
+        <img src="/help/inviting-users/invite-user-dialog.webp" />
+      </li>
+
+      <li>
+        Now the user decides if they want to <b>accept</b> or <b>reject</b> the
+        invitation.<br />
+
+        <br />
+
+        <img src="/help/inviting-users/accept-reject-invitation.webp" />
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+const title = 'How to invite users to a group?';
+
+useMeta(() => ({
+  title: `${title} - Help - DeepNotes`,
+}));
+</script>
+
+<style scoped lang="scss">
+ol.steps > li {
+  margin-bottom: 24px;
+}
+
+img {
+  vertical-align: top;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+</style>

apps/client/public/help/inviting-users/group-settings-tabs.webp

@@ -0,0 +1,51 @@
+<template>
+  <div style="font-size: 28px; font-weight: bold">{{ title }}</div>
+
+  <Gap style="height: 36px" />
+
+  <div style="max-width: 600px">
+    To send a request to join a group, a user has to:
+
+    <ol class="steps">
+      <li>
+        Go to a page of the group they want to join and click on
+        <b>Request access</b>.<br />
+
+        <br />
+
+        <img src="/help/joining-group/request-access-screen.webp" />
+      </li>
+
+      <li>
+        Choose a name to use within the group and click <b>Ok</b>.<br />
+
+        <br />
+
+        <img src="/help/joining-group/request-access-dialog.webp" />
+      </li>
+
+      <li>
+        Now wait for the admins to <b>accept</b> or <b>reject</b> the request.
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+const title = 'How to join a group?';
+
+useMeta(() => ({
+  title: `${title} - Help - DeepNotes`,
+}));
+</script>
+
+<style scoped lang="scss">
+ol.steps > li {
+  margin-bottom: 24px;
+}
+
+img {
+  vertical-align: top;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+</style>