h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #491 from Irev-Dev/kurt/462

Browse Source 
Make social card more robust
This commit was merged in pull request #491.
This commit is contained in:
Kurt Hutten
2021-09-06 20:49:12 +10:00
committed by GitHub
parent 442da1ffc6 f9a43e53e2
commit b9f3955767
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/web/src/components/SocialCardCell/SocialCardCell.tsx
View File

@@ -47,14 +47,12 @@ export const Success = ({
: userProject?.Project?.description || ''
return (
<div
className="flex-col flex h-full bg-ch-gray-800 text-ch-gray-300"
className="grid h-screen bg-ch-gray-800 text-ch-gray-300"
id="social-card-loaded"
style={{ gridTemplateRows: ' 555fr 18fr' }}
>
<div
className="flex-grow grid"
style={{ gridTemplateColumns: '7fr 5fr' }}
>
<div className="bg-ch-gray-800 relative">
<div className="h-full grid" style={{ gridTemplateColumns: '7fr 5fr' }}>
<div className="bg-ch-gray-800 relative overflow-hidden min-w-0">
<div className="absolute bottom-0 left-0 transform scale-200 aspect-h-1 h-full -translate-x-24 translate-y-24 rotate-45 rounded-full overflow-hidden"></div>
<div className="relative bg-ch-gray-760 bg-opacity-90 pt-10 pl-20 pr-12 h-full backdrop-filter backdrop-blur">
@@ -77,7 +75,7 @@ export const Success = ({
{userProject?.Project?.title.replace(/-/g, ' ')}
</h1>
<p className="mt-10 text-3xl font-fira-sans text-ch-gray-400">
<p className="mt-10 text-3xl font-fira-sans text-ch-gray-400 overflow-hidden">
{truncatedDescription}
</p>
</div>
@@ -104,7 +102,7 @@ export const Success = ({
className="h-28 grid bg-ch-gray-900 relative"
style={{ gridTemplateColumns: '7fr 5fr' }}
>
<div className="grid grid-flow-col-dense items-center justify-center gap-16">
<div className="grid grid-flow-col-dense items-center justify-center gap-16 mb-2">
{[
{
svg: 'reactions',
@@ -126,7 +124,7 @@ export const Success = ({
</div>
))}
</div>
<div className="flex items-center justify-center">
<div className="flex items-center justify-center mb-2">
<Svg className="w-10 md:w-16" name="favicon" />
<div className="ml-2 md:ml-6 flex">
{/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
@@ -138,8 +136,8 @@ export const Success = ({
</h2>
</div>
</div>
<div className="h-3 absolute inset-x-0 bottom-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
</div>
<div className="h-3 relative bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
</div>
)
}