Make ReviewDB Look More Native (#256)

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -71,33 +71,36 @@ export default LazyComponent(() => {
                 body: "Do you really you want to report this review?",
                 confirmText: "Report",
                 cancelText: "Nevermind",
-                confirmColor: "red",
+                // confirmColor: "red", this just adds a class name and breaks the submit button guh
                 onConfirm: () => reportReview(review.id)
             });
         }
 
         return (
-            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy)}>
+            <div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}>
                 <div className={contents}>
                     <img
                         className={classes(avatar, clickable)}
+                        style={{ left: "8px" }}
                         onClick={openModal}
                         src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
                     />
                     <span
                         className={classes(username, clickable)}
-                        style={{ color: "var(--text-muted)" }}
+                        style={{ color: "var(--text-normal)", right: "8px" }}
                         onClick={() => openModal()}
                     >
                         {review.username}
                     </span>
                     <p
                         className={classes(messageContent, defaultColor)}
-                        style={{ fontSize: 15, marginTop: 4 }}
+                        style={{ fontSize: 15, marginTop: 4, right: "8px" }}
                     >
                         {review.comment}
                     </p>
-                    <div className={classes(container, isHeader, buttons)}>
+                    <div className={classes(container, isHeader, buttons)} style={{
+                        padding: "0px",
+                    }}>
                         <div className={buttonClasses.wrapper} >
                             <MessageButton type="report" callback={reportRev} />
                             {canDeleteReview(review, UserStore.getCurrentUser().id) && (

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -18,8 +18,8 @@
 
 import type { KeyboardEvent } from "react";
 
-import { lazyWebpack, useAwaiter } from "../../../utils/misc";
+import { classes, lazyWebpack, useAwaiter } from "../../../utils/misc";
-import { Forms, Text } from "../../../webpack/common";
+import { Forms, Text, UserStore } from "../../../webpack/common";
 import { addReview, getReviews } from "../Utils/ReviewDBAPI";
 import ReviewComponent from "./ReviewComponent";
 
@@ -46,12 +46,13 @@ export default function ReviewsView({ userId }: { userId: string; }) {
     }
 
     return (
+        <div className="ReviewDB">
             <>
                 <Text
                     tag="h2"
                     variant="eyebrow"
                     style={{
-                    paddingLeft: "12px",
+                        paddingLeft: "0px",
                         marginBottom: "12px",
                         color: "var(--header-primary)"
                     }}
@@ -66,18 +67,24 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                     />
                 )}
                 {reviews?.length === 0 && (
-                <Forms.FormText style={{ paddingLeft: "12px", paddingRight: "12px" }}>
+                    <Forms.FormText style={{ paddingLeft: "0px", paddingRight: "12px", marginBottom: "12px" }}>
                         Looks like nobody reviewed this user yet. You could be the first!
                     </Forms.FormText>
                 )}
                 <textarea
-                className={Classes.textarea}
+                    className={classes(Classes.textarea, "enter-comment")}
-                placeholder="Enter a comment"
+                    placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
                     onKeyDown={onKeyPress}
                     style={{
                         padding: "12px",
+                        marginBottom: "12px",
+                        color: "var(--text-normal)",
+                        border: "1px solid var(--profile-message-input-border-color)",
+                        fontSize: "14px",
+                        borderRadius: "3px",
                     }}
                 />
             </>
+        </div>
     );
 }