From 9f097ec7df542c65f3ed5febdfbe79768b0a1aa4 Mon Sep 17 00:00:00 2001
From: Diana Belokon <67607236+dbelokon@users.noreply.github.com>
Date: Wed, 23 Mar 2022 03:23:38 -0400
Subject: [PATCH] Adjust UI to fit style

---
 .../src/components/GenericInfoProvider.tsx    |  1 -
 .../Posts/YouTubeInfo/YouTubeInfoMobile.tsx   | 31 ++++---------------
 .../components/Posts/YouTubeInfo/index.tsx    | 31 ++++---------------
 src/web/src/components/YouTubeInfo.tsx        |  3 --
 4 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/src/web/src/components/GenericInfoProvider.tsx b/src/web/src/components/GenericInfoProvider.tsx
index 27f875d42b..ee9a924670 100644
--- a/src/web/src/components/GenericInfoProvider.tsx
+++ b/src/web/src/components/GenericInfoProvider.tsx
@@ -20,7 +20,6 @@ const GenericInfoContext = createContext<GenericInfoContextInterface>({
     channelUrl: '',
     subscriberCount: -1,
     viewCount: -1,
-    shareUrl: '',
   },
 });
 
diff --git a/src/web/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx b/src/web/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx
index a4386876e1..368c047402 100644
--- a/src/web/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx
+++ b/src/web/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx
@@ -1,5 +1,4 @@
 import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
-import { BsShareFill } from 'react-icons/bs';
 import { AiOutlineYoutube } from 'react-icons/ai';
 import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
 
@@ -13,10 +12,11 @@ const useStyles = makeStyles((theme: Theme) =>
         width: '21rem',
       },
       color: theme.palette.text.secondary,
+      lineHeight: 'normal',
     },
     link: {
       textDecoration: 'none',
-      color: theme.palette.text.primary,
+      color: 'inherit',
       '&:hover': {
         textDecorationLine: 'none',
       },
@@ -28,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     YouTubeInfoContainer: {
       margin: '0 0 0 1rem',
+      fontSize: '1.2rem',
     },
     YouTubeTitleSection: {
       fontSize: '1.4rem',
@@ -35,26 +36,13 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingTop: '1rem',
       lineHeight: 'normal',
     },
-    YouTubeShareButton: {
-      font: 'inherit',
-      fontSize: '1.4rem',
-      maxWidth: '100%',
-      height: '3.5rem',
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: '1rem',
-    },
   })
 );
 
 const YouTubeInfoMobile = () => {
   const classes = useStyles();
 
-  const { channelUrl, subscriberCount, viewCount, shareUrl } = useYouTubeInfo();
-
-  const copyLinkToClipboard = () => {
-    navigator.clipboard.writeText(shareUrl);
-  };
+  const { channelUrl, subscriberCount, viewCount } = useYouTubeInfo();
 
   return (
     <ListSubheader component="div" className={classes.root}>
@@ -66,15 +54,8 @@ const YouTubeInfoMobile = () => {
                 <AiOutlineYoutube className={classes.icon} /> Channel
               </a>
             </h2>
-            <h2 className={classes.YouTubeTitleSection}>{subscriberCount} subscribers</h2>
-            <h2 className={classes.YouTubeTitleSection}>{viewCount} views</h2>
-            <button
-              type="button"
-              onClick={copyLinkToClipboard}
-              className={classes.YouTubeShareButton}
-            >
-              <BsShareFill className={classes.icon} /> Share
-            </button>
+            <p>{subscriberCount} subscribers</p>
+            <p>{viewCount} views</p>
           </>
         )}
       </div>
diff --git a/src/web/src/components/Posts/YouTubeInfo/index.tsx b/src/web/src/components/Posts/YouTubeInfo/index.tsx
index b60af73478..7466fc4592 100644
--- a/src/web/src/components/Posts/YouTubeInfo/index.tsx
+++ b/src/web/src/components/Posts/YouTubeInfo/index.tsx
@@ -1,5 +1,4 @@
 import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
-import { BsShareFill } from 'react-icons/bs';
 import { AiOutlineYoutube } from 'react-icons/ai';
 import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
 
@@ -14,10 +13,11 @@ const useStyles = makeStyles((theme: Theme) =>
         width: '21rem',
       },
       color: theme.palette.text.secondary,
+      lineHeight: 'normal',
     },
     link: {
       textDecoration: 'none',
-      color: theme.palette.text.primary,
+      color: 'inherit',
       '&:hover': {
         textDecorationLine: 'none',
       },
@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     YouTubeInfoContainer: {
       margin: '2rem 0 0 1rem',
+      fontSize: '1.2rem',
     },
     YouTubeTitleSection: {
       fontSize: '1.4rem',
@@ -36,26 +37,13 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingTop: '1rem',
       lineHeight: 'normal',
     },
-    YouTubeShareButton: {
-      font: 'inherit',
-      fontSize: '1.4rem',
-      maxWidth: '100%',
-      height: '3.5rem',
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: '1rem',
-    },
   })
 );
 
 const YouTubeInfo = () => {
   const classes = useStyles();
 
-  const { channelUrl, subscriberCount, viewCount, shareUrl } = useYouTubeInfo();
-
-  const copyLinkToClipboard = () => {
-    navigator.clipboard.writeText(shareUrl);
-  };
+  const { channelUrl, subscriberCount, viewCount } = useYouTubeInfo();
 
   return (
     <ListSubheader component="div" className={classes.root}>
@@ -67,15 +55,8 @@ const YouTubeInfo = () => {
                 <AiOutlineYoutube className={classes.icon} /> Channel
               </a>
             </h2>
-            <h2 className={classes.YouTubeTitleSection}>{subscriberCount} subscribers</h2>
-            <h2 className={classes.YouTubeTitleSection}>{viewCount} views</h2>
-            <button
-              type="button"
-              onClick={copyLinkToClipboard}
-              className={classes.YouTubeShareButton}
-            >
-              <BsShareFill className={classes.icon} /> Share
-            </button>
+            <p>{subscriberCount} subscribers</p>
+            <p>{viewCount} views</p>
           </>
         )}
       </div>
diff --git a/src/web/src/components/YouTubeInfo.tsx b/src/web/src/components/YouTubeInfo.tsx
index 135d1dd84c..7e15ca6ea5 100644
--- a/src/web/src/components/YouTubeInfo.tsx
+++ b/src/web/src/components/YouTubeInfo.tsx
@@ -4,7 +4,6 @@ export interface YouTubeInfoContextInterface {
   channelUrl: string;
   subscriberCount: number;
   viewCount: number;
-  shareUrl: string;
 }
 
 export const extractYouTubeInfo = (post: Post): YouTubeInfoContextInterface => {
@@ -12,7 +11,6 @@ export const extractYouTubeInfo = (post: Post): YouTubeInfoContextInterface => {
     channelUrl: '',
     subscriberCount: -1,
     viewCount: -1,
-    shareUrl: '',
   };
 
   if (post.type !== 'video') {
@@ -20,7 +18,6 @@ export const extractYouTubeInfo = (post: Post): YouTubeInfoContextInterface => {
   }
 
   youTubeInfo.channelUrl = post.feed.link;
-  youTubeInfo.shareUrl = post.url;
 
   return youTubeInfo;
 };