diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx index 00ae2b8a..d3fd84a8 100644 --- a/src/Components/Article/RelatedPosts.jsx +++ b/src/Components/Article/RelatedPosts.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import {MdBookmarkBorder} from 'react-icons/md'; import {JustifyContent, AlignContent, Tag, BlogCard, GrayDiv} from '../../Layout/Container/styledArticle'; @@ -15,49 +15,58 @@ const RelatedPosts = (props) => { const {timeFormater, readTime} = props; const articles = props.articles; const user = props.user; - const recentPosts = articles.slice(0, 4) const history = useHistory() + const [idx, setIdx] = useState(4) + const [moreArticles, setMoreArticles] = useState(true) + const [recentPosts, setRecentPosts] = useState(articles.slice(0, idx)) const handleReadMore = async () => { - history.push('/blog') -} + setIdx(idx + 2) + if (articles.length > idx) { + setRecentPosts(articles.slice(0, (idx))) + } else { + setRecentPosts(articles) + setMoreArticles(!moreArticles) + } + } + return ( {recentPosts.map(article => { - return ( -
- - - - {user.name || "Will Smith"} -  ·  - {timeFormater} - - -
- -

{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}

- -

{article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."} -

-
- post - - - - Software - {readTime} min read - - - - - -
- ) - })} + return ( +
+ + + + {user.name || "Will Smith"} +  ·  + {timeFormater} + + +
+ +

{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}

+ +

{article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."} +

+
+ post + + + + Software + {readTime} min read + + + + + +
+ ) + })} - Read more from me + Read more ) diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx index 66ccf623..ddd2d0ed 100644 --- a/src/Components/Article/RightColumn.jsx +++ b/src/Components/Article/RightColumn.jsx @@ -22,6 +22,7 @@ const RightColumn = (props) => { // const uri = window.location.pathname; const state = useContext(GlobalState); const [currentUser, setCurrentUser] = useState(props.user); + const [user] = state.userAPI.user const [isLoggedIn] = state.userAPI.isLoggedIn; const [search, setSearch] = useState('') const [comments, setComments] = useState({comments: []}) @@ -63,7 +64,7 @@ const RightColumn = (props) => { <> { props.viewComment ? - +
@@ -158,7 +159,7 @@ const RightColumn = (props) => { } : - + {!isLoggedIn ? <> @@ -166,7 +167,7 @@ const RightColumn = (props) => { Sign In : -

Welcome, {currentUser.name.split(' ')[0]}

+

Welcome, {user.name.split(' ')[0]}

} diff --git a/src/Components/NavBar/NavBar.css b/src/Components/NavBar/NavBar.css index 5df2b572..44f569f8 100755 --- a/src/Components/NavBar/NavBar.css +++ b/src/Components/NavBar/NavBar.css @@ -98,4 +98,7 @@ .left-nav.open { height: auto; } + .nav-combo { + justify-content: start; + } } diff --git a/src/Components/Sticky/StickyFooter.jsx b/src/Components/Sticky/StickyFooter.jsx index ebe8b519..365317d9 100644 --- a/src/Components/Sticky/StickyFooter.jsx +++ b/src/Components/Sticky/StickyFooter.jsx @@ -40,11 +40,17 @@ const StickyFooter = ({id, likes, setViewComment, viewComment}) => { - - - - - + + + + + + + + + + {/* */} + {/* */}
diff --git a/src/Components/Subscribe/Newsletter.jsx b/src/Components/Subscribe/Newsletter.jsx index b93ce63e..f7bb62b2 100644 --- a/src/Components/Subscribe/Newsletter.jsx +++ b/src/Components/Subscribe/Newsletter.jsx @@ -8,7 +8,9 @@ import {JustifyContent, BlogNewsletter} from '../../Layout/Container/styledArtic const Newsletter = () => { return ( - +

Sign up for Software Engineering News

By Dominique Hosea @@ -16,7 +18,12 @@ const Newsletter = () => { Take a look. - + +   Get this newsletter By signing up, you will create a Medium account if you don’t already have one. diff --git a/src/Components/Unused/Testimonial/Testimonials.jsx b/src/Components/Unused/Testimonial/Testimonials.jsx index 8967b367..3937788c 100755 --- a/src/Components/Unused/Testimonial/Testimonials.jsx +++ b/src/Components/Unused/Testimonial/Testimonials.jsx @@ -27,7 +27,8 @@ import React, { useState, useCallback } from "react"; import { useTransition, animated } from "react-spring"; -import TwitterIcon from '@material-ui/icons/Twitter'; +// import TwitterIcon from '@material-ui/icons/Twitter'; +import { FaTwitter } from 'react-icons/fa' import './Testimonials.css' import Aaron from '../../icons/aaron.png' import Chengu from '../../icons/Chengu.png' @@ -151,7 +152,7 @@ const Testimonials = () => { }}>

Follow {step.fName} on Twitter

- +
diff --git a/src/Layout/Button/styledButton.jsx b/src/Layout/Button/styledButton.jsx index 3523637d..c9398c51 100644 --- a/src/Layout/Button/styledButton.jsx +++ b/src/Layout/Button/styledButton.jsx @@ -20,6 +20,11 @@ export const ReadMore = styled.button` color: white; border-radius: 20px; padding: 1.5% 3%; + ${props => props.disabled && css` + border: 1px solid #999999; + background-color: #cccccc; + color: #666666; + `} `; export const ArticleBtn = styled.button` diff --git a/src/Layout/Container/styledArticle.jsx b/src/Layout/Container/styledArticle.jsx index 52a0c213..fdbcb67c 100644 --- a/src/Layout/Container/styledArticle.jsx +++ b/src/Layout/Container/styledArticle.jsx @@ -137,7 +137,7 @@ export const BlogPost = styled.div` padding: 1%; `; -export const BlogNewsletter = styled.div` +export const BlogNewsletter = styled.form` background-color: whitesmoke; padding: 4%; margin-top: 8%; diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx index dac40e47..ed902b00 100755 --- a/src/Pages/Articles/Article/Article.jsx +++ b/src/Pages/Articles/Article/Article.jsx @@ -36,7 +36,7 @@ const ArticleItem = () => {
{ user.name !== "" && - + } diff --git a/src/Pages/Articles/ArticleCard.jsx b/src/Pages/Articles/ArticleCard.jsx index e8cc669a..92e962a6 100755 --- a/src/Pages/Articles/ArticleCard.jsx +++ b/src/Pages/Articles/ArticleCard.jsx @@ -2,7 +2,8 @@ import React, {useContext} from 'react'; import { Link } from 'react-router-dom'; import './Articles.css' import BtnRender from './BtnRender'; -import VisibilityIcon from '@material-ui/icons/Visibility'; +// import VisibilityIcon from '@material-ui/icons/Visibility'; +import { AiFillEye } from 'react-icons/ai' import moment from 'moment-timezone' import { GlobalState } from '../../GlobalState'; @@ -33,7 +34,7 @@ const ArticleItem = (props) => { >

{title}

-

1    {timeFormater}

+

1    {timeFormater}

{props.truncate(description)}


diff --git a/src/Pages/Home/Home.css b/src/Pages/Home/Home.css index 00fdfb7e..9eeefae8 100755 --- a/src/Pages/Home/Home.css +++ b/src/Pages/Home/Home.css @@ -221,4 +221,8 @@ margin: auto !important; width: 40% !important; } + + .contact-group h2 { + font-size: 3.5rem !important; + } } diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx index 2f261feb..0a340e5a 100755 --- a/src/Pages/Home/Home.jsx +++ b/src/Pages/Home/Home.jsx @@ -1,10 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import '../Home/Home.css'; import SocialMedia from '../../Components/SocialMedia/SocialMedia'; import PersonalBrand from '../../Components/PersonalBrand/PersonalBrandOriginal'; import Testimonial from '../../Components/Testimonials/testimonial'; import Tech from '../../Components/Technologies/Tech'; -import EmailIcon from '@material-ui/icons/Email'; +import { MdEmail } from 'react-icons/md' import ProjectHighlight from '../../Components/Project/projectHighlight'; import Hero from '../../Components/Hero/hero'; import {StyledHr} from '../../Layout/Hr/styledHr'; @@ -15,74 +15,74 @@ import Footer from '../../Components/Footer/Footer'; const Home = () => { const [isHome, setIsHome] = useState(true); - return ( - <> - -
- + return ( + <> + +
+ + + + + + +
+ +
+
- - - - -
- +

+ Testimonies +

+
+ +
+
+
+
+
-
- -

- Testimonies +
+ +
+

+
+ +
+

+ Send Me A Message

+ + + +

-
-
-
- -
-
- -
-
-
- -
-

- Send Me A Message -

- - - - -
- -
-
- - Back to the top - -
+
+ + Back to the top +
-
-
- - ) + +
+