Make ReviewDB Look More Native (#256)

2 files changed, 50 insertions, 40 deletions

diff --git a/src/plugins/reviewDB/components/ReviewComponent.tsx b/src/plugins/reviewDB/components/ReviewComponent.tsx
index 058ac4c..ecd12da 100644
--- a/src/plugins/reviewDB/components/ReviewComponent.tsx
+++ b/src/plugins/reviewDB/components/ReviewComponent.tsx
@@ -71,34 +71,37 @@ 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={buttonClasses.wrapper}>
+                    <div className={classes(container, isHeader, buttons)} style={{
+                        padding: "0px",
+                    }}>
+                        <div className={buttonClasses.wrapper} >
                             <MessageButton type="report" callback={reportRev} />
                             {canDeleteReview(review, UserStore.getCurrentUser().id) && (
                                 <MessageButton type="delete" callback={delReview} />
diff --git a/src/plugins/reviewDB/components/ReviewsView.tsx b/src/plugins/reviewDB/components/ReviewsView.tsx
index 9fe7b9e..363b624 100644
--- a/src/plugins/reviewDB/components/ReviewsView.tsx
+++ b/src/plugins/reviewDB/components/ReviewsView.tsx
@@ -18,8 +18,8 @@
 
 import type { KeyboardEvent } from "react";
 
-import { lazyWebpack, useAwaiter } from "../../../utils/misc";
-import { Forms, Text } from "../../../webpack/common";
+import { classes, lazyWebpack, useAwaiter } from "../../../utils/misc";
+import { Forms, Text, UserStore } from "../../../webpack/common";
 import { addReview, getReviews } from "../Utils/ReviewDBAPI";
 import ReviewComponent from "./ReviewComponent";
 
@@ -46,38 +46,45 @@ export default function ReviewsView({ userId }: { userId: string; }) {
     }
 
     return (
-        <>
-            <Text
-                tag="h2"
-                variant="eyebrow"
-                style={{
-                    paddingLeft: "12px",
-                    marginBottom: "12px",
-                    color: "var(--header-primary)"
-                }}
-            >
-                User Reviews
-            </Text>
-            {reviews?.map(review =>
-                <ReviewComponent
-                    key={review.id}
-                    review={review}
-                    refetch={refetch}
+        <div className="ReviewDB">
+            <>
+                <Text
+                    tag="h2"
+                    variant="eyebrow"
+                    style={{
+                        paddingLeft: "0px",
+                        marginBottom: "12px",
+                        color: "var(--header-primary)"
+                    }}
+                >
+                    User Reviews
+                </Text>
+                {reviews?.map(review =>
+                    <ReviewComponent
+                        key={review.id}
+                        review={review}
+                        refetch={refetch}
+                    />
+                )}
+                {reviews?.length === 0 && (
+                    <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(Classes.textarea, "enter-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",
+                    }}
                 />
-            )}
-            {reviews?.length === 0 && (
-                <Forms.FormText style={{ paddingLeft: "12px", paddingRight: "12px" }}>
-                    Looks like nobody reviewed this user yet. You could be the first!
-                </Forms.FormText>
-            )}
-            <textarea
-                className={Classes.textarea}
-                placeholder="Enter a comment"
-                onKeyDown={onKeyPress}
-                style={{
-                    padding: "12px",
-                }}
-            />
-        </>
+            </>
+        </div>
     );
 }