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

@ -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);