Make ReviewDB Look More Native (#256)

This commit is contained in:
Snare-Hawk 2022-11-24 08:26:18 -05:00 committed by GitHub
parent e7573382fe
commit 6210d3a597
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 40 deletions

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

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