idt2 embeds ux styling changes

nonanderson · Jul 28, 2023 · 0f45a71 · 0f45a71
1 parent 0c77197
commit 0f45a71
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/src/app/components/Embeds/EmbedHtml/index.styles.tsx b/src/app/components/Embeds/EmbedHtml/index.styles.tsx
@@ -1,11 +1,24 @@
 import { css, Theme } from '@emotion/react';
 
 const styles = {
-  embedDiv: ({ spacings }: Theme) =>
+  embedDiv: ({ spacings, mq }: Theme) =>
     css({
       maxWidth: '100%',
-      overflow: 'scroll hidden',
-      marginBottom: spacings.QUINTUPLE,
+      paddingLeft: `${spacings.FULL}rem`,
+      paddingRight: `${spacings.FULL}rem`,
+      paddingBottom: `${spacings.DOUBLE}rem`,
+
+      [mq.GROUP_1_MIN_WIDTH]: {
+        paddingBottom: `${spacings.TRIPLE}rem`,
+      },
+      [mq.GROUP_2_MIN_WIDTH]: {
+        paddingLeft: `${spacings.DOUBLE}rem`,
+        paddingRight: `${spacings.DOUBLE}rem`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingLeft: '0',
+        paddingRight: '0',
+      },
     }),
 };
 

diff --git a/src/app/components/Embeds/EmbedImages/index.styles.tsx b/src/app/components/Embeds/EmbedImages/index.styles.tsx
@@ -0,0 +1,24 @@
+import { css, Theme } from '@emotion/react';
+
+const styles = {
+  embedDiv: ({ spacings, mq }: Theme) =>
+    css({
+      paddingLeft: `${spacings.FULL}rem`,
+      paddingRight: `${spacings.FULL}rem`,
+      paddingBottom: `${spacings.DOUBLE}rem`,
+
+      [mq.GROUP_1_MIN_WIDTH]: {
+        paddingBottom: `${spacings.TRIPLE}rem`,
+      },
+      [mq.GROUP_2_MIN_WIDTH]: {
+        paddingLeft: `${spacings.DOUBLE}rem`,
+        paddingRight: `${spacings.DOUBLE}rem`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingLeft: '0',
+        paddingRight: '0',
+      },
+    }),
+};
+
+export default styles;
diff --git a/src/app/components/Embeds/EmbedImages/index.tsx b/src/app/components/Embeds/EmbedImages/index.tsx
@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { PropsWithChildren, useContext } from 'react';
 import { RequestContext } from '#app/contexts/RequestContext';
+import styles from './index.styles';
 import Image from '../../Image';
 
 type Props = {
@@ -27,7 +28,11 @@ const EmbedImages = ({ blocks: embedImages }: PropsWithChildren<Props>) => {
 
   if (!locator || !alt || !width || !height) return null;
 
-  return <Image src={src} alt={alt} width={width} height={height} />;
+  return (
+    <div css={styles.embedDiv}>
+      <Image src={src} alt={alt} width={width} height={height} />
+    </div>
+  );
 };
 
 export default EmbedImages;