[wip]locked sidebar form

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css

@@ -0,0 +1,113 @@
+@value paddingTop: 46px;
+@value lockedPaddingTop: 75px;
+@value paddingRightLeftBottom: 54px;
+
+.container {
+  padding: paddingTop paddingRightLeftBottom paddingRightLeftBottom;
+}
+
+.costRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.cost {
+  display: flex;
+  align-items: center;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.cost i {
+  margin-right: 8px;
+}
+
+.labelWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.labelWrapper label {
+  margin-right: 8px;
+  width: auto;
+}
+
+.labelWrapper > div {
+  max-width: 250px;
+}
+
+.nameInputs {
+  padding: 12px 0 0 0;
+}
+
+.nameInputs input {
+  height: 44px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+  letter-spacing: var(--spacing-normal);
+}
+
+.nameInputs > div:not(:first-child) {
+  margin-bottom: 12px;
+}
+
+.nameInputs label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.namesWrapper {
+  /* border: 1px solid red */
+}
+
+.namesWrapper label {
+  flex: 1;
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.description {
+  /* border: 1px solid red */
+}
+
+.descriptionWrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+.descriptionWrapper label {
+  flex: 1;
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.descriptionWrapper > div {
+  flex: 2.5;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-bold);
+  text-align: right;
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: 0.1px;
+}
+
+.title {
+  margin-bottom: 16px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}
+
+.label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--temp-grey-blue-7) alpha(85%));
+  letter-spacing: var(--spacing-medium);
+}

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.css.d.ts

@@ -0,0 +1,13 @@
+export const paddingTop: string;
+export const lockedPaddingTop: string;
+export const paddingRightLeftBottom: string;
+export const container: string;
+export const costRow: string;
+export const cost: string;
+export const labelWrapper: string;
+export const nameInputs: string;
+export const namesWrapper: string;
+export const description: string;
+export const descriptionWrapper: string;
+export const title: string;
+export const label: string;

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/LockedIncorporationForm.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import { FormSection, InputLabel, SelectHorizontal, Form } from '~core/Fields';
+import { Colony } from '~data/index';
+import Icon from '~core/Icon';
+import { ValuesType } from '~pages/IncorporationPage/types';
+
+import LockedProtectors from '../LockedProtectors';
+
+import styles from './LockedIncorporationForm.css';
+
+export const MSG = defineMessages({
+  incorporation: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.incorporation`,
+    defaultMessage: 'Incorporation',
+  },
+  initialCost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.initialCost`,
+    defaultMessage: 'Initial cost',
+  },
+  ongoingCost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.ongoingCost`,
+    defaultMessage: 'Ongoing cost',
+  },
+  cost: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.cost`,
+    defaultMessage: '{icon} {amount} {currency}',
+  },
+  nameLabel: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.nameLabel`,
+    defaultMessage: 'Corporation name',
+  },
+  descriptionLabel: {
+    id: `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm.descriptionLabel`,
+    defaultMessage: 'DAO Purpose',
+  },
+});
+
+const displayName = `dashboard.DAOIncorporation.IncorporationForm.LockedIncorporationForm`;
+
+export interface Props {
+  sidebarRef: HTMLElement | null;
+  colony: Colony;
+  formValues: ValuesType;
+}
+
+const LockedIncorporationForm = ({ sidebarRef }: Props) => {
+  return (
+    <div className={styles.container}>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.title}>
+          <FormattedMessage {...MSG.incorporation} />
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.costRow}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.initialCost} />
+          </div>
+          <div className={styles.cost}>
+            <FormattedMessage
+              {...MSG.cost}
+              values={{
+                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
+                amount: '5,300',
+                currency: 'USDC',
+              }}
+            />
+          </div>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.costRow}>
+          <div className={styles.label}>
+            <FormattedMessage {...MSG.ongoingCost} />
+          </div>
+          <div className={styles.cost}>
+            <FormattedMessage
+              {...MSG.cost}
+              values={{
+                icon: <Icon name="usd-coin" appearance={{ size: 'medium' }} />,
+                amount: '3,800 / year',
+                currency: 'USDC',
+              }}
+            />
+          </div>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.namesWrapper}>
+          {/* <InputLabel label={MSG.nameLabel} /> */}
+          <Form initialValues={{}} onSubmit={() => {}}>
+            <SelectHorizontal
+              name="name"
+              label={MSG.nameLabel}
+              appearance={{
+                theme: 'alt',
+                width: 'content',
+              }}
+              options={[
+                { label: 'WallStreetBets', value: 'WallStreetBets' },
+                { label: 'WallStreetBets2', value: 'WallStreetBets' },
+              ]}
+              scrollContainer={sidebarRef}
+              placement="bottom"
+              withDropdownElement
+              optionSizeLarge
+              autoHeight
+              unselectable
+            />
+          </Form>
+        </div>
+      </FormSection>
+      <FormSection appearance={{ border: 'bottom' }}>
+        <div className={styles.descriptionWrapper}>
+          <InputLabel label={MSG.descriptionLabel} />
+          <div className={styles.description}>
+            WallStreetBets is on a mission to deploy decentralized satellites in
+            our skies.
+          </div>
+        </div>
+      </FormSection>
+      <LockedProtectors />
+    </div>
+  );
+};
+
+LockedIncorporationForm.displayName = displayName;
+
+export default LockedIncorporationForm;

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedIncorporationForm/index.ts

@@ -0,0 +1 @@
+export { default } from './LockedIncorporationForm';

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css

@@ -0,0 +1,47 @@
+.wrapper {
+  /* border: 1px solid red */
+}
+
+.protectorsLabelWrapper {
+  /* border: 1px solid red */
+}
+
+.label {
+  /* border: 1px solid red */
+}
+
+.userAvatarContainer {
+  /* border: 1px solid red */
+}
+
+.userName {
+  /* border: 1px solid red */
+}
+
+.row {
+  display: flex;
+}
+
+.row label {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.signing {
+  /* border: 1px solid red */
+}
+
+.labelWrapper {
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  color: color-mod(var(--dark) alpha(85%));
+}
+
+.signOptionWrapper {
+  /* border: 1px solid red */
+}
+
+.signOptionLabel {
+  /* border: 1px solid red */
+}

src/modules/dashboard/components/DAOIncorporation/IncorporationForm/LockedProtectors/LockedProtectors.css.d.ts

@@ -0,0 +1,10 @@
+export const wrapper: string;
+export const protectorsLabelWrapper: string;
+export const label: string;
+export const userAvatarContainer: string;
+export const userName: string;
+export const row: string;
+export const signing: string;
+export const labelWrapper: string;
+export const signOptionWrapper: string;
+export const signOptionLabel: string;