Skip to content

Commit

Permalink
wip: refactor theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@majkshkurti
majkshkurti committed Sep 18, 2023
1 parent b3cce90 commit 96912f6
Show file tree
Hide file tree
Showing 7 changed files with 374 additions and 35 deletions.
4 changes: 2 additions & 2 deletions apps/web/components/@mui/ThemeRegistry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export default function ThemeRegistry({
}: {
children: React.ReactNode;
}) {
let theme = "light";
let theme = "dark";
if (typeof window !== "undefined") {
theme = localStorage.getItem("theme") || "light";
theme = localStorage.getItem("theme") || "dark";
}

const [mode, setMode] = React.useState<"light" | "dark">(
Expand Down
29 changes: 21 additions & 8 deletions apps/web/components/dashboard/home/BlogSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,13 @@ const blogPosts: BlogPost[] = [
"https://plan4better.de/images/blog/green-spaces-resilient-cities/thumbnail.webp",
url: "https://plan4better.de/en/posts/2023-05-01-accessibility-to-green-spaces/",
},
{
title: "GOAT Anwendungsbeispiel: Stadtplanung",
date: "April 17, 2023",
thumbnail:
"https://plan4better.de/images/blog/use-cases-development-concepts/stadtplanung_900450.webp",
url: "https://plan4better.de/posts/2023-03-01-goat-anwendungsbeispiel-stadtplanung/",
},
];

const BlogSection = () => {
Expand Down Expand Up @@ -85,8 +92,8 @@ const BlogSection = () => {
md={6}
lg={4}
display={{
sm: index > 2 ? "none" : "block",
md: index > 1 ? "none" : "block",
sm: index > 3 ? "none" : "block",
md: index > 3 ? "none" : "block",
lg: index > 2 ? "none" : "block",
}}
>
Expand Down Expand Up @@ -123,9 +130,12 @@ const BlogSection = () => {
height: 220,
objectFit: "cover",
backgroundSize: "cover",
transition: theme.transitions.create((["box-shadow", "transform"]), {
duration: theme.transitions.duration.standard
})
transition: theme.transitions.create(
["box-shadow", "transform"],
{
duration: theme.transitions.duration.standard,
},
),
}}
image={item.thumbnail}
/>
Expand All @@ -138,9 +148,12 @@ const BlogSection = () => {

<Typography
sx={{
transition: theme.transitions.create(["color", "transform"], {
duration: theme.transitions.duration.standard
}),
transition: theme.transitions.create(
["color", "transform"],
{
duration: theme.transitions.duration.standard,
},
),
}}
fontWeight="bold"
>
Expand Down
2 changes: 2 additions & 0 deletions apps/web/components/dashboard/home/ProjectSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ const ProjectSection = (props: ProjectSectionProps) => {
<Skeleton variant="rectangular" height={200} />
) : (
<SectionCard
createdAt={item.created_at}
updatedAt={item.updated_at}
title={item.name}
description={item.description}
image={item.thumbnail_url}
Expand Down
150 changes: 139 additions & 11 deletions apps/web/components/dashboard/home/SectionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,48 @@
"use client";

import { ArrowPopper } from "@/components/ArrowPoper";
import {
Box,
Card,
CardContent,
CardMedia,
Chip,
Grid,
IconButton,
List,
ListItemButton,
ListItemIcon,
ListItemText,
Paper,
Stack,
Typography,
useTheme,
} from "@mui/material";
import { ICON_NAME, Icon } from "@p4b/ui/components/Icon";
import { formatDistance } from "date-fns";
import { useState } from "react";

export interface SectionCard {
createdAt?: string;
updatedAt?: string;
ownerInfo?: {
name: string;
avatar: string;
};
updatedBy?: {
name: string;
avatar: string;
};
title: string;
description?: string;
tags?: string[];
image?: string;
}

const SectionCard = (props: SectionCard) => {
const { title, description, tags, image } = props;
const { title, updatedAt, tags, image } = props;
const theme = useTheme();
const [moreMenuOpen, setMoreMenuOpen] = useState(false);
return (
<>
<Card
Expand Down Expand Up @@ -60,16 +82,122 @@ const SectionCard = (props: SectionCard) => {
)}

<CardContent sx={{ flexGrow: 1 }}>
{description && (
<Typography gutterBottom variant="body2">
{description}
</Typography>
)}

{title && (
<Typography gutterBottom variant="body1">
{title}
</Typography>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{ pb: theme.spacing(2) }}
>
{title && (
<Typography variant="body1" noWrap>
{title}
</Typography>
)}
<ArrowPopper
open={moreMenuOpen}
placement="bottom"
onClose={() => setMoreMenuOpen(false)}
arrow={false}
content={
<Paper
elevation={8}
sx={{
minWidth: 220,
maxWidth: 340,
overflow: "auto",
py: theme.spacing(2),
}}
>
<List dense={true}>
<ListItemButton>
<ListItemIcon
sx={{
color: "inherit",
pr: 4,
minWidth: 0,
}}
>
<Icon
iconName={ICON_NAME.EDIT}
style={{ fontSize: 15 }}
htmlColor="inherit"
/>
</ListItemIcon>
<ListItemText primary="Edit Name & Description" />
</ListItemButton>
<ListItemButton>
<ListItemIcon
sx={{
color: "inherit",
pr: 4,
minWidth: 0,
}}
>
<Icon
iconName={ICON_NAME.SHARE}
style={{ fontSize: 15 }}
htmlColor="inherit"
/>
</ListItemIcon>
<ListItemText primary="Share" />
</ListItemButton>
<ListItemButton
sx={{
color: theme.palette.error.main,
}}
>
<ListItemIcon
sx={{
color: "inherit",
pr: 4,
minWidth: 0,
}}
>
<Icon
iconName={ICON_NAME.TRASH}
style={{ fontSize: 15 }}
htmlColor="inherit"
/>
</ListItemIcon>
<ListItemText
primary="Delete"
sx={{
"& .MuiTypography-root": {
color: theme.palette.error.main
},
}}
/>
</ListItemButton>
</List>
</Paper>
}
>
<IconButton
size="small"
onClick={() => setMoreMenuOpen(!moreMenuOpen)}
sx={{
marginRight: "-12px",
}}
>
<Icon iconName={ICON_NAME.MORE_VERT} fontSize="inherit" />
</IconButton>
</ArrowPopper>
</Stack>
{/* Created by info */}
{updatedAt && (
<Stack
direction="row"
alignItems="center"
spacing={1}
sx={{ pb: theme.spacing(2) }}
>
<Typography variant="caption" noWrap>
Last updated:{" "}
{formatDistance(new Date(updatedAt), new Date(), {
addSuffix: true,
})}
</Typography>
</Stack>
)}
{tags && (
<Grid container spacing={2} sx={{ pt: theme.spacing(2) }}>
Expand Down
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"accept-language": "^3.0.18",
"axios": "^1.4.0",
"color": "^4.2.3",
"date-fns": "^2.30.0",
"dayjs": "^1.11.9",
"eslint": "^8.47.0",
"geojson": "^0.5.0",
Expand Down
11 changes: 10 additions & 1 deletion packages/ui/components/Icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ import {
faGlobe,
faExternalLinkAlt,
faBars,
faShare,
faTrash,
faEdit,
} from "@fortawesome/free-solid-svg-icons";
import {
faGoogle,
Expand Down Expand Up @@ -116,6 +119,9 @@ export enum ICON_NAME {
GLOBE = "globe",
EXTERNAL_LINK = "external-link",
HAMBURGER_MENU = "hamburger-menu",
SHARE = "share",
TRASH = "trash",
EDIT = "edit",
// Brand icons
GOOGLE = "google",
MICROSOFT = "microsoft",
Expand Down Expand Up @@ -178,6 +184,9 @@ const nameToIcon: { [k in ICON_NAME]: IconDefinition } = {
[ICON_NAME.FILE]: faFile,
[ICON_NAME.GLOBE]: faGlobe,
[ICON_NAME.HAMBURGER_MENU]: faBars,
[ICON_NAME.SHARE]: faShare,
[ICON_NAME.TRASH]: faTrash,
[ICON_NAME.EDIT]: faEdit,
// Brand icons
[ICON_NAME.GOOGLE]: faGoogle,
[ICON_NAME.MICROSOFT]: faMicrosoft,
Expand All @@ -190,7 +199,7 @@ const nameToIcon: { [k in ICON_NAME]: IconDefinition } = {
[ICON_NAME.INSTAGRAM]: faInstagram,
[ICON_NAME.BITBUCKET]: faBitbucket,
[ICON_NAME.PAYPAL]: faPaypal,
[ICON_NAME.EXTERNAL_LINK]: faExternalLinkAlt
[ICON_NAME.EXTERNAL_LINK]: faExternalLinkAlt,
};

interface BrandColors {
Expand Down
Loading

0 comments on commit 96912f6

Please sign in to comment.