From 567da606f33915aeac6aab54002705fb013bd30f Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Sat, 14 Aug 2021 18:16:28 +1000
Subject: [PATCH] Bump SocialCard font sizes

---
 .../CaptureButton/CaptureButton.tsx           |  2 +-
 .../SocialCardCell/SocialCardCell.tsx         | 35 +++++++------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/app/web/src/components/CaptureButton/CaptureButton.tsx b/app/web/src/components/CaptureButton/CaptureButton.tsx
index ee547e4..6f1af62 100644
--- a/app/web/src/components/CaptureButton/CaptureButton.tsx
+++ b/app/web/src/components/CaptureButton/CaptureButton.tsx
@@ -64,7 +64,7 @@ const CaptureButton = ({
     let imgBlob
     let image64
     if (!isOpenScadImage) {
-      imgBlob = canvasToBlob(threeInstance, { width: 400, height: 300 })
+      imgBlob = canvasToBlob(threeInstance, { width: 500, height: 375 })
       image64 = blobTo64(
         await canvasToBlob(threeInstance, { width: 500, height: 522 })
       )
diff --git a/app/web/src/components/SocialCardCell/SocialCardCell.tsx b/app/web/src/components/SocialCardCell/SocialCardCell.tsx
index cb63267..f8d6a9b 100644
--- a/app/web/src/components/SocialCardCell/SocialCardCell.tsx
+++ b/app/web/src/components/SocialCardCell/SocialCardCell.tsx
@@ -41,6 +41,7 @@ export const Success = ({
 }: CellSuccessProps<FindSocialCardQuery>) => {
   const image = userProject?.Project?.mainImage
   const gravatar = userProject?.image
+  const truncatedDescription = userProject?.Project?.description?.length > 150 ? (userProject?.Project?.description || '').slice(0, 145) + ' . . .' : (userProject?.Project?.description || '')
   return (
     <div
       className="flex-col flex h-full bg-ch-gray-800 text-ch-gray-300"
@@ -52,36 +53,30 @@ export const Success = ({
       >
         <div className="bg-ch-gray-800 relative">
           <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">
-            {/* <CloudinaryImage
-                  cloudName="irevdev"
-                  publicId={image || 'CadHub/eia1kwru54g2kf02s2xx'}
-                  width={500}
-                  crop="scale"
-                /> */}
           </div>
 
           <div className="relative bg-ch-gray-760 bg-opacity-90 pt-10 pl-20 pr-12 h-full backdrop-filter backdrop-blur">
             <div className="flex justify-between items-center">
               <div className="flex items-center">
                 {gravatar && (
-                  <Gravatar image={gravatar} className="w-14 h-14" size={60} />
+                  <Gravatar image={gravatar} className="w-18 h-18" size={60} />
                 )}
-                <div className="text-2xl font-fira-sans ml-6 whitespace-nowrap">
+                <div className="text-3xl font-fira-sans ml-6 whitespace-nowrap">
                   {userProject?.userName}
                 </div>
               </div>
               <CadPackage
                 cadPackage={userProject?.Project?.cadPackage}
-                className="p-2 rounded px-4"
+                className="p-2 rounded px-4 transform scale-150 origin-right"
               />
             </div>
 
-            <h1 className="text-6xl font-fira-sans mt-16 capitalize">
+            <h1 className="text-6xl font-fira-sans mt-12 capitalize">
               {userProject?.Project?.title.replace(/-/g, ' ')}
             </h1>
 
-            <p className="mt-10 text-2xl font-fira-sans text-ch-gray-400">
-              {(userProject?.Project?.description || '').slice(0, 150)}
+            <p className="mt-10 text-3xl font-fira-sans text-ch-gray-400">
+              {truncatedDescription}
             </p>
           </div>
         </div>
@@ -104,7 +99,7 @@ export const Success = ({
         </div>
       </div>
       <div
-        className="h-24 grid bg-ch-gray-900 relative"
+        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">
@@ -121,10 +116,10 @@ export const Success = ({
             },
           ].map(({ svg, title, count }, index) => (
             <div className="grid grid-flow-col-dense gap-4" key={index}>
-              <Svg className="w-10" name={svg} />
+              <Svg className="w-12" name={svg} />
               <div className="flex flex-col">
-                <div className="text-3xl">{count}</div>
-                <div className="text-xl text-ch-gray-400">{title}</div>
+                <div className="text-4xl">{count}</div>
+                <div className="text-3xl text-ch-gray-400">{title}</div>
               </div>
             </div>
           ))}
@@ -134,17 +129,11 @@ export const Success = ({
           <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. */}
             <h2
-              className="text-indigo-300 text-2xl md:text-5xl font-ropa-sans py-1 md:tracking-wider"
+              className="text-indigo-300 text-3xl md:text-5xl font-ropa-sans py-1 md:tracking-wider"
               style={{ letterSpacing: '0.3em' }}
             >
               CadHub
             </h2>
-            <div
-              className="text-pink-400 text-sm font-bold font-ropa-sans hidden md:block whitespace-nowrap"
-              style={{ paddingBottom: '2rem', marginLeft: '-1.8rem' }}
-            >
-              pre-alpha
-            </div>
           </div>
         </div>
       </div>