Added "open" icon to cards, removed old code

components/styles/cards/mobile.tsx

@@ -2,7 +2,7 @@ import { Service } from '../../../interfaces/CardTypes';
 import styled, { css, DefaultTheme } from 'styled-components';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Dispatch, SetStateAction, useState } from 'react';
+import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg'
 
 // needed for Online Status checks
 interface OnlinePropType {
@@ -18,8 +18,8 @@ const Card = styled.div`
   width: 30rem;
   max-width: 90%;
   min-height: 10rem;
-  max-height: 15rem;
+  max-height: 12.5rem;
-  margin-bottom: 2rem;
+  margin: 1rem;
 
   // themeing
   border-top: 0.25rem solid;
@@ -60,18 +60,13 @@ const CardTitleIcon = styled.div`
 `;
 
 const OpenInNewTab = styled.div`
-  filter: invert();
+  color: ${({theme}) => theme.colors.primary };
   position: relative;
   object-fit: contain;
-  margin: 0.3rem;
+  padding: 0.2rem;
   margin-left: 0.5rem;
   aspect-ratio: 1;
-  height: 1.2rem;
-`
-
-const CardTitleIconMirror = styled.div`
   height: 1.5rem;
-  aspect-ratio: 1;
 `
 
 const CardStatus = styled.p<OnlinePropType>`
@@ -84,31 +79,8 @@ const CardStatus = styled.p<OnlinePropType>`
   border: 0;
   border-bottom: 0.125rem solid;
 
-  ${({ theme }) => {
+  background: transparent;
-    let ret;
+  
-
-    if (theme.backgroundImage) {
-      ret = css`
-        background-image: ${() => {
-          return css`
-            linear-gradient(${theme.colors.background}, ${theme.colors.background}),
-            url(${theme.backgroundImage})
-          `
-        }};
-        background-repeat: no-repeat;
-        background-attachment: fixed;
-        background-size: cover; 
-        background-position: 60%;
-      `;
-    }
-    else {
-      ret = css`
-        background-color: ${({ theme }) => theme.colors.background};
-      `;
-    }
-
-    return ret;
-  }};
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -155,7 +127,7 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
   if (href) {
     card = (
       <CardTitleWrap>
-        <CardTitleLink href={content.href}>
+        <CardTitleLink href={href}>
           {
             content.icon ? (
               <CardTitleIcon>
@@ -165,11 +137,9 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
           }
           <CardTitleText>{content.name}</CardTitleText>
           {
-          content.icon ? (
             <OpenInNewTab>
-              <Image alt="open" src={"/icons/open-new-window.svg"} fill />
+              <OpenInNewTabIcon width="100%" height="100%"/>
             </OpenInNewTab>
-          ) : (<></>)
           }
         </CardTitleLink>
         <CardStatus status={content.status}>{content.status}</CardStatus>
@@ -189,11 +159,6 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
             ) : (<></>)
           }
           <CardTitleText>{content.name}</CardTitleText>
-          {
-            content.icon ? (
-              <CardTitleIconMirror />
-            ) : (<></>)
-          }
         </CardTitleLinkPlaceholder>  
         <CardStatus status={content.status}>{content.status}</CardStatus>
       </CardTitleWrap>
@@ -218,7 +183,7 @@ const CardDescriptionWrap = styled.div`
   ${CardDescriptionCommon}
   padding: 0 1rem;
   margin-bottom: 2rem;
-  overflow-y: scroll;
+  overflow: hidden; /* Hide scrollbars */
   scrollbar-width: thin;
   width: 100%;
 
@@ -247,7 +212,7 @@ const CardDescription = ({ content }: { content: Service }) => {
         {content.warn}
       </p>
       <a href={content.extLink}>
-        {content.extName}
+        Official Site
       </a>
     </CardDescriptionWrap>
   );
@@ -264,7 +229,6 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
 
   // TEMP
   if (content.href) {
-    // TODO: adjust sizes
     card = (
       <Card>
         <CardTitle content={content} href={content.href}/>
@@ -282,172 +246,4 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
   }
 
   return card;
-}
-
-// TODO: remove unneeded exports
-
-//#############
-// OLD ELEMENTS
-//#############
-
-const CardStyle = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  width: 332px;
-  height: 240px;
-`;
-const CardLink = styled(Link)`
-  ${CardStyle}
-`;
-const CardStyleWrap = styled.div`
-  ${CardStyle}
-`;
-// replaces .card & .contentcard
-const PageCard = styled.div`
-  margin: 1rem;
-  padding: 23px 10px;
-  text-align: center;
-  color: ${({ theme }) => theme.colors.primary};
-  background-color: ${({ theme }) => theme.colors.background};
-  text-decoration: none;
-  border: 2px solid;
-  border-radius: 10px;
-  border-color: ${({ theme }) => theme.colors.primary};
-  transition: all 0.1s linear;
-  width: 300px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  h2 {
-    margin: 0 0 1rem 0;
-    font-size: 1.5rem; 
-  }
-
-  p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.5;
-  }
-
-  ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
-    color: ${({ theme }) => theme.colors.secondary};
-    border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
-  }
-
-  ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
-    color: ${({ theme }) => theme.colors.secondary};
-    border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
-  }
-`;
-// replaces the three status classes
-const OnlineStatus = styled.p<OnlinePropType>`
-  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;
-  }};
-  padding: 0.2rem;
-  border: 1px solid;
-  border-color: ${({ theme }) => theme.colors.primary};
-  border-radius: 5px;
-  width: min-content;
-  position: absolute;
-  top: 100; right: 50; bottom: 0; left: 50;
-  offset-position: bottom 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  background-color: ${({ theme }) => theme.colors.background};
-  background-image: ${({ theme }) => theme.backgroundImage ?
-    "linear-gradient("
-    + theme.colors.background + "," + theme.colors.background +
-    "), url(" + theme.backgroundImage + ")" : ""};
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: cover;
-
-  ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
-    border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
-  }
-
-  ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
-    border-color: ${({ theme }) => theme.colors.secondary};
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
-  }
-`;
-// replaces .cardwarn
-const CardContentWarning = styled.p`
-  color: ${({ theme }) => theme.colors.secondary};
-  
-`;
-// replaces .contentTitle
-const CardContentTitleWrap = styled.div`
-  position: relative;
-  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 }) => {
-  return (
-    <CardContentTitleWrap>
-      <h2>{content.name}</h2>
-    </CardContentTitleWrap>
-  )
-}
-// Card Content Component for Services Page
-const MobileServiceCardOld = ({ content }: { content: Service }) => {
-  let ret;
-  if (content.href) {
-    ret = (
-      <CardLink href={content.href}>
-        <PageCard>
-          <CardContentTitle content={content} />
-          <p>{content.desc}</p>
-          <CardContentWarning>{content.warn}</CardContentWarning>
-        </PageCard>
-        <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
-      </CardLink>
-    )
-  }
-  else {
-    ret = (
-      <CardStyleWrap>
-        <PageCard>
-          <CardContentTitle content={content} />
-          <p>{content.desc}</p>
-          <CardContentWarning>{content.warn}</CardContentWarning>
-        </PageCard>
-        <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
-      </CardStyleWrap>
-    )
-  }
-  return ret;
 }