hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Styling reviews

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-09 16:00:15 +03:00
parent 20b8369f17
commit 707c36e276
2 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/components/+preferences/extension-page.module.scss
View File

@ -35,4 +35,21 @@
} }
} }
} }
}
.reviews {
margin-top: 46px;
.review {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #363a3e;
display: flex;
gap: 16px;
}
.userName {
color: var(--textColorAccent);
margin-bottom: 8px;
}
} }

39
src/renderer/components/+preferences/extension-page.tsx
View File

@ -14,6 +14,8 @@ import { MarkdownViewer } from "../markdown-viewer";
import { Tab, Tabs } from "../tabs"; import { Tab, Tabs } from "../tabs";
import { navigate } from "../../navigation"; import { navigate } from "../../navigation";
import { extensionPageRoute, extensionReviewsRoute } from "../../../common/routes"; import { extensionPageRoute, extensionReviewsRoute } from "../../../common/routes";
import { Avatar } from "../avatar";
import { Rating } from "@material-ui/lab";
export function ExtensionPage() { export function ExtensionPage() {
const [extension, setExtension] = useState<Extension>(null); const [extension, setExtension] = useState<Extension>(null);
@ -73,23 +75,21 @@ export function ExtensionPage() {
</Tabs> </Tabs>
<div className={styles.contents}> <Switch>
<Switch> <Route path={`/preferences/extension/:extensionId?/overview`}>
<Route path={`/preferences/extension/:extensionId?/overview`}> <Overview extension={extension} description={description}/>
<Overview extension={extension} description={description}/> </Route>
</Route> <Route path={`/preferences/extension/:extensionId?/reviews`}>
<Route path={`/preferences/extension/:extensionId?/reviews`}> <Reviews reviews={reviews}/>
<Reviews reviews={reviews}/> </Route>
</Route> </Switch>
</Switch>
</div>
</section> </section>
); );
} }
function Overview({ extension, description }: { extension: Extension, description: string }) { function Overview({ extension, description }: { extension: Extension, description: string }) {
return ( return (
<> <div className={styles.contents}>
<div className="github"> <div className="github">
<MarkdownViewer markdown={description} /> <MarkdownViewer markdown={description} />
</div> </div>
@ -109,23 +109,28 @@ function Overview({ extension, description }: { extension: Extension, descriptio
<h3 className="mb-5 mtp-5">More Info</h3> <h3 className="mb-5 mtp-5">More Info</h3>
<div className="moreInfo"></div> <div className="moreInfo"></div>
</div> </div>
</> </div>
); );
} }
function Reviews({ reviews }: { reviews: Review[] }) { function Reviews({ reviews }: { reviews: Review[] }) {
return ( return (
<div className="reviews"> <div className={styles.reviews}>
<h2>User reviews</h2> <h2>User reviews</h2>
{reviews.map(review => ( {reviews.map(review => (
<div key={review.id} className="review"> <div key={review.id} className={styles.review}>
<div className="avatar"> <div className="avatar">
<Avatar
title={review.user.username}
size={32}
/>
</div> </div>
<div className="content"> <div className="content">
<div className="mb-4"><b>{review.user.firstName} {review.user.lastName}</b></div> <div className={styles.userName}><b>{review.user.firstName} {review.user.lastName}</b></div>
<div className="rating">rating</div> <div className="mb-4">
<Rating name="read-only" value={Math.floor(Math.random() * 5) + 1} readOnly />
</div>
<div className="text"> <div className="text">
{review.content} {review.content}
</div> </div>