Update Submit page style

wdsrocha · Apr 4, 2021 · 462dc37 · 462dc37
1 parent 68aea9f
commit 462dc37
Showing 1 changed file with 78 additions and 74 deletions.
diff --git a/packages/app/pages/submit.tsx b/packages/app/pages/submit.tsx
@@ -1,99 +1,103 @@
 import { FC, useState } from 'react';
 import {
- Form, Button, Select, Input,
+ Form, Button, Select, Input, Card,
 } from 'antd';
 import { SendOutlined } from '@ant-design/icons';
+import Title from 'antd/lib/typography/Title';
 
 const { Item } = Form;
 const { Option } = Select;
 const { TextArea, Group } = Input;
 
 const layout = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 10 },
+  labelCol: { span: 2 },
 };
 
 const tailLayout = {
-  wrapperCol: { offset: 4, span: 8 },
+  wrapperCol: { offset: 2, span: 8 },
 };
 
 const Submitter: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   return (
-    <Form
-      {...layout}
-      name="submit"
-      validateMessages={{ required: 'Campo obrigatório' }}
-      onFinish={async (values) => {
-        setIsLoading(true);
-        try {
-          const response = await fetch('/api/submit', {
-            method: 'POST',
-            body: JSON.stringify(values),
-          });
-          // eslint-disable-next-line no-console
-          console.log(JSON.stringify(await response.json(), null, 2));
-        } finally {
-          setIsLoading(false);
-        }
-      }}
+    <Card
+      className="card"
+      title={<Title level={1}>Enviar</Title>}
     >
-      <Item label="Problema">
-        <Group compact>
-          <Item name={['problem', 'oj']} noStyle>
-            <Select
-              showSearch
-              placeholder="Filtre por um OJ"
-              style={{ width: '30%' }}
+      <Form
+        {...layout}
+        name="submit"
+        validateMessages={{ required: 'Campo obrigatório' }}
+        onFinish={async (values) => {
+          setIsLoading(true);
+          try {
+            const response = await fetch('/api/submit', {
+              method: 'POST',
+              body: JSON.stringify(values),
+            });
+            // eslint-disable-next-line no-console
+            console.log(JSON.stringify(await response.json(), null, 2));
+          } finally {
+            setIsLoading(false);
+          }
+        }}
+      >
+        <Item label="Problema">
+          <Group compact>
+            <Item name={['problem', 'oj']} noStyle>
+              <Select
+                showSearch
+                placeholder="Filtre por um OJ"
+                style={{ width: '30%' }}
+              >
+                <Option value="codeforces">Codeforces</Option>
+                <Option value="uva">UVA</Option>
+                <Option value="uri">URI</Option>
+              </Select>
+            </Item>
+            <Item
+              name={['problem', 'id']}
+              noStyle
+              rules={[{ required: true, message: 'Escolha um problema' }]}
             >
-              <Option value="codeforces">Codeforces</Option>
-              <Option value="uva">UVA</Option>
-              <Option value="uri">URI</Option>
-            </Select>
-          </Item>
-          <Item
-            name={['problem', 'id']}
-            noStyle
-            rules={[{ required: true, message: 'Escolha um problema' }]}
+              <Select
+                style={{ width: '70%' }}
+                showSearch
+                placeholder="Nome ou ID do problema"
+              >
+                <Option value="1001">Extremamente Básico</Option>
+                <Option value="002">Hello</Option>
+                <Option value="003">World</Option>
+                <Option value="004">Herld</Option>
+                <Option value="005">Hd</Option>
+                <Option value="006">Hellorld</Option>
+              </Select>
+            </Item>
+          </Group>
+        </Item>
+        <Item name="language" label="Linguagem">
+          <Select showSearch>
+            <Option value="cpp">C++</Option>
+            <Option value="python">Python</Option>
+          </Select>
+        </Item>
+        <Item name="code" label="Código">
+          <TextArea rows={16} />
+        </Item>
+        <Item {...tailLayout}>
+          <Button
+            className="flex items-center"
+            icon={<SendOutlined />}
+            htmlType="submit"
+            type="primary"
+            loading={isLoading}
           >
-            <Select
-              style={{ width: '70%' }}
-              showSearch
-              placeholder="Nome ou ID do problema"
-            >
-              <Option value="1001">Extremamente Básico</Option>
-              <Option value="002">Hello</Option>
-              <Option value="003">World</Option>
-              <Option value="004">Herld</Option>
-              <Option value="005">Hd</Option>
-              <Option value="006">Hellorld</Option>
-            </Select>
-          </Item>
-        </Group>
-      </Item>
-      <Item name="language" label="Linguagem">
-        <Select showSearch>
-          <Option value="cpp">C++</Option>
-          <Option value="python">Python</Option>
-        </Select>
-      </Item>
-      <Item name="code" label="Código">
-        <TextArea rows={16} />
-      </Item>
-
-      <Item {...tailLayout}>
-        <Button
-          className="flex items-center"
-          icon={<SendOutlined />}
-          htmlType="submit"
-          type="primary"
-          loading={isLoading}
-        >
-          Enviar
-        </Button>
-      </Item>
-    </Form>
+            Enviar
+          </Button>
+        </Item>
+      </Form>
+    </Card>
   );
 };