Make many small frontend fixes (icons update, paddings, font-sizes) (#132)

front/src/layout/navbar/NavItem.tsx

@@ -19,6 +19,7 @@ const StyledItem = styled.button<StyledItemProps>`
   border: none;
   font-size: ${(props) => props.theme.fontSizeMedium};
   cursor: pointer;
+  user-select: none;
   background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
   padding-top: ${(props) => props.theme.spacing(1)};
   padding-bottom: ${(props) => props.theme.spacing(1)};

front/src/layout/navbar/NavTitle.tsx

@@ -11,7 +11,7 @@ const StyledTitle = styled.div`
   font-size: ${(props) => props.theme.fontSizeExtraSmall};
   font-weight: 600;
   padding-top: ${(props) => props.theme.spacing(1)};
-  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-bottom: ${(props) => props.theme.spacing(2)};
   padding-left: ${(props) => props.theme.spacing(1)};
 `;
 

front/src/layout/navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import { Workspace } from '../../interfaces/entities/workspace.interface';
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
-import { FaRegUser, FaRegBuilding } from 'react-icons/fa';
+import { TbBuilding, TbUser } from 'react-icons/tb';
 
 const NavbarContainer = styled.div`
   display: flex;
@@ -36,7 +36,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="People"
             to="/people"
-            icon={<FaRegUser />}
+            icon={<TbUser size={16} />}
             active={
               !!useMatch({
                 path: useResolvedPath('/people').pathname,
@@ -47,7 +47,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="Companies"
             to="/companies"
-            icon={<FaRegBuilding />}
+            icon={<TbBuilding size={16} />}
             active={
               !!useMatch({
                 path: useResolvedPath('/companies').pathname,

front/src/layout/navbar/WorkspaceContainer.tsx

@@ -10,6 +10,7 @@ const StyledContainer = styled.button`
   height: 34px;
   align-items: center;
   cursor: pointer;
+  user-select: none;
   border: 0;
   background: inherit;
   border: 1px solid ${(props) => props.theme.primaryBorder};

front/src/layout/navbar/__stories__/NavItem.stories.tsx

@@ -1,9 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
-import { FaRegUser } from 'react-icons/fa';
 import { ThemeProvider } from '@emotion/react';
 
 import NavItem from '../../../layout/navbar/NavItem';
 import { lightTheme } from '../../styles/themes';
+import { TbUser } from 'react-icons/tb';
 
 const component = {
   title: 'NavItem',
@@ -15,7 +15,7 @@ export default component;
 export const NavItemDefault = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>
-      <NavItem label="Test" to="/test" icon={<FaRegUser />} />
+      <NavItem label="Test" to="/test" icon={<TbUser size={16} />} />
     </MemoryRouter>
   </ThemeProvider>
 );
@@ -23,7 +23,12 @@ export const NavItemDefault = () => (
 export const NavItemActive = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter initialEntries={['/test']}>
-      <NavItem label="Test" to="/test" active={true} icon={<FaRegUser />} />
+      <NavItem
+        label="Test"
+        to="/test"
+        active={true}
+        icon={<TbUser size={16} />}
+      />
     </MemoryRouter>
   </ThemeProvider>
 );

front/src/layout/top-bar/TopBar.tsx

@@ -26,13 +26,14 @@ const AddButtonContainer = styled.div`
   display: flex;
   justify-self: flex-end;
   border: 1px solid ${(props) => props.theme.primaryBorder};
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  color: ${(props) => props.theme.text60};
+  color: ${(props) => props.theme.text80};
   cursor: pointer;
+  user-select: none;
   margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
@@ -53,7 +54,7 @@ function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
             data-testid="add-button"
             onClick={onAddButtonClick}
           >
-            <TbPlus />
+            <TbPlus size={16} />
           </AddButtonContainer>
         )}
       </TopBarContainer>