make recentl profile div clickable

Author: martincai8

src/components/Sidebar.jsx

@@ -190,7 +190,7 @@ const Sidebar = ({
     general: [
       { location: '/', text: 'Home' },
       { location: '/schedule', text: 'Schedule' },
-      { location: '/livestream', text: 'Livestream' },
+      // { location: '/livestream', text: 'Livestream' },
       { location: '/rewards', text: 'Rewards' },
       { location: '/sponsors', text: 'Sponsors' },
       { location: '/social', text: 'Portal Profiles' },

src/components/Social/ViewSocial.jsx

@@ -314,13 +314,16 @@ const DateText = styled.p`
 const StyledTrashIcon = styled(TrashIcon)`
   width: 25px;
   height: 25px;
+  position: relative;
+  z-index: 2;
 
   & path {
     fill: ${p => p.theme.colors.text};
   }
 `
 
 const Profile = styled.div`
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -337,6 +340,7 @@ const Profile = styled.div`
 
   &:hover ${Username} {
     color: ${p => p.theme.colors.button.primary.text};
+    text-decoration: underline;
   }
 
   &:hover ${DateText} {
@@ -354,6 +358,12 @@ const Profile = styled.div`
   }
 `
 
+const ProfileLink = styled.a`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`
+
 const Text = styled.p`
   font-size: 18px;
   font-weight: 500;
@@ -474,9 +484,8 @@ const ViewSocial = ({
               <RecentlyViewedContainer>
                 {recentlyViewedProfiles.map((profile, index) => (
                   <Profile key={index}>
-                    <Username href={`/app/${activeHackathon}/social/${profile.profileId}`}>
-                      {profile.name}
-                    </Username>
+                    <ProfileLink href={`/app/${activeHackathon}/social/${profile.profileId}`} />
+                    <Username>{profile.name}</Username>
                     <IconSection>
                       <DateText>
                         {new Date(profile.viewedAt.seconds * 1000).toLocaleDateString()}