feat(forms): close forms with x button

Paker30 · Jul 2, 2020 · 6a7d16f · 6a7d16f
1 parent dc3368b
commit 6a7d16f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/assets/close.svg b/assets/close.svg
diff --git a/src/components/bottle/index.js b/src/components/bottle/index.js
@@ -6,6 +6,7 @@ import { Rate, Button } from 'antd';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Trans, withTranslation } from 'react-i18next';
 import selectCup from '../../miscellanea';
+import Close from '../../../assets/close.svg';
 
 // eslint-disable-next-line no-confusing-arrow
 const displayBorder = (border) => border ? '' : 'none';
@@ -73,6 +74,15 @@ const Buttons = Styled.div`
     display: flex;
 `;
 
+const CloseWrapper = Styled.div`
+    margin-left: auto;
+    position: relative;
+    button {
+        border: none;
+        left: 50px;
+    }
+`;
+
 const Section = ({ title, description, value, border = true }) => (
     <DetailContainer style={{ border: displayBorder(border) }}>
         <TitleArea>
@@ -108,6 +118,7 @@ function Bottle({ find, deleteBootle, history, t }) {
 
     return (
         <Detail>
+            <CloseWrapper><Button onClick={() => history.push('/')} icon={<Close />} /></CloseWrapper>
             <MainSection title={name} description={appellationOfOrigin} value={selectCup({ color, type })} border={false} />
             <Section title={<Trans i18nKey={`bottle.color.${color}`} />} description={<Trans i18nKey={`bottle.type.${type}`} />} value={`${price} ${t('currency')}`} />
             <Section title={region} description={year} value={<Rate allowHalf disabled="true" value={rate} />} />

diff --git a/src/components/new/index.js b/src/components/new/index.js
@@ -6,6 +6,7 @@ import { Trans } from 'react-i18next';
 import Styled from 'styled-components';
 import Media from 'styled-media-query';
 import Moment from 'moment';
+import Close from '../../../assets/close.svg';
 
 const { YearPicker } = DatePicker;
 const { Option } = Select;
@@ -33,6 +34,13 @@ const NewBottle = Styled.div`
     `}
 `;
 
+const CloseWrapper = Styled.div`
+    margin-left: auto;
+    button {
+        border: none;
+    }
+`;
+
 const cleanObject = (obj) => JSON.parse(JSON.stringify(obj));
 const B = (f) => (g) => (x) => f(g(x));
 const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
@@ -54,6 +62,7 @@ function OtherBottle({ add, history, find }) {
 
     return (
         <NewBottle>
+            <CloseWrapper><Button onClick={() => history.push('/')} icon={<Close />} /></CloseWrapper>
             <Form
                 name="newBottle"
                 layout="vertical"