RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
SrGooglo 2023-01-06 18:15:54 +00:00
parent 11126914e6
commit 0fd17b9111
2 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/app/src/pages/featured-event/[id].jsx
View File

@ -1,5 +1,5 @@
import React from "react" import React from "react"
import { Skeleton } from "antd" import { Skeleton, Button } from "antd"
import ReactMarkdown from "react-markdown" import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm" import remarkGfm from "remark-gfm"
@ -92,7 +92,6 @@ export default (props) => {
console.log(`YIQ returns [${contrastColor}] as contrast color`) console.log(`YIQ returns [${contrastColor}] as contrast color`)
document.getElementById("eventHeader").style.color = `var(--text-color-${contrastColor})` document.getElementById("eventHeader").style.color = `var(--text-color-${contrastColor})`
}) })
} }
} }
}, [eventData]) }, [eventData])
@ -135,20 +134,30 @@ export default (props) => {
<div className="content"> <div className="content">
<div className="panel"> <div className="panel">
<div className="dates"> <div className="card">
<Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)} <div className="dates">
<Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
</div>
<div className="location">
<Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
</div>
</div> </div>
<div className="location"> <div className="card">
<Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)} <Button>
<Icons.Calendar /> Add to Calendar
</Button>
</div> </div>
</div> </div>
<div className="panel"> <div className="panel">
<div className="description"> <div className="card">
<ReactMarkdown remarkPlugins={[remarkGfm]}> <div className="description">
{eventData.description} <ReactMarkdown remarkPlugins={[remarkGfm]}>
</ReactMarkdown> {eventData.description}
</ReactMarkdown>
</div>
</div> </div>
</div> </div>
</div> </div>

21
packages/app/src/pages/featured-event/index.less
View File

@ -70,13 +70,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px;
background-color: var(--background-color-accent);
border-radius: 12px;
height: fit-content; height: fit-content;
.card {
display: flex;
flex-direction: column;
height: fit-content;
padding: 20px;
background-color: var(--background-color-accent);
border-radius: 12px;
margin-bottom: 20px;
}
} }
} }