From 9f5b3d072a48bf65e9c1a0bdbff325e8a4435af7 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Thu, 13 Jan 2022 18:20:51 -0800 Subject: [PATCH] making background custom based on layout --- components/Layouts/BackgroundLayout.js | 8 ++++++++ components/Layouts/SiteLayout.js | 2 +- pages/index.js | 2 +- pages/teams/demo.tsx | 6 ++++-- services/authService.js | 5 +++++ styles/globals.css | 5 ++++- 6 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 components/Layouts/BackgroundLayout.js diff --git a/components/Layouts/BackgroundLayout.js b/components/Layouts/BackgroundLayout.js new file mode 100644 index 0000000..7d4431e --- /dev/null +++ b/components/Layouts/BackgroundLayout.js @@ -0,0 +1,8 @@ + +export default function BackgroundLayout({ children }) { + return ( +
+ {children} +
+ ) +} diff --git a/components/Layouts/SiteLayout.js b/components/Layouts/SiteLayout.js index 30e923b..9894ed3 100644 --- a/components/Layouts/SiteLayout.js +++ b/components/Layouts/SiteLayout.js @@ -1,7 +1,7 @@ import Head from "next/head" -export default function Layout({ children }) { +export default function SiteLayout({ children }) { return ( <> diff --git a/pages/index.js b/pages/index.js index c9a10ef..7de34d9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,7 @@ import Image from 'next/image'; export default function Home() { return ( -
+

nirvana

diff --git a/pages/teams/demo.tsx b/pages/teams/demo.tsx index 5d69113..56e6429 100644 --- a/pages/teams/demo.tsx +++ b/pages/teams/demo.tsx @@ -28,6 +28,8 @@ import { BsThreeDots } from "react-icons/bs"; import { UserStatus, User } from '../../models/user' import { KeyCode } from '../../globals/keycode' +import BackgroundLayout from '../../components/Layouts/BackgroundLayout' + let testFriends = [ { name: "Liam", @@ -163,7 +165,7 @@ export default class Demo extends React.Component<{ }, MyState> { render() { return ( - <> +
{/* header content */}
@@ -846,7 +848,7 @@ export default class Demo extends React.Component<{ }, MyState> {
- + ) } diff --git a/services/authService.js b/services/authService.js index fc43dc6..b6d8a8e 100644 --- a/services/authService.js +++ b/services/authService.js @@ -1,3 +1,8 @@ +/** + * + * wrapper for authentication for the future for each individual component + */ + export function requireAuthentication(gssp) { return async (context) => { const { req, res } = context; diff --git a/styles/globals.css b/styles/globals.css index c38236f..139ab11 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -16,12 +16,15 @@ a { } /* my personal css */ +body { + @apply bg-slate-100 !important; +} main { font-family: "Poppins", sans-serif; } -bg { +#bg { background: url("/wallpapers/dark-mountains.jpg") no-repeat center center fixed; -webkit-background-size: cover;