From d60c6ca3b54fca645bfc71929e99efb36702c84a Mon Sep 17 00:00:00 2001 From: Neshura Date: Thu, 15 Dec 2022 23:20:26 +0100 Subject: [PATCH] Repalced CSS Themes with styled-components on index, about and games --- components/styles/content.tsx | 98 +++++++++++++++++++++++ components/themes.tsx | 14 +++- pages/about.tsx | 13 +-- pages/games.tsx | 39 +++++---- pages/index.tsx | 49 +++++++----- styled.d.ts | 3 + styles/Home.module.css | 147 ---------------------------------- 7 files changed, 166 insertions(+), 197 deletions(-) create mode 100644 components/styles/content.tsx diff --git a/components/styles/content.tsx b/components/styles/content.tsx new file mode 100644 index 0000000..14e7493 --- /dev/null +++ b/components/styles/content.tsx @@ -0,0 +1,98 @@ +import Link from 'next/link' +import styled, { DefaultTheme } from 'styled-components' +import { CustomLink } from '../../interfaces/LinkTypes'; + +// needed for Online Status checks +// TODO: migrate to shared Status type for Games and Services +interface OnlinePropType { + status: string; +} + +// replaces .title +export const PageTitle = styled.h1` + margin: 0; + line-height: 1.15; + font-size: 4rem; + text-align: center; +` + +// replaces .description +export const PageDescription = styled.p` + margin: 4rem 0; + line-height: 1.5; + font-size: 1.5rem; + text-align: center; +` + +// replaces .grid +export const PageContentBox = styled.div` + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 80%; +` + +// replaces .card & .contentcard +export const PageCard = styled.div` + margin: 1rem; + padding: 1rem; + text-align: center; + color: ${({ theme }) => theme.colors.primary}; + text-decoration: none; + border: 1px solid; + border-radius: 10px; + border-color: ${({ theme }) => theme.colors.primary}; + transition: color 0.15s ease, border-color 0.15s ease; + max-width: 300px; + + h2 { + margin: 0 0 1rem 0; + font-size: 1.5rem; + } + + p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; + } + + &:focus,:active,:hover { + color: ${({ theme }) => theme.colors.secondary}; + border-color: ${({ theme }) => theme.colors.secondary}; + } +` + +const OnlineStatus = styled.p` + color: ${props => { + let ret; + switch (props.status) { + case "Online": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online; + break; + case "Loading": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading; + break; + case "Offline": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; + break; + default: + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; + } + return ret; + }}; +` + +// Card Content Component for Games Page +export const PageCardContentGame = ({ content }: { content: CustomLink }) => { + return ( + <> +

{content.name}

+

{content.desc}

+

{content.ip}

+ {content.status} + + ) +} + +// Card Content Component for Services Page \ No newline at end of file diff --git a/components/themes.tsx b/components/themes.tsx index 77ee5ac..a9cf0ab 100644 --- a/components/themes.tsx +++ b/components/themes.tsx @@ -30,6 +30,9 @@ export const lightTheme: DefaultTheme = { background: '#ffffff', primary: '#00aaff', secondary:'#ffaa00', + online: '#00ff00', + loading: '#ff5300', + offline: '#ff0000', }, } @@ -40,7 +43,10 @@ export const darkTheme: DefaultTheme = { background: '#1f1f1f', primary: '#00aaff', secondary:'#ffaa00', - }, + online: '#00ff00', + loading: '#ff5300', + offline: '#ff0000', + }, } export const amoledTheme: DefaultTheme = { @@ -50,6 +56,9 @@ export const amoledTheme: DefaultTheme = { background: '#000000', primary: '#00aaff', secondary:'#ffaa00', + online: '#00ff00', + loading: '#ff5300', + offline: '#ff0000', }, } @@ -60,5 +69,8 @@ export const amoled2Theme: DefaultTheme = { background: '#000000', primary: '#00ffaa', secondary:'#aa00ff', + online: '#00ff00', + loading: '#ff5300', + offline: '#ff0000', }, } \ No newline at end of file diff --git a/pages/about.tsx b/pages/about.tsx index 31e710f..4874605 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -1,20 +1,21 @@ import Head from 'next/head' -import styles from '/styles/Home.module.css' +import { PageDescription, PageTitle } from '../components/styles/content' export default function About() { return ( <> - Neshura Servers + Neshweb - About -

+ + About -

-

+ + This website is primarily for managing my game servers in one spot -

+ ) } diff --git a/pages/games.tsx b/pages/games.tsx index 8bc6145..a22941b 100644 --- a/pages/games.tsx +++ b/pages/games.tsx @@ -1,53 +1,50 @@ import Head from 'next/head' -import Link from 'next/link' import styles from '/styles/Home.module.css' import fsPromises from 'fs/promises' import path from 'path' import type { CustomLink, EntryList } from '../interfaces/LinkTypes' +import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content' +import Link from 'next/link' function Servers(props: EntryList) { const serverList = props.games return ( <> - Neshura Servers + Neshweb - Games -

+ Server List -

+ -

+ Lists all available Services, probably up-to-date -

-
+ + + {Object.values(serverList).map((item: CustomLink) => { if (item.href != null) { return ( - -

{item.name}

-

{item.desc}

-

{item.ip}

-

{item.status}

- + + + + + ) } else { return ( - -

{item.name}

-

{item.desc}

-

{item.ip}

-

{item.status}

- + + + ) } } - )} -
+ ) } diff --git a/pages/index.tsx b/pages/index.tsx index 6941081..0071a3a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,39 +1,44 @@ import Head from 'next/head' -import Link from 'next/link' -import styles from '/styles/Home.module.css' +import Link from 'next/link'; +import { PageTitle, PageDescription, PageContentBox, PageCard } from '../components/styles/content'; export default function Home() { return ( <> - Neshweb - Home + Neshweb - Home -

+ Welcome to my Servers Webpage -

+ -

+ Feel free to look around -

-
- -

About →

-

Useless Info, don't bother

- + + + + +

About →

+

Useless Info, don't bother

+ + - -

Games →

-

List of all available Servers

- + + +

Games →

+

List of all available Servers

+ + - -

Services →

-

List of available Services

- - -
+ + +

Services →

+

List of available Services

+ + + ) } \ No newline at end of file diff --git a/styled.d.ts b/styled.d.ts index b1622af..c71f269 100644 --- a/styled.d.ts +++ b/styled.d.ts @@ -8,6 +8,9 @@ declare module 'styled-components' { background: string, primary: string, secondary: string, + online: string, + loading: string, + offline: string, } } } \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css index 1fed657..6a80c0c 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -2,72 +2,6 @@ padding: 0 2rem; } -.main { - color: var(--def-blue); - min-height: 100vh; - padding: 1rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; -} - -.navbar { - display: flex; - flex: 1; - padding: 2rem 0; - border-bottom: 1px solid var(--def-blue); - flex-wrap: nowrap; - justify-content: center; - align-items: center; - -} - -.navelem { - width: auto; - color: var(--def-blue); - margin: 0.2rem; - border: 1px solid; - display: flex; - justify-content: center; - align-items: center; - flex-grow: 0.05; -} - -.navelem:hover { - color: var(--def-orange); - background-color: var(--black-1e); -} - -.navelem_active { - width: auto; - color: var(--def-orange); - margin: 0.2rem; - border: 1px solid; - display: flex; - justify-content: center; - align-items: center; - flex-grow: 0.05; -} - -.footer { - color: var(--def-blue); - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid var(--def-blue); - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - .title a { color: var(--def-orange); text-decoration: none; @@ -79,23 +13,6 @@ text-decoration: underline; } -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - .code { background: var(--black-1e); border-radius: 5px; @@ -105,39 +22,6 @@ Bitstream Vera Sans Mono, Courier New, monospace; } -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 80%; -} - -.statusOffline { - color: var(--def-red); -} - -.statusOnline { - color: var(--def-green); -} - -.statusLoading { - color: var(--def-orange); -} - -.contentcard { - margin: 1rem; - padding: 1rem; - text-align: center; - color: inherit; - text-decoration: none; - border: 1px solid var(--black-2d); - border-radius: 10px; - border-color: var(--def-blue); - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - .contentcardstatic { margin: 1rem; padding: 1rem; @@ -177,37 +61,6 @@ height: 1.5rem; } -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid var(--black-2d); - border-radius: 10px; - border-color: var(--def-blue); - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: var(--def-orange); - border-color: var(--def-orange); -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - .cardwarn { color: var(--def-orange); }