Some Guild Page content

src/components/AsideSection/AsideSection.scss

@@ -0,0 +1,9 @@
+@import "../../assets/scss/globals";
+
+.aside-section {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+  justify-content: space-between;
+  padding: 4rem;
+}

src/components/AsideSection/AsideSection.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./AsideSection.scss";
+
+export interface AsideSectionProps {}
+export interface AsideSectionState {}
+
+class AsideSection extends React.Component<AsideSectionProps, AsideSectionState> {
+  constructor(props: AsideSectionProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="aside-section">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default AsideSection;

src/components/AsideSection/index.ts

@@ -0,0 +1,2 @@
+import AsideSection from "./AsideSection";
+export default AsideSection;

src/components/InfoBox/InfoBox.scss

@@ -0,0 +1,6 @@
+@import "../../assets/scss/globals";
+
+.info-box {
+  justify-content: flex-end;
+  text-align: center;
+}

src/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./InfoBox.scss";
+
+export interface InfoBoxProps {}
+export interface InfoBoxState {}
+
+class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
+  constructor(props: InfoBoxProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="info-box">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default InfoBox;

src/components/InfoBox/index.ts

@@ -0,0 +1,2 @@
+import InfoBox from "./InfoBox";
+export default InfoBox;

src/components/MainSection/MainSection.scss

@@ -0,0 +1,8 @@
+@import "../../assets/scss/globals";
+
+.main-section {
+  display: flex;
+  flex: 2;
+  flex-flow: column;
+  padding: 3rem;
+}

src/components/MainSection/MainSection.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import "./MainSection.scss";
+
+export interface MainSectionProps {}
+export interface MainSectionState {}
+
+class MainSection extends React.Component<MainSectionProps, MainSectionState> {
+  constructor(props: MainSectionProps) {
+    super(props);
+  }
+  render() {
+    const {children} = this.props;
+    return (
+      <div className="main-section">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default MainSection;

src/components/MainSection/index.ts

@@ -0,0 +1,2 @@
+import MainSection from "./MainSection";
+export default MainSection;

src/components/PageSection/PageSection.scss

@@ -32,6 +32,16 @@
     color: $white;
   }
 
+  &.light-turquoise {
+    background-color: $light-turquoise;
+    color: $dark-blue;
+  }
+
+  &.light-blue {
+    background-color: $light-blue;
+    color: $black;
+  }
+
   &.center {
     justify-content: center;
   }

src/components/PageSection/PageSection.tsx

@@ -5,6 +5,8 @@ export enum BackgroundColor {
   DarkBlue,
   White,
   Orange,
+  LightTurquoise,
+  LightBlue,
 }
 
 export interface PageSectionProps {
@@ -20,6 +22,8 @@ const colors = new Map<BackgroundColor, string>([
   [BackgroundColor.DarkBlue, "dark-blue"],
   [BackgroundColor.White, "white"],
   [BackgroundColor.Orange, "orange"],
+  [BackgroundColor.LightTurquoise, "light-turquoise"],
+  [BackgroundColor.LightBlue, "light-blue"],
 ]);
 
 class PageSection extends React.Component<PageSectionProps, PageSectionState> {