feat(money): add layout for create form in app

front/src/features/app/App.tsx

@@ -1,5 +1,5 @@
-import { CreateIncome } from './features/create-income'
-import { CreateOutcome } from './features/create-outcome'
+import { CreateIncome } from './features/create/create-income'
+import { CreateOutcome } from './features/create/create-outcome'
 import { History } from './features/history'
 import { Stats } from './features/stats'
 

front/src/features/app/features/create/SimpleForm.css

@@ -0,0 +1,40 @@
+.form {
+  display: grid;
+
+  grid-template-areas:
+    'title    title    title   '
+    'amount   source   source  '
+    'currency currency currency'
+    'date     .        submit  ';
+
+  align-items: end;
+  max-width: 400px;
+  padding: 16px;
+  border: 1px solid black;
+  gap: 16px;
+}
+
+.title {
+  grid-area: title;
+  text-align: center;
+}
+
+.amount {
+  grid-area: amount;
+}
+
+.comment {
+  grid-area: source;
+}
+
+.date {
+  grid-area: date;
+}
+
+.currency {
+  grid-area: currency;
+}
+
+.submit {
+  grid-area: submit;
+}

front/src/features/app/features/create-income/CreateIncome.tsx → front/src/features/app/features/create/create-income/CreateIncome.tsx

@@ -1,13 +1,14 @@
 import { useCallback } from 'react'
 import { Field, Form } from 'react-final-form'
 
-import { Currency } from '@shared/enum/Currency'
-import { IncomeModel } from '@shared/models/money/IncomeModel'
-
 import { useCreateIncome } from '@front/domain/money/hooks/useCreateIncome'
 import { Input, InputMoney } from '@front/features/final-form'
 import { Button } from '@front/ui/atoms/button'
 import { Label } from '@front/ui/atoms/label'
+import { Currency } from '@shared/enum/Currency'
+import { IncomeModel } from '@shared/models/money/IncomeModel'
+
+import * as styles from '../SimpleForm.css'
 
 export const CreateIncome = () => {
   const create = useCreateIncome()
@@ -32,36 +33,39 @@ export const CreateIncome = () => {
       {({ handleSubmit, form: { initialize }, values, initialValues }) => (
         <form
           onSubmit={e => handleSubmit(e)!.then(() => initialize(initialValues))}
+          className={styles.form}
         >
-          <h2>Create new income</h2>
+          <h2 className={styles.title}>Create new income</h2>
 
-          <Label text="Amount">
+          <Label text="Amount" className={styles.amount}>
             <InputMoney name="amount" currency={values.currency} />
           </Label>
 
-          <Label text="Source">
+          <Label text="Source" className={styles.comment}>
             <Input name="source" placeholder="NASA" />
           </Label>
 
-          <Label text="Currency">
+          <Label text="Currency" className={styles.currency}>
             {Object.values(Currency).map(value => (
-              <Label text={value} key={value} after>
+              <label key={value}>
                 <Field
                   name="currency"
                   component="input"
                   type="radio"
                   value={value}
-                  key={value}
                 />
-              </Label>
+                {value}
+              </label>
             ))}
           </Label>
 
-          <Label text="Date">
+          <Label text="Date" className={styles.date}>
             <Field name="date" component="input" type="date" />
           </Label>
 
-          <Button submit>Create</Button>
+          <Button className={styles.submit} submit>
+            Create
+          </Button>
         </form>
       )}
     </Form>

front/src/ui/atoms/button/Button.tsx

@@ -5,8 +5,11 @@ import { resolveType } from './helpers/resolveType'
 interface Props {
   submit?: boolean
   children: string
+  className?: string
 }
 
-export const Button = ({ submit = false, children }: Props) => (
-  <AntButton htmlType={resolveType(submit)}>{children}</AntButton>
+export const Button = ({ submit = false, children, className }: Props) => (
+  <AntButton htmlType={resolveType(submit)} className={className}>
+    {children}
+  </AntButton>
 )

front/src/ui/atoms/label/Label.css

@@ -0,0 +1,4 @@
+.text {
+  display: block;
+  padding-bottom: 8px;
+}

front/src/ui/atoms/label/Label.tsx

@@ -1,23 +1,16 @@
 import { ReactNode } from 'react'
 
+import * as styles from './Label.css'
+
 interface Props {
   text: string
   children: ReactNode
-  after?: boolean
+  className?: string
 }
 
-export const Label = ({ text, children, after = false }: Props) => (
-  <label>
-    {after ? (
-      <>
-        {children}
-        {text}
-      </>
-    ) : (
-      <>
-        {text}
-        {children}
-      </>
-    )}
+export const Label = ({ text, children, className }: Props) => (
+  <label className={className}>
+    <span className={styles.text}>{text}</span>
+    {children}
   </label>
 )

front/types.d.ts

@@ -1,4 +0,0 @@
-declare module '*.css' {
-  const classes: { [key: string]: string }
-  export default classes
-}