Intended
/
attendant
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Silas 2022-02-24 01:12:37 -05:00
parent 23c82e39ae
commit a9e3eb8b2c
Signed by: silentsilas
GPG Key ID: 4199EFB7DAA34349
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/stories/SplashIconHeader.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { FC } from "react";
import { rgba } from "polished"; import { rgba } from "polished";
import CSS from "csstype"; import CSS from "csstype";
import { color, opacity } from "../shared/styles"; import { color, opacity } from "../shared/styles";
@ -7,7 +7,7 @@ export interface SplashIconHeaderProps {
style?: CSS.Properties; style?: CSS.Properties;
} }
const SplashIconHeader = ({ style }: SplashIconHeaderProps) => { const SplashIconHeader: FC<SplashIconHeaderProps> = ({ style }) => {
const bgCircleColor = rgba(color.white, opacity.light); const bgCircleColor = rgba(color.white, opacity.light);
const dotColor = "#ffffff"; const dotColor = "#ffffff";

8
src/stories/utilities/CenteredContainer.tsx
View File

@ -7,6 +7,7 @@ import { color } from "../../shared/styles";
interface CenteredContainerProps { interface CenteredContainerProps {
children: ReactNode | null; children: ReactNode | null;
style?: CSS.Properties; style?: CSS.Properties;
className?: string | undefined;
fullscreen?: boolean; fullscreen?: boolean;
wide?: boolean; wide?: boolean;
} }
@ -14,11 +15,12 @@ interface CenteredContainerProps {
const CenteredContainer: FC<CenteredContainerProps> = ({ const CenteredContainer: FC<CenteredContainerProps> = ({
children, children,
style, style,
className,
fullscreen = false, fullscreen = false,
wide = false, wide = false,
}) => { }) => {
return ( return (
<StyledDiv style={style} fullscreen={fullscreen} wide={wide}> <StyledDiv style={style} fullscreen={fullscreen} wide={wide} className={className}>
{children} {children}
</StyledDiv> </StyledDiv>
); );
@ -27,7 +29,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
export { CenteredContainer }; export { CenteredContainer };
const StyledDiv = styled.div<CenteredContainerProps>` const StyledDiv = styled.div<CenteredContainerProps>`
height: 100vh; height: 100%;
text-align: center; text-align: center;
display: flex; display: flex;
@ -38,7 +40,7 @@ const StyledDiv = styled.div<CenteredContainerProps>`
${(props) => ${(props) =>
props.fullscreen && props.fullscreen &&
css` css`
width: 100vw; width: 100%;
background: linear-gradient(180deg, #060b2e 0%, #051745 100%); background: linear-gradient(180deg, #060b2e 0%, #051745 100%);
`} `}