Make max-width opt in via new container

4 files changed, 24 insertions, 10 deletions

diff --git a/thallium-frontend/src/components/MaxWidthContainer.tsx b/thallium-frontend/src/components/MaxWidthContainer.tsx
new file mode 100644
index 0000000..40441a0
--- /dev/null
+++ b/thallium-frontend/src/components/MaxWidthContainer.tsx
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const MaxWidthContainer = styled.div<{ maxWidth?: number }>`
+max-width: ${({ maxWidth }) => maxWidth ? `${maxWidth.toString()}px` : "800px"};
+width: 100%;
+`;
+
+export default MaxWidthContainer;
diff --git a/thallium-frontend/src/pages/DesignSystem.tsx b/thallium-frontend/src/pages/DesignSystem.tsx
index f5b091c..21fa915 100644
--- a/thallium-frontend/src/pages/DesignSystem.tsx
+++ b/thallium-frontend/src/pages/DesignSystem.tsx
@@ -1,8 +1,10 @@
 import Card from "../components/Card";
 
+import MaxWidthContainer from "../components/MaxWidthContainer";
+
 const DesignSystem = () => {
     return (
-        <>
+        <MaxWidthContainer>
             <h1>Design System</h1>
             <Card title="Card">
                 <p>This is a card component.</p>
@@ -13,7 +15,7 @@ const DesignSystem = () => {
                 </p>
             </Card>
 
-        </>
+        </MaxWidthContainer>
     );
 };
 
diff --git a/thallium-frontend/src/pages/ErrorPage.tsx b/thallium-frontend/src/pages/ErrorPage.tsx
index 96955b6..84872c2 100644
--- a/thallium-frontend/src/pages/ErrorPage.tsx
+++ b/thallium-frontend/src/pages/ErrorPage.tsx
@@ -1,6 +1,7 @@
 import { useRouteError, isRouteErrorResponse } from "react-router-dom";
 
 import Card from "../components/Card";
+import MaxWidthContainer from "../components/MaxWidthContainer";
 
 const ErrorPage = () => {
     const error = useRouteError();
@@ -26,12 +27,14 @@ const ErrorPage = () => {
         isUnexpected = true;
     }
 
-    return <Card title={title}>
-        {isUnexpected && <strong>An error occurred:</strong>}
-        <p>
-            {message}
-        </p>
-    </Card>;
+    return <MaxWidthContainer>
+        <Card title={title}>
+            {isUnexpected && <strong>An error occurred:</strong>}
+            <p>
+                {message}
+            </p>
+        </Card>
+    </MaxWidthContainer>;
 };
 
 export default ErrorPage;
diff --git a/thallium-frontend/src/pages/LandingPage.tsx b/thallium-frontend/src/pages/LandingPage.tsx
index 823f2aa..9456264 100644
--- a/thallium-frontend/src/pages/LandingPage.tsx
+++ b/thallium-frontend/src/pages/LandingPage.tsx
@@ -1,9 +1,10 @@
 import Card from "../components/Card";
 import VoucherValidator from "../components/VoucherValidator";
+import MaxWidthContainer from "../components/MaxWidthContainer";
 
 const LandingPage = () => {
     return (
-        <>
+        <MaxWidthContainer>
             <Card title="Welcome to Thallium">
                 <p>
                     Thallium is a project being developed by Owl Corp.
@@ -25,7 +26,7 @@ const LandingPage = () => {
             </Card>
 
             <VoucherValidator />
-        </>
+        </MaxWidthContainer>
     );
 };