From 1222111bef20548f7a8d632e089cc810723c1459 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Thu, 16 Jul 2020 22:31:33 -0500
Subject: [PATCH] fix: unify popup content padding

---
 frontend/src/Admin/index.tsx                  | 341 +++++++++---------
 frontend/src/App/TopNavbar.tsx                |  39 +-
 frontend/src/Teams/Members/index.tsx          |   7 +-
 .../shared/components/ListActions/Styles.ts   |   4 +
 .../shared/components/ListActions/index.tsx   |   6 +-
 .../components/ProjectSettings/index.tsx      |  10 +-
 6 files changed, 207 insertions(+), 200 deletions(-)

diff --git a/frontend/src/Admin/index.tsx b/frontend/src/Admin/index.tsx
index 31f2fcd..9c1f0d8 100644
--- a/frontend/src/Admin/index.tsx
+++ b/frontend/src/Admin/index.tsx
@@ -3,11 +3,11 @@ import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
 import {
-    useUsersQuery,
-    useDeleteUserAccountMutation,
-    useCreateUserAccountMutation,
-    UsersDocument,
-    UsersQuery,
+  useUsersQuery,
+  useDeleteUserAccountMutation,
+  useCreateUserAccountMutation,
+  UsersDocument,
+  UsersQuery,
 } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import styled from 'styled-components';
@@ -33,29 +33,30 @@ const DeleteUserButton = styled(Button)`
 `;
 
 type DeleteUserPopupProps = {
-    onDeleteUser: () => void;
+  onDeleteUser: () => void;
 };
 const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
-    return (
-        <DeleteUserWrapper>
-            <DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
-            <DeleteUserButton onClick={() => onDeleteUser()} color="danger">
-                Delete user
+  return (
+    <DeleteUserWrapper>
+      <DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
+      <DeleteUserButton onClick={() => onDeleteUser()} color="danger">
+        Delete user
       </DeleteUserButton>
-        </DeleteUserWrapper>
-    );
+    </DeleteUserWrapper>
+  );
 };
 type CreateUserData = {
-    email: string;
-    username: string;
-    fullName: string;
-    initials: string;
-    password: string;
-    roleCode: string;
+  email: string;
+  username: string;
+  fullName: string;
+  initials: string;
+  password: string;
+  roleCode: string;
 };
 const CreateUserForm = styled.form`
   display: flex;
   flex-direction: column;
+  margin: 0 12px;
 `;
 const CreateUserButton = styled(Button)`
   margin-top: 8px;
@@ -73,167 +74,167 @@ const InputError = styled.span`
 `;
 
 type AddUserPopupProps = {
-    onAddUser: (user: CreateUserData) => void;
+  onAddUser: (user: CreateUserData) => void;
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-    const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
-    const [role, setRole] = useState<string | null>(null);
-    register({ name: 'roleCode' }, { required: true });
+  const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
+  const [role, setRole] = useState<string | null>(null);
+  register({ name: 'roleCode' }, { required: true });
 
-    const createUser = (data: CreateUserData) => {
-        onAddUser(data);
-    };
-    return (
-        <CreateUserForm onSubmit={handleSubmit(createUser)}>
-            <AddUserInput
-                floatingLabel
-                width="100%"
-                label="Full Name"
-                id="fullName"
-                name="fullName"
-                variant="alternate"
-                ref={register({ required: 'Full name is required' })}
-            />
-            {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
-            <AddUserInput
-                floatingLabel
-                width="100%"
-                label="Email"
-                id="email"
-                name="email"
-                variant="alternate"
-                ref={register({ required: 'Email is required' })}
-            />
-            <Select
-                label="Role"
-                value={role}
-                options={[
-                    { label: 'Admin', value: 'admin' },
-                    { label: 'Member', value: 'member' },
-                ]}
-                onChange={newRole => {
-                    setRole(newRole);
-                    setValue('roleCode', newRole.value);
-                }}
-            />
-            {errors.email && <InputError>{errors.email.message}</InputError>}
-            <AddUserInput
-                floatingLabel
-                width="100%"
-                label="Username"
-                id="username"
-                name="username"
-                variant="alternate"
-                ref={register({ required: 'Username is required' })}
-            />
-            {errors.username && <InputError>{errors.username.message}</InputError>}
-            <AddUserInput
-                floatingLabel
-                width="100%"
-                label="Initials"
-                id="initials"
-                name="initials"
-                variant="alternate"
-                ref={register({ required: 'Initials is required' })}
-            />
-            {errors.initials && <InputError>{errors.initials.message}</InputError>}
-            <AddUserInput
-                floatingLabel
-                width="100%"
-                label="Password"
-                id="password"
-                name="password"
-                variant="alternate"
-                ref={register({ required: 'Password is required' })}
-            />
-            {errors.password && <InputError>{errors.password.message}</InputError>}
-            <CreateUserButton type="submit">Create</CreateUserButton>
-        </CreateUserForm>
-    );
+  const createUser = (data: CreateUserData) => {
+    onAddUser(data);
+  };
+  return (
+    <CreateUserForm onSubmit={handleSubmit(createUser)}>
+      <AddUserInput
+        floatingLabel
+        width="100%"
+        label="Full Name"
+        id="fullName"
+        name="fullName"
+        variant="alternate"
+        ref={register({ required: 'Full name is required' })}
+      />
+      {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
+      <AddUserInput
+        floatingLabel
+        width="100%"
+        label="Email"
+        id="email"
+        name="email"
+        variant="alternate"
+        ref={register({ required: 'Email is required' })}
+      />
+      <Select
+        label="Role"
+        value={role}
+        options={[
+          { label: 'Admin', value: 'admin' },
+          { label: 'Member', value: 'member' },
+        ]}
+        onChange={newRole => {
+          setRole(newRole);
+          setValue('roleCode', newRole.value);
+        }}
+      />
+      {errors.email && <InputError>{errors.email.message}</InputError>}
+      <AddUserInput
+        floatingLabel
+        width="100%"
+        label="Username"
+        id="username"
+        name="username"
+        variant="alternate"
+        ref={register({ required: 'Username is required' })}
+      />
+      {errors.username && <InputError>{errors.username.message}</InputError>}
+      <AddUserInput
+        floatingLabel
+        width="100%"
+        label="Initials"
+        id="initials"
+        name="initials"
+        variant="alternate"
+        ref={register({ required: 'Initials is required' })}
+      />
+      {errors.initials && <InputError>{errors.initials.message}</InputError>}
+      <AddUserInput
+        floatingLabel
+        width="100%"
+        label="Password"
+        id="password"
+        name="password"
+        variant="alternate"
+        ref={register({ required: 'Password is required' })}
+      />
+      {errors.password && <InputError>{errors.password.message}</InputError>}
+      <CreateUserButton type="submit">Create</CreateUserButton>
+    </CreateUserForm>
+  );
 };
 
 const AdminRoute = () => {
-    useEffect(() => {
-        document.title = 'Citadel | Admin';
-    }, []);
-    const { loading, data } = useUsersQuery();
-    const { showPopup, hidePopup } = usePopup();
-    const [deleteUser] = useDeleteUserAccountMutation({
-        update: (client, response) => {
-            updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-                produce(cache, draftCache => {
-                    draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
-                }),
-            );
-        },
-    });
-    const [createUser] = useCreateUserAccountMutation({
-        update: (client, createData) => {
-            const cacheData: any = client.readQuery({
-                query: UsersDocument,
-            });
-            console.log(cacheData);
-            console.log(createData);
-            const newData = produce(cacheData, (draftState: any) => {
-                draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
-            });
+  useEffect(() => {
+    document.title = 'Citadel | Admin';
+  }, []);
+  const { loading, data } = useUsersQuery();
+  const { showPopup, hidePopup } = usePopup();
+  const [deleteUser] = useDeleteUserAccountMutation({
+    update: (client, response) => {
+      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+        produce(cache, draftCache => {
+          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
+        }),
+      );
+    },
+  });
+  const [createUser] = useCreateUserAccountMutation({
+    update: (client, createData) => {
+      const cacheData: any = client.readQuery({
+        query: UsersDocument,
+      });
+      console.log(cacheData);
+      console.log(createData);
+      const newData = produce(cacheData, (draftState: any) => {
+        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
+      });
 
-            client.writeQuery({
-                query: UsersDocument,
-                data: {
-                    ...newData,
-                },
-            });
+      client.writeQuery({
+        query: UsersDocument,
+        data: {
+          ...newData,
         },
-    });
-    if (loading) {
-        return <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />;
-    }
-    if (data) {
-        return (
-            <>
-                <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />
-                <Admin
-                    initialTab={1}
-                    users={data.users}
-                    onInviteUser={() => { }}
-                    onUpdateUserPassword={(user, password) => {
-                        console.log(user)
-                        console.log(password)
-                        hidePopup()
-                    }}
-                    onDeleteUser={($target, userID) => {
-                        showPopup(
-                            $target,
-                            <Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
-                                <DeleteUserPopup
-                                    onDeleteUser={() => {
-                                        deleteUser({ variables: { userID } });
-                                        hidePopup();
-                                    }}
-                                />
-                            </Popup>,
-                        );
-                    }}
-                    onAddUser={$target => {
-                        showPopup(
-                            $target,
-                            <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
-                                <AddUserPopup
-                                    onAddUser={user => {
-                                        createUser({ variables: { ...user } });
-                                        hidePopup();
-                                    }}
-                                />
-                            </Popup>,
-                        );
-                    }}
+      });
+    },
+  });
+  if (loading) {
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
+  }
+  if (data) {
+    return (
+      <>
+        <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+        <Admin
+          initialTab={1}
+          users={data.users}
+          onInviteUser={() => {}}
+          onUpdateUserPassword={(user, password) => {
+            console.log(user);
+            console.log(password);
+            hidePopup();
+          }}
+          onDeleteUser={($target, userID) => {
+            showPopup(
+              $target,
+              <Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
+                <DeleteUserPopup
+                  onDeleteUser={() => {
+                    deleteUser({ variables: { userID } });
+                    hidePopup();
+                  }}
                 />
-            </>
-        );
-    }
-    return <span>error</span>;
+              </Popup>,
+            );
+          }}
+          onAddUser={$target => {
+            showPopup(
+              $target,
+              <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
+                <AddUserPopup
+                  onAddUser={user => {
+                    createUser({ variables: { ...user } });
+                    hidePopup();
+                  }}
+                />
+              </Popup>,
+            );
+          }}
+        />
+      </>
+    );
+  }
+  return <span>error</span>;
 };
 
 export default AdminRoute;
diff --git a/frontend/src/App/TopNavbar.tsx b/frontend/src/App/TopNavbar.tsx
index d058abf..502ed9c 100644
--- a/frontend/src/App/TopNavbar.tsx
+++ b/frontend/src/App/TopNavbar.tsx
@@ -1,9 +1,9 @@
-import React, {useState, useContext, useEffect} from 'react';
-import TopNavbar, {MenuItem} from 'shared/components/TopNavbar';
+import React, { useState, useContext, useEffect } from 'react';
+import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
 import styled from 'styled-components/macro';
-import DropdownMenu, {ProfileMenu} from 'shared/components/DropdownMenu';
-import ProjectSettings, {DeleteConfirm, DELETE_INFO} from 'shared/components/ProjectSettings';
-import {useHistory} from 'react-router';
+import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
+import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
+import { useHistory } from 'react-router';
 import UserIDContext from 'App/context';
 import {
   RoleCode,
@@ -12,14 +12,15 @@ import {
   useGetProjectsQuery,
   GetProjectsDocument,
 } from 'shared/generated/graphql';
-import {usePopup, Popup} from 'shared/components/PopupMenu';
-import {History} from 'history';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { History } from 'history';
 import produce from 'immer';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const TeamContainer = styled.div`
   display: flex;
   flex-direction: column;
+  margin: 0 8px;
 `;
 
 const TeamTitle = styled.h3`
@@ -45,7 +46,7 @@ const TeamProjectLink = styled(Link)`
   user-select: none;
 `;
 
-const TeamProjectBackground = styled.div<{color: string}>`
+const TeamProjectBackground = styled.div<{ color: string }>`
   background-image: url(null);
   background-color: ${props => props.color};
 
@@ -68,7 +69,7 @@ const TeamProjectBackground = styled.div<{color: string}>`
   }
 `;
 
-const TeamProjectAvatar = styled.div<{color: string}>`
+const TeamProjectAvatar = styled.div<{ color: string }>`
   background-image: url(null);
   background-color: ${props => props.color};
 
@@ -122,12 +123,12 @@ const TeamProjectContainer = styled.div`
 const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
 
 const ProjectFinder = () => {
-  const {loading, data} = useGetProjectsQuery();
+  const { loading, data } = useGetProjectsQuery();
   if (loading) {
     return <span>loading</span>;
   }
   if (data) {
-    const {projects, teams, organizations} = data;
+    const { projects, teams, organizations } = data;
     const projectTeams = teams.map(team => {
       return {
         id: team.id,
@@ -166,8 +167,8 @@ type ProjectPopupProps = {
   projectID: string;
 };
 
-export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projectID}) => {
-  const {hidePopup, setTab} = usePopup();
+export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
+  const { hidePopup, setTab } = usePopup();
   const [deleteProject] = useDeleteProjectMutation({
     update: (client, deleteData) => {
       const cacheData: any = client.readQuery({
@@ -206,7 +207,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projec
           deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
           onConfirmDelete={() => {
             if (projectID) {
-              deleteProject({variables: {projectID}});
+              deleteProject({ variables: { projectID } });
               hidePopup();
               history.push('/projects');
             }
@@ -249,16 +250,16 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   nameOnly,
 }) => {
   console.log(popupContent);
-  const {loading, data} = useMeQuery();
-  const {showPopup, hidePopup, setTab} = usePopup();
+  const { loading, data } = useMeQuery();
+  const { showPopup, hidePopup, setTab } = usePopup();
   const history = useHistory();
-  const {userID, setUserID} = useContext(UserIDContext);
+  const { userID, setUserID } = useContext(UserIDContext);
   const onLogout = () => {
     fetch('/auth/logout', {
       method: 'POST',
       credentials: 'include',
     }).then(async x => {
-      const {status} = x;
+      const { status } = x;
       if (status === 200) {
         history.replace('/login');
         setUserID(null);
diff --git a/frontend/src/Teams/Members/index.tsx b/frontend/src/Teams/Members/index.tsx
index ea8ae12..88206ca 100644
--- a/frontend/src/Teams/Members/index.tsx
+++ b/frontend/src/Teams/Members/index.tsx
@@ -18,13 +18,14 @@ import styled, { css } from 'styled-components/macro';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
+import ControlledInput from 'shared/components/ControlledInput';
 
 const MemberListWrapper = styled.div`
   flex: 1 1;
 `;
 
-const SearchInput = styled(Input)`
-  margin: 0;
+const SearchInput = styled(ControlledInput)`
+  margin: 0 12px;
 `;
 
 const UserMember = styled(Member)`
@@ -37,7 +38,7 @@ const UserMember = styled(Member)`
 `;
 
 const TeamMemberList = styled.div`
-  margin: 8px 0;
+  margin: 8px 12px;
 `;
 
 type UserManagementPopupProps = {
diff --git a/frontend/src/shared/components/ListActions/Styles.ts b/frontend/src/shared/components/ListActions/Styles.ts
index 241f636..49d2b5b 100644
--- a/frontend/src/shared/components/ListActions/Styles.ts
+++ b/frontend/src/shared/components/ListActions/Styles.ts
@@ -33,3 +33,7 @@ export const ListSeparator = styled.hr`
   padding: 0;
   width: 100%;
 `;
+
+export const InnerContent = styled.div`
+  margin: 0 12px;
+`;
diff --git a/frontend/src/shared/components/ListActions/index.tsx b/frontend/src/shared/components/ListActions/index.tsx
index 0a0ef06..e41b5c7 100644
--- a/frontend/src/shared/components/ListActions/index.tsx
+++ b/frontend/src/shared/components/ListActions/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
+import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
 
 type Props = {
   taskGroupID: string;
@@ -8,7 +8,7 @@ type Props = {
 };
 const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
   return (
-    <>
+    <InnerContent>
       <ListActionsWrapper>
         <ListActionItemWrapper>
           <ListActionItem>Add card...</ListActionItem>
@@ -44,7 +44,7 @@ const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
           <ListActionItem>Archive This List</ListActionItem>
         </ListActionItemWrapper>
       </ListActionsWrapper>
-    </>
+    </InnerContent>
   );
 };
 export default LabelManager;
diff --git a/frontend/src/shared/components/ProjectSettings/index.tsx b/frontend/src/shared/components/ProjectSettings/index.tsx
index 3958c83..babb64c 100644
--- a/frontend/src/shared/components/ProjectSettings/index.tsx
+++ b/frontend/src/shared/components/ProjectSettings/index.tsx
@@ -5,7 +5,7 @@ import Button from 'shared/components/Button';
 
 export const ListActionsWrapper = styled.ul`
   list-style-type: none;
-  margin: 0;
+  margin: 0 12px;
   padding: 0;
 `;
 
@@ -40,7 +40,7 @@ export const ListSeparator = styled.hr`
 type Props = {
   onDeleteProject: () => void;
 };
-const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => {
+const ProjectSettings: React.FC<Props> = ({ onDeleteProject }) => {
   return (
     <>
       <ListActionsWrapper>
@@ -55,7 +55,7 @@ const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => {
 type TeamSettingsProps = {
   onDeleteTeam: () => void;
 };
-export const TeamSettings: React.FC<TeamSettingsProps> = ({onDeleteTeam}) => {
+export const TeamSettings: React.FC<TeamSettingsProps> = ({ onDeleteTeam }) => {
   return (
     <>
       <ListActionsWrapper>
@@ -109,7 +109,7 @@ export const DELETE_INFO = {
   },
 };
 
-const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems, onConfirmDelete}) => {
+const DeleteConfirm: React.FC<DeleteConfirmProps> = ({ description, deletedItems, onConfirmDelete }) => {
   return (
     <ConfirmWrapper>
       <ConfirmDescription>
@@ -127,5 +127,5 @@ const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems,
   );
 };
 
-export {DeleteConfirm};
+export { DeleteConfirm };
 export default ProjectSettings;