[ReviewDB] Improve UI & Use new RewviewDB api endpoints (#1104)

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -34,19 +34,17 @@ export default LazyComponent(() => {
     const [
         { cozyMessage, buttons, message, groupStart },
         { container, isHeader },
-        { avatar, clickable, username, messageContent, wrapper, cozy, timestampInline, timestamp },
-        { contents },
+        { avatar, clickable, username, messageContent, wrapper, cozy },
         buttonClasses,
-        { defaultColor }
     ] = findBulk(
         p("cozyMessage"),
         p("container", "isHeader"),
         p("avatar", "zalgo"),
-        p("contents"),
         p("button", "wrapper", "selected"),
-        p("defaultColor")
     );
 
+    const dateFormat = new Intl.DateTimeFormat();
+
     return function ReviewComponent({ review, refetch }: { review: Review; refetch(): void; }) {
         function openModal() {
             openUserProfileModal(review.sender.discordID);
@@ -89,7 +87,7 @@ export default LazyComponent(() => {
                 }
             }>
 
-                <div className={contents} style={{ paddingLeft: "0px" }}>
+                <div>
                     <img
                         className={classes(avatar, clickable)}
                         onClick={openModal}
@@ -107,16 +105,14 @@ export default LazyComponent(() => {
 
                     {
                         !Settings.plugins.ReviewDB.hideTimestamps && (
-                            <Timestamp
-                                timestamp={moment(review.timestamp * 1000)}
-                                compact={true}
-                            />
-                        )
+                            <Timestamp timestamp={moment(review.timestamp * 1000)} >
+                                {dateFormat.format(review.timestamp * 1000)}
+                            </Timestamp>)
                     }
 
                     <p
-                        className={classes(messageContent, defaultColor)}
-                        style={{ fontSize: 15, marginTop: 4 }}
+                        className={classes(messageContent)}
+                        style={{ fontSize: 15, marginTop: 4, color: "var(--text-normal)" }}
                     >
                         {review.comment}
                     </p>

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -19,7 +19,7 @@
 import { Settings } from "@api/Settings";
 import { classes } from "@utils/misc";
 import { useAwaiter } from "@utils/react";
-import { findLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 import { Forms, React, Text, UserStore } from "@webpack/common";
 import type { KeyboardEvent } from "react";
 
@@ -27,7 +27,7 @@ import { addReview, getReviews } from "../Utils/ReviewDBAPI";
 import { authorize, showToast } from "../Utils/Utils";
 import ReviewComponent from "./ReviewComponent";
 
-const Classes = findLazy(m => typeof m.textarea === "string");
+const Classes = findByPropsLazy("inputDefault", "editable");
 
 export default function ReviewsView({ userId }: { userId: string; }) {
     const { token } = Settings.plugins.ReviewDB;
@@ -65,7 +65,7 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                 tag="h2"
                 variant="eyebrow"
                 style={{
-                    marginBottom: "12px",
+                    marginBottom: "8px",
                     color: "var(--header-primary)"
                 }}
             >
@@ -79,13 +79,17 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                 />
             )}
             {reviews?.length === 0 && (
-                <Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}>
+                <Forms.FormText style={{ paddingRight: "12px", paddingTop: "0px", paddingLeft: "0px", paddingBottom: "4px", fontWeight: "bold", fontStyle: "italic" }}>
                     Looks like nobody reviewed this user yet. You could be the first!
                 </Forms.FormText>
             )}
             <textarea
-                className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")}
-                // this produces something like '-_59yqs ...' but since no class exists with that name its fine
+                className={classes(Classes.inputDefault, "enter-comment")}
+                onKeyDownCapture={e => {
+                    if (e.key === "Enter") {
+                        e.preventDefault(); // prevent newlines
+                    }
+                }}
                 placeholder={
                     token
                         ? (reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id)
@@ -106,6 +110,9 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                     resize: "none",
                     marginBottom: "12px",
                     overflow: "hidden",
+                    background: "transparent",
+                    border: "1px solid var(--profile-message-input-border-color)",
+                    fontSize: "14px",
                 }}
             />
         </div>