add style to splash icon header props and classname to centered container

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@intended/intended-ui",
-  "version": "0.1.21",
+  "version": "0.1.26",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@intended/intended-ui",
-      "version": "0.1.21",
+      "version": "0.1.26",
       "license": "MIT",
       "dependencies": {
         "polished": "^4.1.3",

package.json

@@ -2,7 +2,7 @@
   "name": "@intended/intended-ui",
   "description": "Storybook UI library for Intended Link",
   "license": "MIT",
-  "version": "0.1.21",
+  "version": "0.1.26",
   "private": false,
   "main": "dist/index.js",
   "repository": "https://git.silentsilas.com/Intended/attendant.git",

src/stories/SplashIconHeader.tsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { FC } from "react";
 import { rgba } from "polished";
-
+import CSS from "csstype";
 import { color, opacity } from "../shared/styles";
 
-const SplashIconHeader = () => {
+export interface SplashIconHeaderProps {
+  style?: CSS.Properties;
+}
+
+const SplashIconHeader: FC<SplashIconHeaderProps> = ({ style }) => {
   const bgCircleColor = rgba(color.white, opacity.light);
 
   const dotColor = "#ffffff";
@@ -13,7 +17,7 @@ const SplashIconHeader = () => {
   const r = "60";
 
   return (
-    <svg width="44rem" viewBox="0 0 440 120">
+    <svg width="44rem" viewBox="0 0 440 120" style={style}>
       <circle r={r} cx="60" cy={cy} fill={bgCircleColor} />
       <svg width="51" height="60" viewBox="0 0 51 60" fill="none" x="35" y="30">
         <path

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%);
     `}