New tab recents on extension

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>

crabfit-frontend/src/pages/Create/Create.tsx

@@ -170,7 +170,7 @@ const Create = ({ offline }) => {
         </StyledMain>
       ) : (
         <>
-          <Recents />
+          <Recents target="_blank" />
 
           <StyledMain>
             {offline ? (

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 {