+
+`;
+
+exports[`Testing
+
+
+ No videos to display, Try Reloading.
+
+
+
+`;
diff --git a/src/components/CardGrid/index.js b/src/components/CardGrid/index.js
new file mode 100644
index 000000000..7ed610503
--- /dev/null
+++ b/src/components/CardGrid/index.js
@@ -0,0 +1 @@
+export { default } from './CardGrid.component';
\ No newline at end of file
diff --git a/src/components/CardGrid/style.js b/src/components/CardGrid/style.js
new file mode 100644
index 000000000..fd943e7f2
--- /dev/null
+++ b/src/components/CardGrid/style.js
@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export const CardGrid = styled.div`
+ padding: 20px;
+ margin: 0px auto;
+ justify-content: flex-start;
+ display: flex;
+ flex-flow: row wrap;
+ box-sizing: border-box;
+ width: 1500px;
+ @media screen and (max-width: 1500px) {
+ width:1135px;
+ }
+ @media screen and (max-width: 1200px) {
+ width:770px;
+ }
+ @media screen and (max-width: 800px) {
+ width:100%;
+ -moz-box-pack: center;
+ justify-content: center;
+ }
+`;
+
+export const ErrorMessage = styled.div`
+ text-align: center;
+ font-size: 24px;
+ color: #965108;
+ width: 100%;
+`;
\ No newline at end of file
diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
deleted file mode 100644
index fdd00219c..000000000
--- a/src/components/Fortune/Fortune.component.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { useFortune } from '../../utils/hooks/useFortune';
-import './Fortune.styles.css';
-
-function Fortune() {
- const { fortune } = useFortune();
-
- return {fortune} ;
-}
-
-export default Fortune;
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
deleted file mode 100644
index 360014874..000000000
--- a/src/components/Fortune/Fortune.styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.fortune {
- position: fixed;
- bottom: 0;
- right: 0;
-}
diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js
deleted file mode 100644
index 3e887bf31..000000000
--- a/src/components/Fortune/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Fortune.component';
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
index b82ea3517..ebfe3b099 100644
--- a/src/components/Layout/Layout.component.jsx
+++ b/src/components/Layout/Layout.component.jsx
@@ -1,9 +1,9 @@
import React from 'react';
-import './Layout.styles.css';
+import {StyledLayout} from './style';
function Layout({ children }) {
- return
+
+
+ No videos to display, Try Reloading.
+
+
+
+
+`;
diff --git a/src/components/Layout/style.js b/src/components/Layout/style.js
new file mode 100644
index 000000000..c195ca322
--- /dev/null
+++ b/src/components/Layout/style.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const StyledLayout = styled.main`
+ width: 100vw;
+ height: 100vh;
+`;
\ No newline at end of file
diff --git a/src/components/LeftNav/LeftNav.component.jsx b/src/components/LeftNav/LeftNav.component.jsx
new file mode 100644
index 000000000..f7b444a5f
--- /dev/null
+++ b/src/components/LeftNav/LeftNav.component.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import BurgerMenuComponent from '../BurgerMenu';
+import SearchBarComponent from '../SearchBar';
+
+import {LeftNav} from './style';
+
+const LeftNavComponent = ({className, props}) => {
+ return (
+
+
+`;
diff --git a/src/components/LeftNav/index.js b/src/components/LeftNav/index.js
new file mode 100644
index 000000000..2b85e2c60
--- /dev/null
+++ b/src/components/LeftNav/index.js
@@ -0,0 +1 @@
+export { default } from './LeftNav.component';
\ No newline at end of file
diff --git a/src/components/LeftNav/style.js b/src/components/LeftNav/style.js
new file mode 100644
index 000000000..558040108
--- /dev/null
+++ b/src/components/LeftNav/style.js
@@ -0,0 +1,9 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const LeftNav = styled.div`
+ margin-top: 10px;
+ color: ${colors.backgroundWhite};
+ display:flex;
+ flex: 1 1 0px;
+`;
\ No newline at end of file
diff --git a/src/components/Link/Link.react.js b/src/components/Link/Link.react.js
new file mode 100644
index 000000000..06aa2bdb8
--- /dev/null
+++ b/src/components/Link/Link.react.js
@@ -0,0 +1,32 @@
+// Link.react.js
+import React, {useState} from 'react';
+
+const STATUS = {
+ HOVERED: 'hovered',
+ NORMAL: 'normal',
+};
+
+const Link = ({page, children}) => {
+ const [status, setStatus] = useState(STATUS.NORMAL);
+
+ const onMouseEnter = () => {
+ setStatus(STATUS.HOVERED);
+ };
+
+ const onMouseLeave = () => {
+ setStatus(STATUS.NORMAL);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Link;
\ No newline at end of file
diff --git a/src/components/Link/Link.react.test.js b/src/components/Link/Link.react.test.js
new file mode 100644
index 000000000..60503b240
--- /dev/null
+++ b/src/components/Link/Link.react.test.js
@@ -0,0 +1,36 @@
+
+import React from 'react';
+import renderer, {act} from 'react-test-renderer';
+import Link from './Link.react';
+
+test('Link changes the class when hovered', () => {
+ const component = renderer.create(
+ Facebook,
+ );
+ let tree = component.toJSON();
+
+ act(() => {
+ expect(tree).toMatchSnapshot();
+ })
+
+ act(() => {
+ // manually trigger the callback
+ tree.props.onMouseEnter();
+ })
+
+ // re-rendering
+ tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+
+ act(() => {
+ // manually trigger the callback
+ tree.props.onMouseLeave();
+ })
+
+ // re-rendering
+ tree = component.toJSON();
+ act(() => {
+ expect(tree).toMatchSnapshot();
+ })
+
+});
\ No newline at end of file
diff --git a/src/components/Link/__snapshots__/Link.react.test.js.snap b/src/components/Link/__snapshots__/Link.react.test.js.snap
new file mode 100644
index 000000000..6e28bd326
--- /dev/null
+++ b/src/components/Link/__snapshots__/Link.react.test.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link changes the class when hovered 1`] = `
+
+ Facebook
+
+`;
+
+exports[`Link changes the class when hovered 2`] = `
+
+ Facebook
+
+`;
+
+exports[`Link changes the class when hovered 3`] = `
+
+ Facebook
+
+`;
diff --git a/src/components/Navbar/Navbar.component.jsx b/src/components/Navbar/Navbar.component.jsx
new file mode 100644
index 000000000..09283ac72
--- /dev/null
+++ b/src/components/Navbar/Navbar.component.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import LeftNavComponent from '../LeftNav';
+import RightNavComponent from '../RightNav';
+
+import {NavBar} from './style';
+
+const NavbarComponent = ({className, props}) => {
+
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
new file mode 100644
index 000000000..a321f8259
--- /dev/null
+++ b/src/components/Navbar/index.js
@@ -0,0 +1 @@
+export { default } from './Navbar.component.jsx';
\ No newline at end of file
diff --git a/src/components/Navbar/style.js b/src/components/Navbar/style.js
new file mode 100644
index 000000000..dbd782582
--- /dev/null
+++ b/src/components/Navbar/style.js
@@ -0,0 +1,17 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const NavBar = styled.div`
+ margin: 0;
+ text-align: left;
+ color: ${colors.black};
+ display:inline-flex;
+ display: -webkit-flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ position: relative;
+ padding: 10px 24px 0 24px;
+ background: ${colors.navBarBlue};
+ min-height: 64px;
+ box-shadow: 2px 2px 2px rgba(0,0,0,0.6);
+`;
\ No newline at end of file
diff --git a/src/components/RightNav/RightNav.component.js b/src/components/RightNav/RightNav.component.js
new file mode 100644
index 000000000..00a7ed54b
--- /dev/null
+++ b/src/components/RightNav/RightNav.component.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import ToggleComponent from '../Toggle';
+import UserInfoComponent from '../UserInfo';
+
+import {RightNav} from './style';
+
+const RightNavComponent = (props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dark Mode
+
+
+
+
+
+
+
+`;
diff --git a/src/components/RightNav/index.js b/src/components/RightNav/index.js
new file mode 100644
index 000000000..284bf4ce6
--- /dev/null
+++ b/src/components/RightNav/index.js
@@ -0,0 +1 @@
+export { default } from './RightNav.component';
\ No newline at end of file
diff --git a/src/components/RightNav/style.js b/src/components/RightNav/style.js
new file mode 100644
index 000000000..dc22d38e1
--- /dev/null
+++ b/src/components/RightNav/style.js
@@ -0,0 +1,12 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const RightNav = styled.div`
+ margin: 0;
+ color: ${colors.backgroundWhite};
+ display:flex;
+ float: right;
+ @media (max-width: 600px) {
+ display: none;
+ }
+`;
\ No newline at end of file
diff --git a/src/components/SearchBar/SearchBar.component.js b/src/components/SearchBar/SearchBar.component.js
new file mode 100644
index 000000000..de86401f3
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.component.js
@@ -0,0 +1,22 @@
+import React, {useState} from 'react';
+import { FaSearch } from 'react-icons/fa';
+
+import {SearchBarContainer, IconContainer, InputText, SearchBar} from './style';
+
+const SearchBarComponent = () => {
+
+ const [text, setText] = useState("Wizeline");
+
+ return(
+
+
+
+
+
+ Dark Mode
+
+
+
+
+
+
+
+`;
diff --git a/src/components/SearchBar/index.js b/src/components/SearchBar/index.js
new file mode 100644
index 000000000..a1ddd5e7c
--- /dev/null
+++ b/src/components/SearchBar/index.js
@@ -0,0 +1 @@
+export {default} from './SearchBar.component';
\ No newline at end of file
diff --git a/src/components/SearchBar/style.js b/src/components/SearchBar/style.js
new file mode 100644
index 000000000..2cb5a3e9f
--- /dev/null
+++ b/src/components/SearchBar/style.js
@@ -0,0 +1,36 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const SearchBar = styled.div`
+ margin: 0;
+ display: flex;
+ max-height: 100%;
+ height: 35px;
+`;
+
+export const SearchBarContainer = styled.div`
+ font-size: 0.9em;
+ border: white;
+ background: ${colors.dimWhite};
+ border-radius: 4px;
+ max-height:100%
+ width: 100%;
+ padding: 8px 10px;
+ @media (max-width: 600px) {
+ width:340px;
+ }
+;`
+
+export const IconContainer = styled.div`
+ margin-right: 8px;
+ display: inline;
+ position: relative;
+;`
+
+export const InputText = styled.input`
+ color: white;
+ font-weight: bold;
+ border: none;
+ maxHeight:100%;
+ background: none;
+;`
\ No newline at end of file
diff --git a/src/components/Toggle/Toggle.component.js b/src/components/Toggle/Toggle.component.js
new file mode 100644
index 000000000..54cc1fc51
--- /dev/null
+++ b/src/components/Toggle/Toggle.component.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { BsToggle2Off } from 'react-icons/bs';
+import {ToggleContainer, Switch, Mode} from './style';
+
+const ToggleComponent = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js
new file mode 100644
index 000000000..8f70069e2
--- /dev/null
+++ b/src/components/Toggle/index.js
@@ -0,0 +1 @@
+export { default } from './Toggle.component';
\ No newline at end of file
diff --git a/src/components/Toggle/style.js b/src/components/Toggle/style.js
new file mode 100644
index 000000000..193603d45
--- /dev/null
+++ b/src/components/Toggle/style.js
@@ -0,0 +1,18 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+
+export const ToggleContainer = styled.div`
+ margin-right: 1em;
+`;
+
+export const Switch = styled.label`
+ font-size: 1.8em;
+ margin-right: 0.8em;
+ position: relative;
+ top: 9px;
+;`
+
+export const Mode = styled.span`
+ color: ${colors.backgroundWhite};
+`;
\ No newline at end of file
diff --git a/src/components/UserInfo/UserInfo.component.js b/src/components/UserInfo/UserInfo.component.js
new file mode 100644
index 000000000..f37a1d576
--- /dev/null
+++ b/src/components/UserInfo/UserInfo.component.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { AiOutlineUser } from 'react-icons/ai';
+import {UserInfoContainer, UserInfoCircle} from './style';
+
+const ToggleComponent = () => {
+ return (
+
+
+
+ Dark Mode
+
+
+
+
+`;
diff --git a/src/components/UserInfo/index.js b/src/components/UserInfo/index.js
new file mode 100644
index 000000000..4b5134ad5
--- /dev/null
+++ b/src/components/UserInfo/index.js
@@ -0,0 +1 @@
+export { default } from './UserInfo.component';
\ No newline at end of file
diff --git a/src/components/UserInfo/style.js b/src/components/UserInfo/style.js
new file mode 100644
index 000000000..b15d55a9d
--- /dev/null
+++ b/src/components/UserInfo/style.js
@@ -0,0 +1,17 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const UserInfoContainer = styled.div`
+ padding: 10px;
+`;
+
+export const UserInfoCircle = styled.label`
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ background: ${colors.gray};
+ position: relative;
+ text-align: center;
+ font-size: 2em;
+ border-radius: 50%;
+;`
\ No newline at end of file
diff --git a/src/components/VideoCard/VideoCard.component.js b/src/components/VideoCard/VideoCard.component.js
new file mode 100644
index 000000000..b2c4b35bc
--- /dev/null
+++ b/src/components/VideoCard/VideoCard.component.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {VideoCardContainer, Thumbnail, Title, Paragraph, Content} from './style';
+
+const VideoCardComponent = (props) => {
+ return (
+
+
+
+
+
+`;
diff --git a/src/components/VideoCard/index.js b/src/components/VideoCard/index.js
new file mode 100644
index 000000000..bb85b6a9f
--- /dev/null
+++ b/src/components/VideoCard/index.js
@@ -0,0 +1 @@
+export { default } from './VideoCard.component';
\ No newline at end of file
diff --git a/src/components/VideoCard/style.js b/src/components/VideoCard/style.js
new file mode 100644
index 000000000..ddb6c474d
--- /dev/null
+++ b/src/components/VideoCard/style.js
@@ -0,0 +1,40 @@
+import {colors} from '../../globalStyle';
+import styled from 'styled-components';
+
+export const VideoCardContainer = styled.div`
+ width: 345px;
+ height: 345px;
+ border: solid 0.8px #ffff;
+ border-radius: 4px;
+ box-shadow: 0px 1px 1px black;
+ overflow: hidden;
+ margin: 9px;
+`;
+
+export const Thumbnail = styled.div`
+ display: block;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-image: url(${props => props.highImage});
+ height: 140px;
+ @media screen and (max-width: 1200px) {
+ background-image: url(${props => props.mediumImage});
+ }
+ @media screen and (max-width: 800px) {
+ background-image: url(${props => props.defaultImage});
+ }
+`;
+
+export const Content = styled.div`
+ padding: 15px
+`;
+
+export const Title = styled.h2`
+ font-size: 1em;
+`;
+
+export const Paragraph = styled.p`
+ font-size: 0.8em;
+ color: ${colors.dimText};
+`;
\ No newline at end of file
diff --git a/src/global.css b/src/global.css
index 4feb3c75e..89593245f 100644
--- a/src/global.css
+++ b/src/global.css
@@ -18,19 +18,6 @@ body {
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
- background-image: linear-gradient(
- 120deg,
- #eea2a2 0,
- #bbc1bf 19%,
- #57c6e1 42%,
- #b49fda 79%,
- #7ac5d8 100%
- );
- background-size: 400% 400%;
- background-position: var(--bg-position);
- transition: background-position 2s ease;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
}
.separator::before {
diff --git a/src/globalStyle.js b/src/globalStyle.js
new file mode 100644
index 000000000..893e074bc
--- /dev/null
+++ b/src/globalStyle.js
@@ -0,0 +1,16 @@
+export const colors = {
+ black: "rgba(0, 0, 0, 0.87)",
+ backgroundWhite: "#fff",
+ dimWhite: "rgba(255 ,255,255, 0.2)",
+ navBarBlue: "#1C5476",
+ gray: "#bdbdbd",
+ dimText: "#aaaaaa"
+};
+
+export const mainTitle = {
+ color: colors.black,
+ fontSize: "3.75rem",
+ fontWeight: "300",
+ lineHeight:" 1.2",
+ letterSpacing: "-0.00833em"
+}
\ No newline at end of file
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 08d1dd5c0..2347fa46f 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -1,37 +1,18 @@
import React, { useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
-import { useAuth } from '../../providers/Auth';
-import './Home.styles.css';
+import Navbar from '../../components/Navbar';
+import CardGrid from '../../components/CardGrid';
+import {Title} from './style';
function HomePage() {
- const history = useHistory();
const sectionRef = useRef(null);
- const { authenticated, logout } = useAuth();
-
- function deAuthenticate(event) {
- event.preventDefault();
- logout();
- history.push('/');
- }
return (
+
+
+
+
+ + Testing title +
++ Lorem ipsum... +
+Hello stranger!
- {authenticated ? ( - <> -Good to have you back
- - - ← logout - - - show me something cool → - - - ) : ( - let me in → - )} +Welcome back!
- -
- - welcome, voyager... - ← go back -- -