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

View file

@ -71,34 +71,37 @@ 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={{
<div className={buttonClasses.wrapper}> padding: "0px",
}}>
<div className={buttonClasses.wrapper} >
<MessageButton type="report" callback={reportRev} /> <MessageButton type="report" callback={reportRev} />
{canDeleteReview(review, UserStore.getCurrentUser().id) && ( {canDeleteReview(review, UserStore.getCurrentUser().id) && (
<MessageButton type="delete" callback={delReview} /> <MessageButton type="delete" callback={delReview} />

View file

@ -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,38 +46,45 @@ export default function ReviewsView({ userId }: { userId: string; }) {
} }
return ( return (
<> <div className="ReviewDB">
<Text <>
tag="h2" <Text
variant="eyebrow" tag="h2"
style={{ variant="eyebrow"
paddingLeft: "12px", style={{
marginBottom: "12px", paddingLeft: "0px",
color: "var(--header-primary)" marginBottom: "12px",
}} color: "var(--header-primary)"
> }}
User Reviews >
</Text> User Reviews
{reviews?.map(review => </Text>
<ReviewComponent {reviews?.map(review =>
key={review.id} <ReviewComponent
review={review} key={review.id}
refetch={refetch} 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 && ( </div>
<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",
}}
/>
</>
); );
} }