Update document boost UI

web/src/app/admin/documents/feedback/page.tsx

@@ -127,6 +127,7 @@ const DocumentFeedbackTable = ({
           {
             header: "Score",
             key: "score",
+            alignment: "right",
           },
         ]}
         data={documents
@@ -145,7 +146,7 @@ const DocumentFeedbackTable = ({
               ),
               score: (
                 <div className="ml-auto flex w-16">
-                  <div key={document.document_id} className="h-8 ml-auto mr-8">
+                  <div key={document.document_id} className="h-10 ml-auto mr-8">
                     <ScoreSection
                       documentId={document.document_id}
                       initialScore={document.boost}
@@ -211,7 +212,7 @@ const Main = () => {
 
   return (
     <div className="mb-8">
-      <h2 className="font-bold text-xxl mb-2">Most Liked Documents</h2>
+      <h2 className="font-bold text-xl mb-2">Most Liked Documents</h2>
       <DocumentFeedbackTable documents={mostLikedDocuments} refresh={refresh} />
 
       <h2 className="font-bold text-xl mb-2 mt-4">Most Disliked Documents</h2>

web/src/components/PageSelector.tsx

@@ -53,6 +53,7 @@ const PageLink = ({
 }: PageLinkProps) => (
   <div
     className={`
+    select-none
     inline-block 
     text-sm 
     border 

web/src/components/admin/connectors/BasicTable.tsx

@@ -4,6 +4,7 @@ type Column = {
   header: string;
   key: string;
   width?: number | string;
+  alignment?: "left" | "right";
 };
 
 type TableData = {
@@ -21,34 +22,43 @@ export const BasicTable: FC<BasicTableProps> = ({ columns, data }) => {
       <table className="w-full table-auto">
         <thead>
           <tr className="text-left bg-gray-700">
-            {columns.map((column, index) => (
-              <th
-                key={index}
-                className={
-                  (column.width ? `w-${column.width} ` : "") +
-                  "px-4 py-2 font-bold" +
-                  (index === 0 ? " rounded-tl-sm" : "") +
-                  (index === columns.length - 1 ? " rounded-tr-sm" : "")
-                }
-              >
-                {column.header}
-              </th>
-            ))}
+            {columns.map((column, index) => {
+              const isRightAligned = column?.alignment === "right";
+              return (
+                <th
+                  key={index}
+                  className={
+                    (column.width ? `w-${column.width} ` : "") +
+                    "px-4 py-2 font-bold" +
+                    (index === 0 ? " rounded-tl-sm" : "") +
+                    (index === columns.length - 1 ? " rounded-tr-sm" : "")
+                  }
+                >
+                  <div
+                    className={isRightAligned ? "flex flex-row-reverse" : ""}
+                  >
+                    {column.header}
+                  </div>
+                </th>
+              );
+            })}
           </tr>
         </thead>
         <tbody>
           {data.map((row, rowIndex) => (
             <tr key={rowIndex} className="text-sm">
               {columns.map((column, colIndex) => {
+                const isRightAligned = column?.alignment === "right";
                 return (
                   <td
                     key={colIndex}
                     className={
                       (column.width ? `w-${column.width} ` : "") +
+                      (isRightAligned ? "flex" : "") +
                       "py-2 px-4 border-b border-gray-800"
                     }
                   >
-                    {row[column.key]}
+                    <div>{row[column.key]}</div>
                   </td>
                 );
               })}

web/src/components/icons/icons.tsx

@@ -10,14 +10,18 @@ import {
   Link,
   Plug,
   Brain,
-  PencilSimple,
   X,
   Question,
   Users,
-  ThumbsUp,
-  ThumbsDown,
 } from "@phosphor-icons/react";
-import { FiCheck, FiEdit, FiThumbsDown, FiThumbsUp } from "react-icons/fi";
+import {
+  FiCheck,
+  FiChevronsDown,
+  FiChevronsUp,
+  FiEdit,
+  FiThumbsDown,
+  FiThumbsUp,
+} from "react-icons/fi";
 import { SiBookstack } from "react-icons/si";
 import { FaFile, FaGlobe } from "react-icons/fa";
 import Image from "next/image";
@@ -153,6 +157,20 @@ export const ThumbsDownIcon = ({
   return <FiThumbsDown size={size} className={className} />;
 };
 
+export const ChevronsUpIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <FiChevronsUp size={size} className={className} />;
+};
+
+export const ChevronsDownIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <FiChevronsDown size={size} className={className} />;
+};
+
 export const CheckmarkIcon = ({
   size = 16,
   className = defaultTailwindCSS,

web/src/components/search/DocumentFeedbackBlock.tsx

@@ -1,5 +1,5 @@
 import { PopupSpec } from "../admin/connectors/Popup";
-import { ThumbsDownIcon, ThumbsUpIcon } from "../icons/icons";
+import { ChevronsDownIcon, ChevronsUpIcon } from "../icons/icons";
 
 type DocumentFeedbackType = "endorse" | "reject" | "hide" | "unhide";
 
@@ -40,20 +40,20 @@ const DocumentFeedback = ({
   feedbackType,
 }: DocumentFeedbackIconProps) => {
   let icon = null;
-  const size = 16;
+  const size = 20;
   if (feedbackType === "endorse") {
     icon = (
-      <ThumbsUpIcon
+      <ChevronsUpIcon
         size={size}
-        className="my-auto flex flex-shrink-0 text-green-600"
+        className="my-auto flex flex-shrink-0 text-blue-400"
       />
     );
   }
   if (feedbackType === "reject") {
     icon = (
-      <ThumbsDownIcon
+      <ChevronsDownIcon
         size={size}
-        className="my-auto flex flex-shrink-0 text-red-700"
+        className="my-auto flex flex-shrink-0 text-blue-400"
       />
     );
   }
@@ -65,7 +65,6 @@ const DocumentFeedback = ({
   return (
     <div
       onClick={async () => {
-        console.log("HI");
         const errorMsg = await giveDocumentFeedback(
           documentId,
           queryId,