Update component: TelescopeAvatar (size propertie)

BannerButtons update <TelescopeAvatar> Update <TelescopeaAvatar>: Add blog option. Remove `padding-top`: Class: postsWrapper inside <Posts> Remove `padding-top` on mobile: Class: postsWrapper inside <Posts> Banner Button ScrollDown: Working
Seneca-CDOT · Apr 14, 2021 · 15f0a31 · 15f0a31
1 parent 896133f
commit 15f0a31
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/src/web/src/components/Banner.tsx b/src/web/src/components/Banner.tsx
@@ -12,6 +12,7 @@ import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { telescopeUrl } from '../config';
 import BannerDynamicItems from './BannerDynamicItems';
 import LandingButtons from './BannerButtons';
+import ScrollAction from './ScrollAction';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -194,9 +195,11 @@ export default function Banner({ onVisibilityChange }: BannerProps) {
         >
           v {gitInfo.version}
         </a>
-        <Fab color="primary" aria-label="scroll-down">
-          <KeyboardArrowDownIcon className={classes.arrowDownIcon} />
-        </Fab>
+        <ScrollAction>
+          <Fab color="primary" aria-label="scroll-down">
+            <KeyboardArrowDownIcon className={classes.arrowDownIcon} />
+          </Fab>
+        </ScrollAction>
       </div>
       <div className={classes.anchor} id="posts-anchor" ref={timelineAnchor} />
     </>

diff --git a/src/web/src/components/BannerButtons.tsx b/src/web/src/components/BannerButtons.tsx
@@ -58,7 +58,7 @@ const LandingButtons = () => {
           >
             Sign out
           </Button>
-          <TelescopeAvatar name={user.name} img={user.avatarUrl} size="45" />
+          <TelescopeAvatar name={user.name} img={user.avatarUrl} size="40px" />
         </>
       ) : (
         <>

diff --git a/src/web/src/components/Posts/index.tsx b/src/web/src/components/Posts/index.tsx
@@ -19,10 +19,6 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     postsWrapper: {
       width: '100%',
-      paddingTop: '5rem',
-      [theme.breakpoints.down('xs')]: {
-        paddingTop: '2rem',
-      },
     },
     error: {
       color: '#B5B5B5',

diff --git a/src/web/src/components/TelescopeAvatar.tsx b/src/web/src/components/TelescopeAvatar.tsx
@@ -2,8 +2,9 @@ import { Avatar } from '@material-ui/core';
 
 type TelescopeAvatarProps = {
   name: string;
-  img?: string;
   size: string;
+  img?: string;
+  blog?: string;
 };
 
 const getInitials = (name: string) => {
@@ -20,23 +21,30 @@ const getInitials = (name: string) => {
   return initials;
 };
 
-const TelescopeAvatar = ({ name, img, size }: TelescopeAvatarProps) => {
+const TelescopeAvatar = ({ name, img, size, blog }: TelescopeAvatarProps) => {
   const initials = getInitials(name);
 
   return (
-    <Avatar
-      alt={name}
-      src={img}
+    <a
+      href={blog}
       style={{
-        width: size,
-        height: size,
-        fontSize: `calc(${size}px * 0.43)`,
-        backgroundColor: '#A0D1FB',
-        color: '#000',
+        textDecoration: 'none',
       }}
     >
-      {initials}
-    </Avatar>
+      <Avatar
+        alt={name}
+        src={img}
+        style={{
+          width: size,
+          height: size,
+          fontSize: `calc(${size} * 0.43)`,
+          backgroundColor: '#A0D1FB',
+          color: '#000',
+        }}
+      >
+        {initials}
+      </Avatar>
+    </a>
   );
 };