feat(popup): Add "open more in toggl" button to the bottom of the ent…

…ries list

- Add reusable button component
- Add footer to TimeEntriesList to open toggl.com

src/scripts/@toggl/style/lib/text.js

@@ -10,6 +10,8 @@ export const font = {
 
 export const [light, normal, semibold, bold] = [300, 400, 500, 700];
 
+export const [regular] = ['14px'];
+
 export const withDot = css`
   color: ${color.greyish};
 

src/scripts/@toggl/ui/buttons/Button.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import * as color from '../../style/lib/color';
+import * as text from '../../style/lib/text';
+
+const Button = styled.button`
+  height: 36px;
+  padding: 0 20px;
+
+  color: ${color.black};
+  text-align: center;
+  font-size: ${text.regular};
+  font-weight: ${text.normal};
+
+  border: 1px solid ${color.extraLightGrey};
+  border-radius: 8px;
+  background-color: ${color.white};
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &.disabled {
+    cursor: default;
+  }
+`;
+
+export default Button;

src/scripts/@toggl/ui/buttons/index.ts

@@ -0,0 +1,3 @@
+export {
+  default as Button
+} from './Button';

src/scripts/components/TimeEntriesList.tsx

@@ -4,10 +4,14 @@ import { format, subSeconds } from 'date-fns';
 
 import BillableIcon from './BillableIcon';
 import TagsIcon from './TagsIcon';
-import { ProjectLargeDot } from '../@toggl/ui/icons/index';
+
+import { ProjectLargeDot } from '../@toggl/ui/icons';
+import { Button } from '../@toggl/ui/buttons';
+
 import * as color from '../@toggl/style/lib/color';
 import * as text from '../@toggl/style/lib/text';
 import { borderRadius } from '../@toggl/style/lib/variables';
+
 import { formatDuration } from './Timer';
 import play from '../icons/play.svg';
 
@@ -31,8 +35,8 @@ const getTimeEntryDayGroups = (timeEntries: Array<Array<TimeEntry>>): {[date: st
     }, {})
 };
 
-type TimeEntriesListProps = {
-  timeEntries: Array<Array<TimeEntry>>;
+interface TimeEntriesListProps {
+  timeEntries: TimeEntry[][];
   projects: IdMap<Project>;
 };
 export default function TimeEntriesList (props: TimeEntriesListProps) {
@@ -53,6 +57,13 @@ export default function TimeEntriesList (props: TimeEntriesListProps) {
           })
         ]
       })}
+      <Footer>
+        <a target="_blank" href="https://toggl.com/app/timer?utm_source=toggl-button&utm_medium=referral">
+          <Button>
+            See more on <strong>toggl.com</strong>
+          </Button>
+        </a>
+      </Footer>
     </EntryList>
   );
 }
@@ -236,3 +247,8 @@ const EntryIcons = styled.div`
     margin: 0 .25rem;
   }
 `;
+
+const Footer = styled(EntryHeading)`
+  justify-content: center;
+  padding: 30px 0;
+`;