Skip to content

Commit

Permalink
theming
Browse files Browse the repository at this point in the history
  • Loading branch information
@tgxn
tgxn committed Feb 26, 2025
1 parent 1a93025 commit 55f915b
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 176 deletions.
109 changes: 35 additions & 74 deletions frontend/src/components/GridView/CommunityCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from "react";

import { useColorScheme } from "@mui/joy/styles";

import Box from "@mui/joy/Box";
import Card from "@mui/joy/Card";
import CardContent from "@mui/joy/CardContent";
Expand All @@ -19,7 +21,11 @@ import { CopyLink, ExtCommunityLink } from "../Shared/Link";

import { IconAvatar } from "../Shared/Avatar";

function CommunityCard({ community }) {
import CardStatBox from "../Shared/CardStatBox";

export default function CommunityCard({ community }) {
const { mode } = useColorScheme();

return (
<Card
variant="outlined"
Expand All @@ -28,10 +34,9 @@ function CommunityCard({ community }) {
gap: 0,
}}
>
{/* Community Title */}
{/* Header */}
<CardOverflow
variant="outlined"
// orientation="horizontal"
sx={{
py: 1.75,
px: 2,
Expand Down Expand Up @@ -92,7 +97,10 @@ function CommunityCard({ community }) {
{/* Community Banner */}
<CardOverflow
sx={(theme) => ({
background: "linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 100%)",
background:
mode == "dark"
? "linear-gradient(0deg, rgba(20,20,20,0.5) 0%, rgba(5,5,5,0.15) 100%)"
: "linear-gradient(0deg, rgba(179, 179, 179, 0.5) 0%, rgba(202, 202, 202, 0.15) 100%)",
p: 0,
height: "125px",
overflow: "hidden",
Expand All @@ -103,6 +111,7 @@ function CommunityCard({ community }) {
<Divider inset="context" />
</CardOverflow>

{/* Description */}
<CardContent
orientation="horizontal"
sx={{
Expand All @@ -123,6 +132,8 @@ function CommunityCard({ community }) {
{community.desc ? community.desc : ""}
</Typography>
</CardContent>

{/* Stats */}
<CardOverflow
variant="soft"
sx={{
Expand All @@ -134,83 +145,33 @@ function CommunityCard({ community }) {
orientation="horizontal"
sx={{
justifyContent: "space-around",
my: 0.75,
padding: 0,
}}
>
<Tooltip title="Subscribers" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 0.5,
}}
>
<RecordVoiceOverIcon />
<TinyNumber value={community.counts.subscribers} />
</Typography>
</Tooltip>
<CardStatBox
name="Subscribers"
icon={<RecordVoiceOverIcon />}
value={community.counts.subscribers}
/>

<Divider orientation="vertical" />
<Tooltip title="Posts" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 0.5,
}}
>
<MessageIcon />
<TinyNumber value={community.counts.posts} />
</Typography>
</Tooltip>

<CardStatBox name="Posts" icon={<MessageIcon />} value={community.counts.posts} />

<Divider orientation="vertical" />
<Tooltip title="Comments" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 0.5,
}}
>
<ForumIcon />
<TinyNumber value={community.counts.comments} />
</Typography>
</Tooltip>

<CardStatBox name="Comments" icon={<ForumIcon />} value={community.counts.comments} />

<Divider orientation="vertical" />
<Tooltip title="Active Users (Week)" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 0.5,
}}
>
<TrendingUpIcon />
<TinyNumber value={community.counts.users_active_week} />
</Typography>
</Tooltip>

<CardStatBox
name="Active Users (Week)"
icon={<TrendingUpIcon />}
value={community.counts.users_active_week}
/>
</CardContent>
</CardOverflow>
</Card>
// </Grid>
);
}
export default CommunityCard;
122 changes: 25 additions & 97 deletions frontend/src/components/GridView/InstanceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { connect } from "react-redux";

import Moment from "react-moment";
import { useColorScheme } from "@mui/joy/styles";

import { useNavigate } from "react-router-dom";

Expand All @@ -27,21 +28,23 @@ import { CopyLink, ExtInstanceLink } from "../Shared/Link";

import { InstanceAvatar } from "../Shared/Avatar";

function InstanceCard({ instance }) {
import CardStatBox from "../Shared/CardStatBox";

export default function InstanceCard({ instance }) {
const navigate = useNavigate();
const { mode } = useColorScheme();

return (
<Card
variant="outlined"
sx={{
height: "350px",
height: "365px",
gap: 0,
}}
>
{/* Header */}
<CardOverflow
variant="outlined"
// orientation="horizontal"
sx={{
py: 1.75,
px: 2,
Expand Down Expand Up @@ -126,7 +129,10 @@ function InstanceCard({ instance }) {
{/* Banner */}
<CardOverflow
sx={(theme) => ({
background: "linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 100%)",
background:
mode == "dark"
? "linear-gradient(0deg, rgba(20,20,20,0.5) 0%, rgba(5,5,5,0.15) 100%)"
: "linear-gradient(0deg, rgba(179, 179, 179, 0.5) 0%, rgba(202, 202, 202, 0.15) 100%)",
p: 0,
height: "125px",
overflow: "hidden",
Expand Down Expand Up @@ -173,107 +179,29 @@ function InstanceCard({ instance }) {
orientation="horizontal"
sx={{
justifyContent: "space-around",
my: 0.75,
padding: 0,
}}
>
<Tooltip title="Total Users" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
gap: 0.5,
}}
>
<PersonIcon />
<TinyNumber value={instance.usage.users.total} />
</Typography>
</Tooltip>
<Divider orientation="vertical" />
<Tooltip title="Posts" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
gap: 0.5,
}}
>
<MessageIcon />
<TinyNumber value={instance.usage.localPosts} />
</Typography>
</Tooltip>
<CardStatBox name="Users" icon={<PersonIcon />} value={instance.usage.users.total} />

<Divider orientation="vertical" />
<Tooltip title="Comments" variant="soft">
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
gap: 0.5,
}}
>
<ForumIcon />
<TinyNumber value={instance.usage.localComments} />
</Typography>
</Tooltip>

<CardStatBox name="Posts" icon={<MessageIcon />} value={instance.usage.localPosts} />

<Divider orientation="vertical" />

<Tooltip
title={
<>
Uptime{" "}
{instance.uptime?.uptime_alltime ? (
<>
(First seen <Moment fromNow>{instance.uptime?.date_created}</Moment>)
</>
) : (
<>(Unknown instance)</>
)}
</>
}
variant="soft"
>
<Typography
level="body3"
fontWeight="md"
textColor="text.secondary"
sx={{
cursor: "default",
display: "flex",
alignItems: "center",
flexWrap: "nowrap",
gap: 0.5,
}}
>
{instance.uptime?.uptime_alltime && (
<>
<TrendingUpIcon />
{instance.uptime?.uptime_alltime}%
</>
)}
<CardStatBox name="Comments" icon={<ForumIcon />} value={instance.usage.localComments} />

{!instance.uptime?.uptime_alltime && (
<>
<ThumbDownIcon />
</>
)}
</Typography>
</Tooltip>
<Divider orientation="vertical" />

<CardStatBox
name="Uptime"
icon={instance.uptime?.uptime_alltime ? <TrendingUpIcon /> : <ThumbDownIcon />}
value={instance.uptime?.uptime_alltime ? `${instance.uptime?.uptime_alltime}%` : `~~`}
/>
</CardContent>
</CardOverflow>
</Card>
);
}
export default InstanceCard;
Loading

0 comments on commit 55f915b

Please sign in to comment.