Merge pull request #3897 from strapi/front/qa

Repeatable fields QA

packages/strapi-admin/admin/src/components/LeftMenuLink/styles.scss

@@ -1,5 +1,5 @@
 // Import
-@import "../../styles/variables/variables";
+@import '../../styles/variables/variables';
 
 .item {
   position: relative;
@@ -12,13 +12,14 @@
   .plugin {
     cursor: pointer;
     position: absolute;
-    top: 10px; left: calc(100% - 4px);
+    top: 10px;
+    left: calc(100% - 4px);
     display: inline-block;
     width: auto;
     height: 20px;
     transition: right 1s ease-in-out;
 
-    span{
+    span {
       display: inline-block;
       overflow: hidden;
       width: auto;
@@ -29,10 +30,10 @@
       line-height: 20px;
       background: #0097f7;
       border-radius: 3px;
-      transition: transform .3s ease-in-out;
+      transition: transform 0.3s ease-in-out;
       white-space: pre;
 
-      &:hover{
+      &:hover {
         transform: translateX(calc(-100% + 9px));
       }
     }
@@ -40,7 +41,8 @@
 }
 
 .link {
-  padding-top: .9rem;
+  position: relative;
+  padding-top: 0.8rem;
   padding-bottom: 0.2rem;
   padding-left: 1.6rem;
   min-height: 3.6rem;
@@ -66,6 +68,15 @@
   &:visited {
     color: $left-menu-link-color;
   }
+  span {
+    display: inline-block;
+    width: 100%;
+    padding-right: 1rem;
+    padding-left: 2.6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .linkActive {
@@ -74,7 +85,9 @@
 }
 
 .linkIcon {
-  position: relative;
+  position: absolute;
+  top: calc(50% - 0.9rem + 0.6rem);
+  left: 1.6rem;
   margin-right: 1.2rem;
   font-size: 1.2rem;
   width: 1.4rem;
@@ -85,5 +98,7 @@
 
 .linkLabel {
   display: inline-block;
+  width: 100%;
   padding-right: 1rem;
+  padding-left: 2.6rem;
 }

packages/strapi-helper-plugin/lib/src/components/PluginHeader/StyledPluginHeader.js

@@ -0,0 +1,16 @@
+/**
+ *
+ * StyledPluginHeader
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledPluginHeader = styled.div`
+  margin-bottom: 30px;
+  .justify-content-end {
+    display: flex;
+  }
+`;
+
+export default StyledPluginHeader;

packages/strapi-helper-plugin/lib/src/components/PluginHeader/index.js

@@ -6,12 +6,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 
 import PluginHeaderTitle from '../PluginHeaderTitle';
 import PluginHeaderActions from '../PluginHeaderActions';
 
-import styles from './styles.scss';
+import StyledPluginHeader from './StyledPluginHeader';
 
 function PluginHeader({
   actions,
@@ -25,27 +24,27 @@ function PluginHeader({
   withDescriptionAnim,
 }) {
   return (
-    <div className={cn(styles.pluginHeader, 'row')}>
+    <StyledPluginHeader>
-      <div className="col-lg-7">
+      <div className="row">
-        <PluginHeaderTitle
+        <div className="col-lg-6">
-          icon={icon}
+          <PluginHeaderTitle
-          onClickIcon={onClickIcon}
+            icon={icon}
-          title={title}
+            onClickIcon={onClickIcon}
-          titleId={titleId}
+            title={title}
-          description={description}
+            titleId={titleId}
-          withDescriptionAnim={withDescriptionAnim}
+            description={description}
-        />
+            withDescriptionAnim={withDescriptionAnim}
+          />
+        </div>
+        <div className="col-lg-6 justify-content-end">
+          <PluginHeaderActions actions={subActions} />
+          <PluginHeaderActions
+            actions={actions}
+            overrideRendering={overrideRendering}
+          />
+        </div>
       </div>
-      <div className="col-lg-2 justify-content-end">
+    </StyledPluginHeader>
-        <PluginHeaderActions actions={subActions} />
-      </div>
-      <div className="col-lg-3 justify-content">
-        <PluginHeaderActions
-          actions={actions}
-          overrideRendering={overrideRendering}
-        />
-      </div>
-    </div>
   );
 }
 

packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss

@@ -1,3 +0,0 @@
-.pluginHeader {
-  margin-bottom: 30px;
-}

packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * StyledPluginHeaderActions
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledPluginHeaderActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: fit-content;
+  max-width: 100%;
+  padding-top: 0.9rem;
+  button {
+    margin-right: 0;
+    margin-left: 1.8rem;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+`;
+
+export default StyledPluginHeaderActions;

packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js

@@ -10,26 +10,20 @@ import { isArray, isFunction } from 'lodash';
 
 import Button from '../Button';
 
-import styles from './styles.scss';
+import StyledPluginHeaderActions from './StyledPluginHeaderActions';
 
 function PluginHeaderActions({ actions, overrideRendering }) {
   let content = '';
 
   if (isArray(actions)) {
-    content = actions.map(action => (
+    content = actions.map(action => <Button {...action} key={action.label} />);
-      <Button {...action} key={action.label} />
-    ));
   }
 
   if (isFunction(overrideRendering)) {
     content = overrideRendering();
   }
 
-  return (
+  return <StyledPluginHeaderActions>{content}</StyledPluginHeaderActions>;
-    <div className={styles.pluginHeaderActions}>
-      {content}
-    </div>
-  );
 }
 
 PluginHeaderActions.defaultProps = {
@@ -38,14 +32,8 @@ PluginHeaderActions.defaultProps = {
 };
 
 PluginHeaderActions.propTypes = {
-  actions: PropTypes.oneOfType([
+  actions: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
-    PropTypes.array,
+  overrideRendering: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    PropTypes.bool,
-  ]),
-  overrideRendering: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.func,
-  ]),
 };
 
 export default PluginHeaderActions;

packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/styles.scss

@@ -1,6 +0,0 @@
-.pluginHeaderActions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 9px;
-  margin-right: -18px;
-}

packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/StyledPluginHeaderTitle.js

@@ -0,0 +1,48 @@
+/**
+ *
+ * StyledPluginHeaderTitle
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledPluginHeaderTitle = styled.div`
+  .header-title {
+    position: relative;
+    h1 {
+      position: relative;
+      width: fit-content;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 2.4rem;
+      font-weight: 600;
+      margin-top: 0.7rem;
+      margin-bottom: 1px;
+      text-transform: capitalize;
+      padding-right: 18px;
+    }
+    i {
+      position: absolute;
+      right: 0;
+      top: 0;
+      margin-top: 9px;
+      font-size: 14px;
+      color: rgba(16, 22, 34, 0.35);
+      cursor: pointer;
+    }
+  }
+  .header-subtitle {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.3rem;
+    font-weight: 400;
+    color: #787e8f;
+  }
+`;
+
+export default StyledPluginHeaderTitle;

packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js

@@ -11,7 +11,7 @@ import { isEmpty, isFunction, isObject } from 'lodash';
 
 import LoadingBar from '../LoadingBar';
 
-import styles from './styles.scss';
+import StyledPluginHeaderTitle from './StyledPluginHeaderTitle';
 
 function PluginHeaderTitle({
   description,
@@ -25,28 +25,26 @@ function PluginHeaderTitle({
   const contentDescription = formatData(description);
 
   return (
-    <div>
+    <StyledPluginHeaderTitle>
-      <div style={{ display: 'flex' }}>
+      <div className="header-title">
-        <h1 className={styles.pluginHeaderTitleName} id={titleId}>
+        <h1 id={titleId}>
-          {contentTitle}&nbsp;
+          {contentTitle}
+          {icon && (
+            <i
+              className={`${icon}`}
+              id="editCTName"
+              onClick={onClickIcon}
+              role="button"
+            />
+          )}
         </h1>
-        {icon && (
-          <i
-            className={`${icon} ${styles.icon}`}
-            id="editCTName"
-            onClick={onClickIcon}
-            role="button"
-          />
-        )}
       </div>
       {withDescriptionAnim ? (
         <LoadingBar style={{ marginTop: '13px' }} />
       ) : (
-        <p className={styles.pluginHeaderTitleDescription}>
+        <p className="header-subtitle">{contentDescription}&nbsp;</p>
-          {contentDescription}&nbsp;
-        </p>
       )}
-    </div>
+    </StyledPluginHeaderTitle>
   );
 }
 

packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/styles.scss

@@ -1,23 +0,0 @@
-.pluginHeaderTitleName {
-  font-size: 2.4rem;
-  font-weight: 600;
-  margin-top: 0.7rem;
-  margin-bottom: 1px;
-  text-transform: capitalize;
-}
-
-.pluginHeaderTitleDescription {
-  font-size: 1.3rem;
-  font-weight: 400;
-  color: #787E8F;
-  margin: 0;
-}
-
-.icon {
-  margin-top: 16px;
-  margin-left: 3px;
-  color: rgba(16,22,34,.35);
-  &:hover {
-    cursor: pointer;
-  }
-}

packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js

@@ -43,4 +43,5 @@ const TrashButton = styled.div`
     }
   }
 `;
+
 export default TrashButton;

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js

@@ -106,11 +106,7 @@ const Icon = styled.i`
   }}
 `;
 
-const Truncate = styled.div`
+const Truncate = styled.div``;
-  // display: table;
-  // table-layout: fixed;
-  // width: 100%;
-`;
 
 const Truncated = styled.p`
   overflow-x: hidden;

packages/strapi-plugin-content-manager/admin/src/components/GroupBanner/components.js

@@ -73,36 +73,48 @@ const Wrapper = styled(Flex)`
   cursor: pointer;
 
   background-color: ${({ hasErrors, isOpen }) => {
-        if (hasErrors && isOpen) {
+    if (hasErrors && isOpen) {
-          return '#FFE9E0';
+      return '#FFE9E0';
-        } else if (isOpen) {
+    } else if (isOpen) {
-          return '#E6F0FB';
+      return '#E6F0FB';
-        } else {
+    } else {
-          return '#ffffff';
+      return '#ffffff';
-        }
-      }}
-      ${({ hasErrors, isOpen }) => {
-        if (hasErrors) {
-          return css`
-            color: #f64d0a;
-            font-weight: 600;
-          `;
-        }
-
-        if (isOpen) {
-          return css`
-            color: #007eff;
-            font-weight: 600;
-          `;
-        }
-      }}
-      button,
-    i, img {
-    &:active,
-    &:focus {
-      outline: 0;
     }
+  }};
+
+
+  ${({ hasErrors, isOpen }) => {
+    if (hasErrors) {
+      return css`
+        color: #f64d0a;
+        font-weight: 600;
+      `;
+    }
+    if (isOpen) {
+      return css`
+        color: #007eff;
+        font-weight: 600;
+      `;
+    }
+  }}
+    
+  button,
+  i, img {
+  &:active,
+  &:focus {
+    outline: 0;
   }
+
+  ${({ isOpen }) => {
+    if (isOpen) {
+      return css`
+        &.trash-icon i {
+          color: #007eff;
+        }
+      `;
+    }
+  }}
+
   webkit-font-smoothing: antialiased;
 `;
 

packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js

@@ -5,7 +5,7 @@ const ListWrapper = styled.div`
   max-height: 116px;
 
   > ul {
-    margin: 4px -20px 0;
+    margin: 0 -20px 0;
     padding: 0 20px !important;
     list-style: none !important;
     overflow: auto;
@@ -37,14 +37,13 @@ const Li = styled.li`
   flex-wrap: nowrap;
   align-content: center;
   justify-content: space-between;
-  height: 27px;
+  height: 18px;
-  background-color: transparent !important;
+  margin-top: 9px;
-  margin-bottom: 9px;
+  &:last-of-type {
-
+    margin-bottom: 0px;
+  }
   &:active {
     .dragHandle {
-      // cursor: pointer;
-
       > span {
         background: #aed4fb;
       }
@@ -132,7 +131,7 @@ const Li = styled.li`
       display: inline-block;
       height: 100%;
       padding-right: 0px;
-      line-height: 27px;
+      line-height: 18px;
       text-align: right;
       white-space: nowrap;
       overflow: hidden;

packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js

@@ -5,6 +5,10 @@ const Wrapper = styled.div`
   margin-bottom: 27px;
 
   label {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 1.3rem;
     font-weight: 500;
   }
@@ -94,11 +98,6 @@ const Wrapper = styled.div`
         }
       }
     }
-    & + div {
-      ul {
-        margin-bottom: -4px;
-      }
-    }
   }
 `;
 

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -380,9 +380,7 @@ function EditView({
                 label: `${pluginId}.containers.Edit.submit`,
                 type: 'submit',
                 loader: isSubmitting,
-                style: isSubmitting
+                style: isSubmitting ? { marginRight: '18px' } : {},
-                  ? { marginRight: '18px', flexGrow: 2 }
-                  : { flexGrow: 2 },
                 disabled: isSubmitting, // TODO STATE WHEN SUBMITING
               },
             ]}

packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/StyledBackButton.js

@@ -0,0 +1,32 @@
+/**
+ *
+ * StyledBackButton
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledBackButton = styled.div`
+  position: fixed;
+  top: 0;
+  height: 6rem;
+  width: 6.5rem;
+  line-height: 6rem;
+  z-index: 1050;
+  text-align: center;
+  background-color: #ffffff;
+  color: #81848a;
+  border-top: 1px solid #f3f4f4;
+  border-right: 1px solid #f3f4f4;
+  border-left: 1px solid #f3f4f4;
+  cursor: pointer;
+  i {
+    font-size: 1.8rem;
+    font-weight: bolder;
+  }
+  &:hover {
+    background-color: #f3f4f4;
+  }
+`;
+
+export default StyledBackButton;

packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/index.js

@@ -0,0 +1,24 @@
+/**
+ *
+ * BackButton
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import StyledBackButton from './StyledBackButton';
+
+function BackButton({ onClick }) {
+  return (
+    <StyledBackButton onClick={onClick}>
+      <i className="fa fa-chevron-left"></i>
+    </StyledBackButton>
+  );
+}
+
+BackButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default BackButton;

packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js

@@ -23,6 +23,8 @@ import GroupPage from '../GroupPage';
 
 import Loader from './Loader';
 
+import BackButton from '../../components/BackButton';
+
 import {
   addAttributeRelation,
   cancelNewContentType,
@@ -77,6 +79,11 @@ const ROUTES = [
 
 export class App extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
+  state = {
+    routerHistory: [],
+    historyCount: 1,
+  };
+
   componentDidMount() {
     this.props.getData();
   }
@@ -86,6 +93,13 @@ export class App extends React.Component {
     if (prevProps.shouldRefetchData !== this.props.shouldRefetchData) {
       this.props.getData();
     }
+    if (prevProps.location !== this.props.location) {
+      if (prevProps.location.pathname !== this.getPathname()) {
+        this.addRouterHistory(prevProps.location.pathname);
+      } else {
+        this.increaseHistoryCount();
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -101,8 +115,51 @@ export class App extends React.Component {
     );
   };
 
+  addRouterHistory = pathname => {
+    if (this.getLastPathname() !== this.getPathname()) {
+      this.setState(prevState => {
+        return {
+          routerHistory: [...prevState.routerHistory, pathname],
+          historyCount: prevState.historyCount + 1,
+        };
+      });
+    }
+  };
+
+  increaseHistoryCount = () => {
+    this.setState(prevState => {
+      return {
+        routerHistory: [...prevState.routerHistory],
+        historyCount: prevState.historyCount + 1,
+      };
+    });
+  };
+
+  removeRouterHistory = () => {
+    const array = [...this.state.routerHistory];
+    const index = array.length - 1;
+
+    if (index !== -1) {
+      array.splice(index, 1);
+      this.setState(prevState => {
+        return {
+          routerHistory: array,
+          historyCount: prevState.historyCount + 1,
+        };
+      });
+    }
+  };
+
   getSearch = () => this.props.location.search;
 
+  getPathname = () => this.props.location.pathname;
+
+  getLastPathname = () => {
+    const { routerHistory } = this.state;
+
+    return routerHistory[routerHistory.length - 1];
+  };
+
   getActionType = () => {
     return getQueryParameters(this.getSearch(), 'actionType');
   };
@@ -140,6 +197,24 @@ export class App extends React.Component {
   getFeatureNameFromSearch = () =>
     getQueryParameters(this.getSearch(), `${this.getFeatureType()}Name`);
 
+  handleGoBack = async () => {
+    const { history } = this.props;
+    const { routerHistory, historyCount } = this.state;
+
+    await this.wait();
+
+    if (routerHistory.length > 0) {
+      history.push(this.getLastPathname());
+      this.removeRouterHistory();
+    } else {
+      history.go(-historyCount);
+    }
+  };
+
+  wait = async () => {
+    return new Promise(resolve => setTimeout(resolve, 200));
+  };
+
   isUpdatingTemporaryModel = (modelName = this.getFeatureNameFromSearch()) => {
     const { models } = this.props;
 
@@ -194,7 +269,7 @@ export class App extends React.Component {
       createTempGroup,
       groups,
       history: { push },
-      location: { pathname, search },
+      location: { search },
       isLoading,
       models,
       onChangeExistingContentTypeMainInfos,
@@ -227,7 +302,7 @@ export class App extends React.Component {
         modifiedData: this.getFormDataForModel(),
         onChangeExistingFeatureMainInfos: onChangeExistingContentTypeMainInfos,
         onChangeNewFeatureMainInfos: onChangeNewContentTypeMainInfos,
-        pathname,
+        pathname: this.getPathname(),
         push,
         resetExistingFeatureMainInfos: resetExistingContentTypeMainInfos,
         resetNewFeatureMainInfos: resetNewContentTypeMainInfos,
@@ -246,7 +321,7 @@ export class App extends React.Component {
         modifiedData: this.getFormDataForGroup(),
         onChangeExistingFeatureMainInfos: onChangeExistingGroupMainInfos,
         onChangeNewFeatureMainInfos: onChangeNewGroupMainInfos,
-        pathname,
+        pathname: this.getPathname(),
         push,
         resetExistingFeatureMainInfos: resetExistingGroupMainInfos,
         resetNewFeatureMainInfos: () => {},
@@ -264,6 +339,7 @@ export class App extends React.Component {
         }}
       >
         <div className={styles.app}>
+          <BackButton onClick={this.handleGoBack}></BackButton>
           <Switch>
             {ROUTES.map(this.renderRoute)}
             <Route component={NotFound} />

packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js

@@ -17,7 +17,6 @@ import ViewContainer from '../ViewContainer';
 import RelationFormGroup from '../RelationFormGroup';
 
 import {
-  BackHeader,
   Button,
   EmptyAttributesBlock,
   getQueryParameters,
@@ -316,10 +315,6 @@ export class GroupPage extends React.Component {
     this.setState({ attrToDelete: null, showDeleteAttrWarning: false });
   };
 
-  handleGoBack = () => {
-    this.props.history.goBack();
-  };
-
   handleSubmit = (shouldContinue = false) => {
     const {
       addAttributeRelationGroup,
@@ -523,7 +518,6 @@ export class GroupPage extends React.Component {
 
     return (
       <>
-        <BackHeader onClick={this.handleGoBack} />
         <FormattedMessage id={`${pluginId}.prompt.content.unsaved`}>
           {msg => (
             <Prompt
@@ -715,7 +709,6 @@ GroupPage.propTypes = {
   groups: PropTypes.array.isRequired,
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
-    goBack: PropTypes.func.isRequired,
   }),
   initialDataGroup: PropTypes.object.isRequired,
   location: PropTypes.shape({

packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/tests/index.test.js

@@ -69,7 +69,6 @@ const props = {
   ],
   history: {
     push: jest.fn(),
-    goBack: jest.fn(),
   },
   initialDataGroup: {
     tests: {
@@ -232,15 +231,6 @@ describe('CTB <GroupPage />', () => {
     });
   });
 
-  describe('HandleGoBack', () => {
-    it('should go to previous page', () => {
-      const { handleGoBack } = shallow(<GroupPage {...props} />).instance();
-      handleGoBack();
-
-      expect(props.history.goBack).toHaveBeenCalled();
-    });
-  });
-
   describe('toggleDeleteAttrModalWarning', () => {
     const wrapper = shallow(<GroupPage {...props} />);
     expect(wrapper.state()).toEqual({

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js

@@ -14,7 +14,6 @@ import { get, isEqual, pickBy } from 'lodash';
 import { Prompt } from 'react-router';
 
 import {
-  BackHeader,
   Button,
   EmptyAttributesBlock,
   List,
@@ -381,17 +380,16 @@ export class ModelPage extends React.Component {
     this.setState({ attrToDelete: null, showDeleteAttrWarning: false });
   };
 
-  handleGoBack = () => {
-    this.props.history.goBack();
-  };
-
   handleRedirectToGroup = group => {
+    const {
+      history: { push },
+    } = this.props;
     const { source, uid } = group;
 
     const base = `/plugins/${pluginId}/groups/${uid}`;
     const to = source ? `${base}&source=${source}` : base;
 
-    this.props.history.push(to);
+    push(to);
   };
 
   handleSubmit = (shouldContinue = false) => {
@@ -599,7 +597,6 @@ export class ModelPage extends React.Component {
 
     return (
       <div className={styles.modelpage}>
-        <BackHeader onClick={this.handleGoBack} />
         <FormattedMessage id={`${pluginId}.prompt.content.unsaved`}>
           {msg => (
             <Prompt

packages/strapi-plugin-content-type-builder/admin/src/containers/ViewContainer/StyledViewContainer.js

@@ -12,11 +12,6 @@ const StyledViewContainer = styled.div`
   min-height: calc(100vh - ${sizes.header.height});
   .components-container {
     padding: 1.8rem 1.5rem;
-    div div:not(.list-button) {
-      button {
-        top: 1.8rem;
-      }
-    }
     > div:not(:first-of-type):not(:last-of-type) {
       > div:first-of-type {
         padding-bottom: 1rem;
@@ -35,9 +30,16 @@ const StyledViewContainer = styled.div`
     .trash-btn-wrapper {
       position: relative;
       width: 100%;
-      padding-top: 3.4rem;
+      padding-top: 3.1rem;
       display: flex;
       justify-content: flex-end;
+      > div {
+        height: 30px;
+        line-height: 30px;
+        > div {
+          padding: 0 15px;
+        }
+      }
     }
   }
 `;