first commit

txclient/src/app/components/SectionContainer/SectionContainer.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import style from "./section.container.module.css";
+import classNames from "classnames";
+
+export type SectionContainerBorders = "rounded" | "none";
+
+interface CardProps {
+    children: React.ReactNode;
+    borders?: SectionContainerBorders;
+    style?: React.CSSProperties;
+}
+
+export default function Card(props: CardProps): React.ReactElement {
+    const { borders = "rounded" } = props;
+
+    const getClassNames = () => {
+        const base = style.sectionContainer;
+        if (borders === "rounded") {
+            return classNames(base, style.sectionContainerRounded);
+        } else if (borders === "none") {
+            return classNames(base);
+        }
+        return base;
+    };
+
+    return (
+        <div className={getClassNames()} style={props.style}>
+            {props.children}
+        </div>
+    );
+}

txclient/src/app/components/SectionContainer/section.container.module.css

@@ -0,0 +1,15 @@
+.sectionContainer {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: white;
+    -webkit-box-shadow: 0px 2px 24px -4px var(--wine-superdark);
+    -moz-box-shadow: 0px 2px 24px -4px var(--wine-superdark);
+    box-shadow: 0px 2px 24px -4px var(--wine-superdark);
+}
+
+.sectionContainerRounded {
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+}