Updated containers and the image inline to be closer to the original site

components/blocks/content.tsx

@@ -25,10 +25,10 @@ export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "" }
+                className={ "prose default-text-color" }
                 data-tina-field={ tinaField(data, "body") }
-                size="large"
-                width="medium"
+                size="small"
+                width="large"
             >
                 <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
             </Container>

components/inline/image.tsx

@@ -1,5 +1,6 @@
 import { TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import { tinaField } from "tinacms/dist/react";
 
 enum imageSize {
     small = "small",
@@ -52,12 +53,30 @@ const Image = (props: ImageProps) => {
         }
     };
 
+    const getPositionTypeClass = (): string | undefined => {
+        switch (props.position) {
+            case imagePosition.left:
+                return "float-left";
+            case imagePosition.middle:
+                return "flex justify-center";
+            case imagePosition.right:
+                return "float-right";
+            default:
+                return undefined;
+        }
+    };
+
+    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
+
     const decorationTypeClass = getDecorationTypeClass();
 
     const sizeTypeClass = getSizeTypeClass();
 
-    return (<div className={ "inline-image" }>
-        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
+    const positionTypeClass = getPositionTypeClass();
+
+    return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
+        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
+            data-tina-field={ tinaField(props, "imageUrl") }
             src={ props.imageUrl }/>
     </div>);
 };

components/util/container.tsx

@@ -17,7 +17,7 @@ export const Container = ({
     const widthClass = {
         small: "max-w-4xl",
         medium: "max-w-5xl",
-        large: "max-w-7xl",
+        large: "container-large",
         custom: ""
     };