Make ReviewDB Look More Native (#256)
This commit is contained in:
parent
e7573382fe
commit
6210d3a597
|
@ -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} />
|
||||||
|
|
|
@ -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",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue