Finished replacing components

Closes #17, #15

components/styles/content.tsx

@@ -1,6 +1,8 @@
-import Link from 'next/link'
-import styled, { DefaultTheme } from 'styled-components'
+import Link from 'next/link';
+import Image from 'next/image';
+import styled, { DefaultTheme } from 'styled-components';
 import { CustomLink } from '../../interfaces/LinkTypes';
+import { Service } from '../../interfaces/Services';
 
 // needed for Online Status checks
 // TODO: migrate to shared Status type for Games and Services
@@ -53,7 +55,7 @@ export const PageCard = styled.div`
 
   p {
     margin: 0;
-    font-size: 1.25rem;
+    font-size: 1.2rem;
     line-height: 1.5;
   }
 
@@ -63,6 +65,7 @@ export const PageCard = styled.div`
   }
 `
 
+// replaces the three status classes
 const OnlineStatus = styled.p<OnlinePropType>`
   color: ${props => {
     let ret;
@@ -83,11 +86,54 @@ const OnlineStatus = styled.p<OnlinePropType>`
   }};
 `
 
+// replaces .cardwarn
+const CardContentWarning = styled.p`
+  color: ${({ theme }) => theme.colors.secondary};
+`
+
+// replaces .contentIcon
+const CardContentTitleIcon = styled.div`
+  object-fit: "contain";
+  margin-right: 0.4rem;
+  position: relative;
+  aspect-ratio: 1;
+  height: 1.5rem;
+`
+
+// replaces .contentTitle
+const CardContentTitleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  h2 {
+    margin: 0;
+    white-space: nowrap;
+  }
+`
+
+const CardContentTitle = ({ content }: { content: Service | CustomLink }) => {
+  return (
+    <CardContentTitleWrap>
+      {
+        content.icon ? (
+          <CardContentTitleIcon>
+            <Image alt="icon" src={content.icon} fill></Image>
+          </CardContentTitleIcon>
+        ) : (<></>)
+      }
+      <h2>{content.name}</h2>
+    </CardContentTitleWrap>
+  )
+}
+
 // Card Content Component for Games Page
-export const PageCardContentGame = ({ content }: { content: CustomLink }) => {
+export const CardContentGame = ({ content }: { content: CustomLink }) => {
   return (
     <>
-      <h2>{content.name}</h2>
+      <CardContentTitle content={content} />
       <p>{content.desc}</p>
       <p>{content.ip}</p>
       <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
@@ -95,4 +141,14 @@ export const PageCardContentGame = ({ content }: { content: CustomLink }) => {
   )
 }
 
-// Card Content Component for Services Page
+// Card Content Component for Services Page
+export const CardContentService = ({ content }: { content: Service }) => {
+  return (
+    <>
+      <CardContentTitle content={content} />
+      <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
+      <p>{content.desc}</p>
+      <CardContentWarning>{content.warn}</CardContentWarning>
+    </>
+  )
+}

components/styles/generic.tsx

@@ -1,5 +1,11 @@
 import styled from 'styled-components'
 
+export const StyledBody = styled.body`
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+`
 
 export const Page = styled.div`
   width: 100%;

components/themes.tsx

@@ -1,11 +1,9 @@
 // Probably a good idea to spread this out into multiple files under a folder once it gets bigger
 import { createGlobalStyle, DefaultTheme } from 'styled-components'
 
-// TODO: unsure whether needed
-/* const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle`
   html,
   body {
-    color: ${({ theme }) => theme.colors.primary};
     padding: 0;
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@@ -21,8 +19,6 @@ import { createGlobalStyle, DefaultTheme } from 'styled-components'
   }
 `
 
-export default GlobalStyle; */
-
 export const lightTheme: DefaultTheme = {
   themeName: "Light Theme",
   themeId: 0,