Make full app area a link

src/components/app.tsx

@@ -3,10 +3,16 @@ import Icon from "./icon";
 import styled from "styled-components";
 import selectedTheme from "../lib/theme";
 
-const AppContainer = styled.div`
+const AppContainer = styled.a`
   display: flex;
-  flex: auto 25%;
+  flex: 1 0 auto;
   padding: 1rem;
+  color: ${selectedTheme.mainColor};
+  font-weight: 500;
+  text-transform: uppercase;
+  margin: 0;
+  text-decoration: none;
+  font-size: 1rem;
 `;
 
 const IconContainer = styled.div`
@@ -21,16 +27,8 @@ const DetailsContainer = styled.div`
   flex-direction: column;
 `;
 
-const AppLink = styled.a`
+const AppName = styled.div`
-  flex: 1 0 auto;
+  a:hover & {
-  color: ${selectedTheme.mainColor};
-  font-weight: 500;
-  text-transform: uppercase;
-  margin: 0;
-  text-decoration: none;
-  font-size: 1rem;
-
-  &:hover {
     text-decoration: underline;
   }
 `;
@@ -59,18 +57,18 @@ export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
 
   useEffect(() => { console.log(newTab) }, [newTab])
 
+  const linkAttrs = (newTab !== undefined && newTab) ? {
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  } : {};
+
   return (
-    <AppContainer>
+    <AppContainer href={url} {...linkAttrs}>
       <IconContainer>
         <Icon name={icon} />
       </IconContainer>
       <DetailsContainer>
-
+        <AppName>{name}</AppName>
-        {
-          (newTab !== undefined && newTab) ?
-            <AppLink href={url} target="_blank" rel="noopener noreferrer">{name}</AppLink> : <AppLink href={url}>{name}</AppLink>
-        }
-
         <AppDescription>{displayURL}</AppDescription>
       </DetailsContainer>
     </AppContainer>