move aspect ratio to atom (#9171)

src/components/InterestTabs.tsx

@@ -258,7 +258,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowLeft} />
@@ -292,7 +292,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowRight} />

src/components/MediaPreview.tsx

@@ -87,7 +87,7 @@ export function ImageItem({
 }) {
   const t = useTheme()
   return (
-    <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
+    <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth: 100}]}>
       <Image
         key={thumbnail}
         source={{uri: thumbnail}}
@@ -131,7 +131,8 @@ export function VideoItem({
         style={[
           {backgroundColor: 'black'},
           a.flex_1,
-          {aspectRatio: 1, maxWidth: 100},
+          a.aspect_square,
+          {maxWidth: 100},
           a.justify_center,
           a.align_center,
         ]}>

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -97,9 +97,7 @@ export const ExternalEmbed = ({
           ]}>
           {imageUri && !embedPlayerParams ? (
             <Image
-              style={{
-                aspectRatio: 1.91,
-              }}
+              style={[a.aspect_card]}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
             />

src/components/StarterPack/ShareDialog.tsx

@@ -91,8 +91,8 @@ function ShareDialogInner({
               source={{uri: imageUrl}}
               style={[
                 a.rounded_sm,
+                a.aspect_card,
                 {
-                  aspectRatio: 1200 / 630,
                   transform: [{scale: gtMobile ? 0.85 : 1}],
                   marginTop: gtMobile ? -20 : 0,
                 },

src/components/StarterPack/StarterPackCard.tsx

@@ -191,7 +191,7 @@ export function Embed({
       <Link starterPack={starterPack}>
         <Image
           source={imageUri}
-          style={[a.w_full, {aspectRatio: 1.91}]}
+          style={[a.w_full, a.aspect_card]}
           accessibilityIgnoresInvertColors={true}
         />
         <View style={[a.px_sm, a.py_md]}>

src/components/dialogs/GifSelect.tsx

@@ -300,7 +300,8 @@ export function GifPreview({
             a.flex_1,
             a.mb_sm,
             a.rounded_sm,
-            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
+            a.aspect_card,
+            {opacity: pressed ? 0.8 : 1},
             t.atoms.bg_contrast_25,
           ]}
           source={{

src/components/live/LiveStatusDialog.tsx

@@ -102,7 +102,7 @@ export function LiveStatus({
           style={[
             t.atoms.bg_contrast_25,
             a.w_full,
-            {aspectRatio: 1.91},
+            a.aspect_card,
             android([
               a.overflow_hidden,
               {