Adjust UI to fit style

Seneca-CDOT · Mar 23, 2022 · 9f097ec · 9f097ec
1 parent 17c5f94
commit 9f097ec
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 54 deletions.
diff --git 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
@@ -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,33 +28,21 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     YouTubeInfoContainer: {
       margin: '0 0 0 1rem',
+      fontSize: '1.2rem',
     },
     YouTubeTitleSection: {
       fontSize: '1.4rem',
       margin: 0,
       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
@@ -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,33 +29,21 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     YouTubeInfoContainer: {
       margin: '2rem 0 0 1rem',
+      fontSize: '1.2rem',
     },
     YouTubeTitleSection: {
       fontSize: '1.4rem',
       margin: 0,
       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
@@ -4,23 +4,20 @@ export interface YouTubeInfoContextInterface {
   channelUrl: string;
   subscriberCount: number;
   viewCount: number;
-  shareUrl: string;
 }
 
 export const extractYouTubeInfo = (post: Post): YouTubeInfoContextInterface => {
   const youTubeInfo = {
     channelUrl: '',
     subscriberCount: -1,
     viewCount: -1,
-    shareUrl: '',
   };
 
   if (post.type !== 'video') {
     return youTubeInfo;
   }
 
   youTubeInfo.channelUrl = post.feed.link;
-  youTubeInfo.shareUrl = post.url;
 
   return youTubeInfo;
 };