diff options
| -rw-r--r-- | src/plugins/reviewDB/components/ReviewComponent.tsx | 15 | ||||
| -rw-r--r-- | src/plugins/reviewDB/components/ReviewsView.tsx | 75 |
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> ); } |