stopgap: clarify text on standard answer page for improved UX (#2122)

* stopgap: clarify text on standard answer page for improved UX

* replce apostrophe

* using tailwind:

---------

Co-authored-by: Jos Van der westhuizen <jos@danser.ai>

web/src/app/admin/standard-answer/page.tsx

@@ -295,14 +295,25 @@ const StandardAnswersTable = ({
           </div>
         )}
         {paginatedStandardAnswers.length > 0 && (
-          <div className="mt-4 flex justify-center">
+          <>
-            <PageSelector
+            <div className="mt-4">
-              currentPage={currentPage}
+              <Text>
-              totalPages={totalPages}
+                Ensure that you have added the category to the relevant{" "}
-              onPageChange={handlePageChange}
+                <a className="text-link" href="/admin/bot">
-              shouldScroll={true}
+                  Slack bot
-            />
+                </a>
-          </div>
+                .
+              </Text>
+            </div>
+            <div className="mt-4 flex justify-center">
+              <PageSelector
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={handlePageChange}
+                shouldScroll={true}
+              />
+            </div>
+          </>
         )}
       </div>
     </div>
@@ -356,8 +367,10 @@ const Main = () => {
       {popup}
 
       <Text className="mb-2">
-        Here you can manage the standard answers that are used to answer
+        Manage the standard answers for pre-defined questions.
-        questions based on keywords or phrases.
+        <br />
+        Note: Currently, only questions asked from Slack can receive standard
+        answers.
       </Text>
       {standardAnswers.length == 0 && (
         <Text className="mb-2">Add your first standard answer below!</Text>