style: time entry cards

package.json

@@ -107,7 +107,7 @@
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.0",
     "css-loader": "^3.4.2",
-    "electron": "8.0.1",
+    "electron": "8.5.5",
     "electron-builder": "22.3",
     "electron-react-devtools": "^0.5.3",
     "electron-reloader": "^1.2.1",
@@ -158,10 +158,10 @@
     "ensure-error": "^2.0.0",
     "formik": "^2.1.4",
     "got": "^11.8.2",
+    "javascript-time-ago": "^2.3.13",
     "lodash": "^4.17.15",
     "mdi-react": "^6.7.0",
     "moment": "^2.24.0",
-    "moment-duration-format": "^2.3.2",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
     "prop-types": "^15.7.2",
@@ -176,6 +176,7 @@
     "react-select": "^2.4.1",
     "react-simple-timefield": "^3.2.5",
     "react-tabs": "^3.1.0",
+    "react-time-ago": "^7.1.9",
     "react-toastify": "^5.5.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

render/components/ButtonGroup.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/react';
+import { useTheme } from 'styled-components';
+import { theme as Theme } from '../theme';
+import { Flex } from './Flex';
+
+const styles = {
+  buttonContainer: css`
+    & > button:first-child {
+      border-radius: 3px 0px 0px 3px;
+      border-right: none;
+    }
+    & > button:not(:first-child) {
+      border-radius: 0px;
+      border-right: none;
+      border-left: none;
+    }
+  `,
+  label: (theme: typeof Theme) => css`
+    display: flex;
+    align-items: center;
+    margin: 0;
+    border-radius: 0px 3px 3px 0px;
+    border: 2px solid ${theme.main};
+    border-left: 2px solid ${theme.mainLight};
+    padding: 0.4rem 0.6rem;
+  `
+};
+
+type ButtonGroupProps = {
+  children: ReactNode;
+  text?: string;
+}
+
+export const ButtonGroup = ({ children, text }: ButtonGroupProps) => {
+  const theme = useTheme() as typeof Theme;
+
+  return (
+    <Flex css={styles.buttonContainer} alignItems='stretch'>
+      {children}
+      {text && (<p css={styles.label(theme)}>{text}</p>)}
+    </Flex>
+  );
+};

render/components/Dropdown.tsx

@@ -13,6 +13,7 @@ import React, {
 } from 'react';
 import { css } from '@emotion/react';
 import { useTheme } from 'styled-components';
+import ReactFocusLock from 'react-focus-lock';
 import { theme as Theme } from '../theme';
 
 type DropdownProps = {
@@ -71,42 +72,46 @@ const Dropdown = ({ className, children, getDropdownToggleElement }: DropdownPro
     >
       <div className="dropdown-header">{Toggle}</div>
 
-      <ul
-        onBlur={() => setOpen(false)}
-        css={css`
-          list-style-type: none;
-          margin: 0;
-          padding: 0;
-          background: white;
-          border: 1px solid ${theme.bgDarker};
-          border-radius: 5px;
-          display: ${isOpen ? 'flex' : 'none'};
-          flex-direction: column;
-          position: absolute;
-          box-shadow: 0px 2px 5px ${theme.bgDarker};
-          width: 100%;
-          top: 2rem;
-        `}
-      >
-        {Children.map(children, child => (
-          <li
-            css={css`
-              padding: 0.5rem 0.2rem;
-              background: transparent;
-              border: none;
+      <ReactFocusLock>
+        <ul
+          onBlur={() => setOpen(false)}
+          css={css`
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            background: white;
+            border: 1px solid ${theme.bgDarker};
+            border-radius: 5px;
+            display: ${isOpen ? 'flex' : 'none'};
+            flex-direction: column;
+            position: absolute;
+            box-shadow: 0px 2px 5px ${theme.bgDarker};
+            width: 100%;
+            top: 2rem;
+            z-index: 1;
+          `}
+        >
+          {Children.map(children, child => (
+            <li
+              css={css`
+                padding: 0.5rem 0.2rem;
+                background: transparent;
+                background: white;
+                border: none;
 
-              &:hover {
-                cursor: pointer;
-                background: ${theme.bgDarker};
-              }
-            `}
-            onClick={toggleViaChild}
-            className="dropdown-list-item"
-          >
-            {child}
-          </li>
-        ))}
-      </ul>
+                &:hover {
+                  cursor: pointer;
+                  background: ${theme.bgDarker};
+                }
+              `}
+              onClick={toggleViaChild}
+              className="dropdown-list-item"
+            >
+              {child}
+            </li>
+          ))}
+        </ul>
+      </ReactFocusLock>
 
     </div>
   );

render/components/IssueDetailsPage/CommentsSection.tsx

@@ -4,9 +4,9 @@ import { css } from '@emotion/react';
 import { remote } from 'electron';
 import { useTheme } from 'styled-components';
 
+import ReactTimeAgo from 'react-time-ago';
 import { MarkdownEditor, MarkdownText } from '../MarkdownEditor';
 import { Link } from '../Link';
-import { DateComponent } from '../Date';
 import { useOvermindActions, useOvermindState } from '../../store';
 import { theme as Theme } from '../../theme';
 import type { Issue } from '../../../types';
@@ -109,7 +109,7 @@ const CommentsSection = ({ issueId }: CommentsSectionProps) => {
           <Flex justifyContent="center" css={styles.comment} key={entry.id}>
             <Flex direction="column" css={styles.commentHeader}>
               <h4 css={styles.commentAuthorName(theme)}>{entry.user.name}</h4>
-              <DateComponent className="date" date={entry.createdOn} />
+              <ReactTimeAgo className="date" date={new Date(entry.createdOn)} />
             </Flex>
             <MarkdownText css={styles.markdown(theme)} name={`comment-${entry.id}`} markdownText={entry.notes as string} />
           </Flex>

render/components/Navbar.tsx

@@ -30,6 +30,14 @@ const styles = {
   `,
   icon: css`
     vertical-align: middle;
+  `,
+  title: css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `,
+  titleContainer: css`
+    overflow: hidden;
   `
 };
 
@@ -74,11 +82,11 @@ const Navbar = () => {
 
   return (
     <nav css={styles.nav}>
-      <Flex alignItems="center">
+      <Flex css={styles.titleContainer} alignItems="center">
         {!isIssuesPage ? <BackButton /> : null}
-        <h2>{navbarState.title}</h2>
+        <h2 title={navbarState.title} css={styles.title}>{navbarState.title}</h2>
       </Flex>
-      <Flex gap="1rem">
+      <Flex css={css`flex-shrink: 0;`} gap="1rem">
         <NavLink
           css={[navLinkStyles, css`margin-right: 1rem`]}
           to="/issues"

render/components/SummaryPage/IssuesTable.tsx

@@ -6,9 +6,9 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'styled-components';
 
 import { get } from 'lodash';
+import ReactTimeAgo from 'react-time-ago';
 import { theme as Theme } from '../../theme';
 import { ProcessIndicator, OverlayProcessIndicator } from '../ProcessIndicator';
-import { DateComponent } from '../Date';
 import { useOvermindActions, useOvermindState } from '../../store';
 import { IssueFilter } from '../../actions/helper';
 import { usePaginatedFetch } from '../../hooks/usePaginatedFetch';
@@ -172,7 +172,7 @@ const IssuesTable = ({ search }: { search?: string }) => {
                   key={header.value}
                 >
                   {date ? (
-                    <DateComponent date={date} />
+                    <ReactTimeAgo date={date} />
                   ) : (
                     <span>{forcedValue || get(task, header.value)}</span>
                   )}