fix: unify popup content padding

This commit is contained in:
Jordan Knott 2020-07-16 22:31:33 -05:00
parent c35f63e668
commit 1222111bef
6 changed files with 207 additions and 200 deletions

View File

@ -56,6 +56,7 @@ type CreateUserData = {
const CreateUserForm = styled.form` const CreateUserForm = styled.form`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 12px;
`; `;
const CreateUserButton = styled(Button)` const CreateUserButton = styled(Button)`
margin-top: 8px; margin-top: 8px;
@ -199,9 +200,9 @@ const AdminRoute = () => {
users={data.users} users={data.users}
onInviteUser={() => {}} onInviteUser={() => {}}
onUpdateUserPassword={(user, password) => { onUpdateUserPassword={(user, password) => {
console.log(user) console.log(user);
console.log(password) console.log(password);
hidePopup() hidePopup();
}} }}
onDeleteUser={($target, userID) => { onDeleteUser={($target, userID) => {
showPopup( showPopup(

View File

@ -20,6 +20,7 @@ import {Link} from 'react-router-dom';
const TeamContainer = styled.div` const TeamContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 8px;
`; `;
const TeamTitle = styled.h3` const TeamTitle = styled.h3`

View File

@ -18,13 +18,14 @@ import styled, { css } from 'styled-components/macro';
import { usePopup, Popup } from 'shared/components/PopupMenu'; import { usePopup, Popup } from 'shared/components/PopupMenu';
import TaskAssignee from 'shared/components/TaskAssignee'; import TaskAssignee from 'shared/components/TaskAssignee';
import Member from 'shared/components/Member'; import Member from 'shared/components/Member';
import ControlledInput from 'shared/components/ControlledInput';
const MemberListWrapper = styled.div` const MemberListWrapper = styled.div`
flex: 1 1; flex: 1 1;
`; `;
const SearchInput = styled(Input)` const SearchInput = styled(ControlledInput)`
margin: 0; margin: 0 12px;
`; `;
const UserMember = styled(Member)` const UserMember = styled(Member)`
@ -37,7 +38,7 @@ const UserMember = styled(Member)`
`; `;
const TeamMemberList = styled.div` const TeamMemberList = styled.div`
margin: 8px 0; margin: 8px 12px;
`; `;
type UserManagementPopupProps = { type UserManagementPopupProps = {

View File

@ -33,3 +33,7 @@ export const ListSeparator = styled.hr`
padding: 0; padding: 0;
width: 100%; width: 100%;
`; `;
export const InnerContent = styled.div`
margin: 0 12px;
`;

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles'; import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
type Props = { type Props = {
taskGroupID: string; taskGroupID: string;
@ -8,7 +8,7 @@ type Props = {
}; };
const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => { const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
return ( return (
<> <InnerContent>
<ListActionsWrapper> <ListActionsWrapper>
<ListActionItemWrapper> <ListActionItemWrapper>
<ListActionItem>Add card...</ListActionItem> <ListActionItem>Add card...</ListActionItem>
@ -44,7 +44,7 @@ const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
<ListActionItem>Archive This List</ListActionItem> <ListActionItem>Archive This List</ListActionItem>
</ListActionItemWrapper> </ListActionItemWrapper>
</ListActionsWrapper> </ListActionsWrapper>
</> </InnerContent>
); );
}; };
export default LabelManager; export default LabelManager;

View File

@ -5,7 +5,7 @@ import Button from 'shared/components/Button';
export const ListActionsWrapper = styled.ul` export const ListActionsWrapper = styled.ul`
list-style-type: none; list-style-type: none;
margin: 0; margin: 0 12px;
padding: 0; padding: 0;
`; `;