Multiple improvements to link cards and quote posts (#2398)

* fix canvas

* fix external link embed styles

* Use the same link-card style on web and mobile and give a little more height on desktop to the card images

* Use dark border on link embeds to match quote post style

* Fix the highlighting behavior on linkcards and quoteposts

---------

Co-authored-by: Hailey <me@haileyok.com>

src/lib/media/manip.web.ts

@@ -117,9 +117,6 @@ function createResizedImage(
         return reject(new Error('Failed to resize image'))
       }
 
-      canvas.width = width
-      canvas.height = height
-
       let scale = 1
       if (mode === 'cover') {
         scale = img.width < img.height ? width / img.width : height / img.height
@@ -128,10 +125,11 @@ function createResizedImage(
       }
       let w = img.width * scale
       let h = img.height * scale
-      let x = (width - w) / 2
-      let y = (height - h) / 2
 
-      ctx.drawImage(img, x, y, w, h)
+      canvas.width = w
+      canvas.height = h
+
+      ctx.drawImage(img, 0, 0, w, h)
       resolve(canvas.toDataURL('image/jpeg', quality))
     })
     img.src = dataUri

src/lib/themes.ts

@@ -25,6 +25,7 @@ export const defaultTheme: Theme = {
       postCtrl: '#71768A',
       brandText: '#0066FF',
       emptyStateIcon: '#B6B6C9',
+      borderLinkHover: '#cac1c1',
     },
     primary: {
       background: colors.blue3,
@@ -310,6 +311,7 @@ export const darkTheme: Theme = {
       postCtrl: '#707489',
       brandText: '#0085ff',
       emptyStateIcon: colors.gray4,
+      borderLinkHover: colors.gray5,
     },
     primary: {
       ...defaultTheme.palette.primary,