From ff169a6de23233489fb4c686a0b233a10ee9a3e6 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Tue, 1 Jun 2021 15:32:36 +1000
Subject: [PATCH] New tab recents on extension

---
 crabfit-frontend/src/components/Recents/Recents.tsx | 4 ++--
 crabfit-frontend/src/pages/Create/Create.tsx        | 2 +-
 crabfit-frontend/src/pages/Home/homeStyle.ts        | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/crabfit-frontend/src/components/Recents/Recents.tsx b/crabfit-frontend/src/components/Recents/Recents.tsx
index 779a725..035ac99 100644
--- a/crabfit-frontend/src/components/Recents/Recents.tsx
+++ b/crabfit-frontend/src/components/Recents/Recents.tsx
@@ -8,7 +8,7 @@ import { Recent } from './recentsStyle';
 
 dayjs.extend(relativeTime);
 
-const Recents = () => {
+const Recents = ({ target }) => {
   const recents = useRecentsStore(state => state.recents);
   const locale = useLocaleUpdateStore(state => state.locale);
   const { t } = useTranslation(['home', 'common']);
@@ -18,7 +18,7 @@ const Recents = () => {
       <StyledMain>
         <h2>{t('home:recently_visited')}</h2>
         {recents.map(event => (
-          <Recent href={`/${event.id}`} key={event.id}>
+          <Recent href={`/${event.id}`} target={target} key={event.id}>
             <span className="name">{event.name}</span>
             <span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
           </Recent>
diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx
index fc8083e..e766316 100644
--- a/crabfit-frontend/src/pages/Create/Create.tsx
+++ b/crabfit-frontend/src/pages/Create/Create.tsx
@@ -170,7 +170,7 @@ const Create = ({ offline }) => {
         </StyledMain>
       ) : (
         <>
-          <Recents />
+          <Recents target="_blank" />
 
           <StyledMain>
             {offline ? (
diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts
index a214baa..2dd67a2 100644
--- a/crabfit-frontend/src/pages/Home/homeStyle.ts
+++ b/crabfit-frontend/src/pages/Home/homeStyle.ts
@@ -47,8 +47,9 @@ export const TitleLarge = styled.h1`
 
 export const Logo = styled.img`
 	width: 80px;
-  transition: transform .2s;
-  animation: jelly .5s 1 .1s;
+  transition: transform .15s;
+  animation: jelly .5s 1 .05s;
+  user-select: none;
 
   @keyframes jelly {
     from,to {