Add label and bottom-margin technology

src/App.tsx

@@ -1,24 +1,40 @@
 import React from "react";
 
 import ProgressIndicator from "./stories/ProgressIndicator";
+
 import Header1 from "./stories/Header1";
 import Header2 from "./stories/Header2";
+
 import Button from "./stories/Button";
 
+import Label from "./stories/Label";
+
 import CenteredContainer from "./stories/CenteredContainer";
 import SpaceBetweenContainer from "./stories/SpaceBetweenContainer";
 import Spacer from "./stories/Spacer";
+import TextAlignWrapper from "./stories/TextAlignWrapper";
 
 function App() {
   return (
     <CenteredContainer fullscreen>
-      <CenteredContainer wide>
+      <CenteredContainer>
         <ProgressIndicator current={3} />
-        <Header1>Securely Share Your Secrets</Header1>
+        {/* <Header1>Securely Share Your Secrets</Header1> */}
         <Spacer />
         <Header2>Tell someone</Header2>
         <Spacer />
-        <SpaceBetweenContainer width100pct>
+        <TextAlignWrapper align="left">
+          <Label htmlFor="testInput">Testing label</Label>
+        </TextAlignWrapper>
+        <input type="text" name="testInput" style={{ width: "100%" }} />
+        <Spacer />
+        <SpaceBetweenContainer>
+          <Label htmlFor="testInput2">Testing label left</Label>
+          <Label htmlFor="testInput2">Testing label right</Label>
+        </SpaceBetweenContainer>
+        <input type="text" name="testInput2" style={{ width: "100%" }} />
+        <Spacer />
+        <SpaceBetweenContainer>
           <Button variant="secondary">Hello World</Button>
           <Button variant="secondary">Hello World</Button>
         </SpaceBetweenContainer>

src/shared/global.js

@@ -29,6 +29,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     
+    color: white;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

src/stories/Label.tsx

@@ -0,0 +1,29 @@
+import React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+import CSS from "csstype";
+
+import { typography } from "../shared/styles";
+
+export interface LabelProps {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+  htmlFor: string;
+}
+
+const Label: FC<LabelProps> = ({ children, style, htmlFor }) => {
+  return (
+    <StyledLabel style={style} htmlFor={htmlFor}>
+      {children}
+    </StyledLabel>
+  );
+};
+
+export default Label;
+
+const StyledLabel = styled.label<LabelProps>`
+  font-size: 1.4rem;
+  font-family: ${typography.regular};
+  font-weight: ${typography.weight.heavy};
+
+  margin-bottom: 0.7rem;
+`;

src/stories/SpaceBetweenContainer.tsx

@@ -11,7 +11,7 @@ interface SpaceBetweenContainerProps {
 const SpaceBetweenContainer: FC<SpaceBetweenContainerProps> = ({
   children,
   style,
-  width100pct,
+  width100pct = true,
 }) => {
   return (
     <StyledDiv style={style} width100pct={width100pct}>

src/stories/Spacer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
 import CSS from "csstype";
 

src/stories/TextAlignWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { FC, ReactNode } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+
+interface TextAlignWrapperProps {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+  align: "left" | "center" | "right";
+  marginBottom?: boolean;
+}
+
+const TextAlignWrapper: FC<TextAlignWrapperProps> = ({
+  children,
+  style,
+  align = "left",
+  marginBottom = true,
+}) => {
+  return (
+    <StyledDiv style={style} align={align} marginBottom={marginBottom}>
+      {children}
+    </StyledDiv>
+  );
+};
+
+export default TextAlignWrapper;
+
+const StyledDiv = styled.div<TextAlignWrapperProps>`
+  text-align: ${(props) => props.align};
+  width: 100%;
+
+  ${(props) =>
+    props.marginBottom &&
+    css`
+      margin-bottom: 0.7rem;
+    `}
+`;