Polished CSS, refactored useApi Query hook

client/src/Project/Board/Lists/List/Issue/Styles.js

@@ -16,6 +16,9 @@ export const Issue = styled.div`
   box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25);
   transition: background 0.1s;
   ${mixin.clickable}
+  @media (max-width: 1100px) {
+    padding: 10px 8px;
+  }
   &:hover {
     background: ${color.backgroundLight};
   }
@@ -30,6 +33,9 @@ export const Issue = styled.div`
 export const Title = styled.p`
   padding-bottom: 11px;
   ${font.size(15)}
+  @media (max-width: 1100px) {
+    ${font.size(14.5)}
+  }
 `;
 
 export const Bottom = styled.div`

client/src/Project/Board/Lists/List/Styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { color, font } from 'shared/utils/styles';
+import { color, font, mixin } from 'shared/utils/styles';
 
 export const List = styled.div`
   display: flex;
@@ -17,6 +17,7 @@ export const Title = styled.div`
   text-transform: uppercase;
   color: ${color.textMedium};
   ${font.size(12.5)};
+  ${mixin.truncateText}
 `;
 
 export const IssuesCount = styled.span`

client/src/Project/Board/Lists/List/index.jsx

@@ -4,7 +4,6 @@ import moment from 'moment';
 import { Droppable } from 'react-beautiful-dnd';
 import { intersection } from 'lodash';
 
-import useCurrentUser from 'shared/hooks/currentUser';
 import { IssueStatusCopy } from 'shared/constants/issues';
 
 import Issue from './Issue';
@@ -14,11 +13,14 @@ const propTypes = {
   status: PropTypes.string.isRequired,
   project: PropTypes.object.isRequired,
   filters: PropTypes.object.isRequired,
+  currentUserId: PropTypes.number,
 };
 
-const ProjectBoardList = ({ status, project, filters }) => {
-  const { currentUserId } = useCurrentUser();
+const defaultProps = {
+  currentUserId: null,
+};
 
+const ProjectBoardList = ({ status, project, filters, currentUserId }) => {
   const filteredIssues = filterIssues(project.issues, filters, currentUserId);
   const filteredListIssues = getSortedListIssues(filteredIssues, status);
   const allListIssues = getSortedListIssues(project.issues, status);
@@ -77,5 +79,6 @@ const formatIssuesCount = (allListIssues, filteredListIssues) => {
 };
 
 ProjectBoardList.propTypes = propTypes;
+ProjectBoardList.defaultProps = defaultProps;
 
 export default ProjectBoardList;

client/src/Project/Board/Lists/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-beautiful-dnd';
 
+import useCurrentUser from 'shared/hooks/currentUser';
 import api from 'shared/utils/api';
 import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
 import { IssueStatus } from 'shared/constants/issues';
@@ -16,6 +17,8 @@ const propTypes = {
 };
 
 const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
+  const { currentUserId } = useCurrentUser();
+
   const handleIssueDrop = ({ draggableId, destination, source }) => {
     if (!isPositionChanged(source, destination)) return;
 
@@ -35,7 +38,13 @@ const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
     <DragDropContext onDragEnd={handleIssueDrop}>
       <Lists>
         {Object.values(IssueStatus).map(status => (
-          <List key={status} status={status} project={project} filters={filters} />
+          <List
+            key={status}
+            status={status}
+            project={project}
+            filters={filters}
+            currentUserId={currentUserId}
+          />
         ))}
       </Lists>
     </DragDropContext>

client/src/Project/IssueSearch/Styles.js

@@ -4,7 +4,7 @@ import { color, font, mixin } from 'shared/utils/styles';
 import { InputDebounced, Spinner, Icon } from 'shared/components';
 
 export const IssueSearch = styled.div`
-  padding: 25px 35px;
+  padding: 25px 35px 60px;
 `;
 
 export const SearchInputCont = styled.div`

client/src/Project/Sidebar/Styles.js

@@ -3,15 +3,20 @@ import styled from 'styled-components';
 import { color, sizes, font, mixin, zIndexValues } from 'shared/utils/styles';
 
 export const Sidebar = styled.div`
-  position: absolute;
+  position: fixed;
   z-index: ${zIndexValues.navLeft - 1};
   top: 0;
   left: ${sizes.appNavBarLeftWidth}px;
   height: 100vh;
-  width: 240px;
-  padding: 0 16px;
+  width: ${sizes.secondarySideBarWidth}px;
+  padding: 0 16px 24px;
   background: ${color.backgroundLightest};
   border-right: 1px solid ${color.borderLightest};
+  ${mixin.scrollableY}
+  ${mixin.customScrollbar()}
+  @media (max-width: 1100px) {
+    width: ${sizes.secondarySideBarWidth - 10}px;
+  }
 `;
 
 export const ProjectInfo = styled.div`
@@ -67,18 +72,20 @@ export const LinkText = styled.div`
 `;
 
 export const NotImplemented = styled.div`
-  display: none;
+  display: inline-block;
   position: absolute;
-  top: 9px;
-  left: 101%;
-  width: 120px;
-  padding: 3px 0 3px 8px;
+  top: 7px;
+  left: 40px;
+  width: 140px;
+  padding: 5px 0 5px 8px;
   border-radius: 3px;
-  color: #fff;
-  background: #000;
-  ${font.size(12.5)};
-  ${font.medium}
+  text-transform: uppercase;
+  color: ${color.textDark};
+  background: ${color.backgroundMedium};
+  opacity: 0;
+  ${font.size(11.5)};
+  ${font.bold}
   ${LinkItem}:hover & {
-    display: inline-block;
+    opacity: 1;
   }
 `;

client/src/Project/Styles.js

@@ -2,6 +2,12 @@ import styled from 'styled-components';
 
 import { sizes } from 'shared/utils/styles';
 
+const paddingLeft = sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40;
+
 export const ProjectPage = styled.div`
-  padding: 25px 32px 0 ${sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40}px;
+  padding: 25px 32px 50px ${paddingLeft}px;
+
+  @media (max-width: 1100px) {
+    padding: 25px 20px 50px ${paddingLeft - 20}px;
+  }
 `;