RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +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 35c2944d40
commit d8079ff6a6
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 { Skeleton } from "antd"
import { Skeleton, Button } from "antd"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
@ -92,7 +92,6 @@ export default (props) => {
console.log(`YIQ returns [${contrastColor}] as contrast color`)
document.getElementById("eventHeader").style.color = `var(--text-color-${contrastColor})`
})
}
}
}, [eventData])
@ -135,20 +134,30 @@ export default (props) => {
<div className="content">
<div className="panel">
<div className="dates">
<Icons.Calendar /> {Array.isArray(eventData.dates) && renderDates(eventData.dates)}
<div className="card">
<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 className="location">
<Icons.MapPin /> {ProcessString(LocationProcessRegexs)(eventData.location)}
<div className="card">
<Button>
<Icons.Calendar /> Add to Calendar
</Button>
</div>
</div>
<div className="panel">
<div className="description">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{eventData.description}
</ReactMarkdown>
<div className="card">
<div className="description">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{eventData.description}
</ReactMarkdown>
</div>
</div>
</div>
</div>

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

@ -70,13 +70,22 @@
display: flex;
flex-direction: column;
padding: 20px;
background-color: var(--background-color-accent);
border-radius: 12px;
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;
}
}
}