From a9e3eb8b2ca9030a89e26f6006abc72810743758 Mon Sep 17 00:00:00 2001
From: Silas <me@silentsilas.com>
Date: Thu, 24 Feb 2022 01:12:37 -0500
Subject: [PATCH] add style to splash icon header props and classname to
 centered container

---
 src/stories/SplashIconHeader.tsx            | 4 ++--
 src/stories/utilities/CenteredContainer.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/stories/SplashIconHeader.tsx b/src/stories/SplashIconHeader.tsx
index d7885df..5605f52 100644
--- a/src/stories/SplashIconHeader.tsx
+++ b/src/stories/SplashIconHeader.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import { rgba } from "polished";
 import CSS from "csstype";
 import { color, opacity } from "../shared/styles";
@@ -7,7 +7,7 @@ export interface SplashIconHeaderProps {
   style?: CSS.Properties;
 }
 
-const SplashIconHeader = ({ style }: SplashIconHeaderProps) => {
+const SplashIconHeader: FC<SplashIconHeaderProps> = ({ style }) => {
   const bgCircleColor = rgba(color.white, opacity.light);
 
   const dotColor = "#ffffff";
diff --git a/src/stories/utilities/CenteredContainer.tsx b/src/stories/utilities/CenteredContainer.tsx
index 0f4be27..3d0c3fd 100644
--- a/src/stories/utilities/CenteredContainer.tsx
+++ b/src/stories/utilities/CenteredContainer.tsx
@@ -7,6 +7,7 @@ import { color } from "../../shared/styles";
 interface CenteredContainerProps {
   children: ReactNode | null;
   style?: CSS.Properties;
+  className?: string | undefined;
   fullscreen?: boolean;
   wide?: boolean;
 }
@@ -14,11 +15,12 @@ interface CenteredContainerProps {
 const CenteredContainer: FC<CenteredContainerProps> = ({
   children,
   style,
+  className,
   fullscreen = false,
   wide = false,
 }) => {
   return (
-    <StyledDiv style={style} fullscreen={fullscreen} wide={wide}>
+    <StyledDiv style={style} fullscreen={fullscreen} wide={wide} className={className}>
       {children}
     </StyledDiv>
   );
@@ -27,7 +29,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
 export { CenteredContainer };
 
 const StyledDiv = styled.div<CenteredContainerProps>`
-  height: 100vh;
+  height: 100%;
   text-align: center;
 
   display: flex;
@@ -38,7 +40,7 @@ const StyledDiv = styled.div<CenteredContainerProps>`
   ${(props) =>
     props.fullscreen &&
     css`
-      width: 100vw;
+      width: 100%;
       background: linear-gradient(180deg, #060b2e 0%, #051745 100%);
     `}