From 07b8b8bdd694b99e6ddc07ced5d1d880f6a8f7f1 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 23 Dec 2022 18:40:27 +0100
Subject: [PATCH 01/25] Split Cards into Desktop and Mobile Versions

---
 components/styles/cards/desktop.tsx |  33 ++++
 components/styles/cards/mobile.tsx  | 266 ++++++++++++++++++++++++++++
 2 files changed, 299 insertions(+)
 create mode 100644 components/styles/cards/desktop.tsx
 create mode 100644 components/styles/cards/mobile.tsx

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
new file mode 100644
index 0000000..55da40a
--- /dev/null
+++ b/components/styles/cards/desktop.tsx
@@ -0,0 +1,33 @@
+import { Service } from '../../../interfaces/CardTypes';
+import styled from 'styled-components';
+import { CardLink, PageCard, CardStyleWrap, CardContentTitle, CardContentWarning, OnlineStatus } from '../content';
+
+// Card Content Component for Services Page
+export const CardContentService = ({ 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;
+}
\ No newline at end of file
diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
new file mode 100644
index 0000000..09bdfea
--- /dev/null
+++ b/components/styles/cards/mobile.tsx
@@ -0,0 +1,266 @@
+import { Service } from '../../../interfaces/CardTypes';
+import styled, { css, DefaultTheme } from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useState } from 'react';
+
+// needed for Online Status checks
+interface OnlinePropType {
+  status: string;
+}
+
+interface ActivePropType {
+  active?: number;
+}
+
+const Card = styled.div<ActivePropType>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 332px;
+  margin: 30px 0px;
+  border: 1px solid;
+  
+
+  ${ props => {
+    let ret;
+    if(props.active) {
+      ret =  css`
+        position: relative;
+        background-color: black; // DEBUG
+        margin-bottom: -120px;
+        height: 300px;
+        z-index: 10;
+      `
+    }
+    else {
+      ret =  css`
+        background-color: green; // DEBUG
+        height: 180px;
+      `
+    }
+    return ret;
+  }}
+`
+
+const Test = ({ content }: { content: Service }) => {
+  return (
+    <h2>{content.name}</h2>
+  )
+}
+
+const Test2 = styled.div<ActivePropType>`
+  ${props => props.active ?
+    css`
+      visibility: visible;
+      height: 50px;
+    ` :
+    css`
+      visibility: hidden;
+      height: 0px;
+    `}
+`
+
+export const ServiceCardMobile = ({ content }: { content: Service }) => {
+  const [expanded, setExpanded] = useState(false);
+  let card;
+
+  // TEMP
+  if (content.href) {
+    // TODO: adjust sizes
+    card = (
+      <Card active={+expanded} onBlur={() => setExpanded(false)}>
+        <Link href={content.href}>
+          <Test content={content} />
+          <Test2 active={+expanded}>{content.desc}</Test2>
+        </Link>
+        <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
+      </Card>
+    )
+  }
+  else {
+    card = <Card>
+      <Test content={content} />
+      <Test2>{content.desc}</Test2>
+      <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
+    </Card>
+  }
+
+  return card;
+}
+
+// TODO: remove unneeded exports
+
+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 .contentIcon
+const CardContentTitleIcon = styled(Image)`
+  object-fit: "contain";
+  margin-right: 8px;
+  aspect-ratio: 1;
+  height: 28px;
+`;
+// 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>
+      {
+        content.icon ? (
+          <CardContentTitleIcon alt="icon" src={content.icon} width="28" height="28" sizes='10vw' />
+        ) : (<></>)
+      }
+      <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;
+}
\ No newline at end of file

From b9540478e5344196289520931159c75d1eeed73e Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 23 Dec 2022 18:40:46 +0100
Subject: [PATCH 02/25] removed blank line

---
 components/styles/navbar/mobile.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx
index 9c903e5..c1f0a39 100644
--- a/components/styles/navbar/mobile.tsx
+++ b/components/styles/navbar/mobile.tsx
@@ -55,7 +55,6 @@ export const NavSideMenu = styled.div <ActivePropType>`
     return ret;
   }};
   backdrop-filter: ${props => props.active ? "blur(5px)" : ""};
-
   overflow-x: hidden;
   transition-property: max-width, max-height, border-right, background-color, backdrop-filter;
   transition-timing-function: ease-in-out;

From ce0a7c43c0ee3a3f1c24cada318e489f86c21833 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 23 Dec 2022 18:41:10 +0100
Subject: [PATCH 03/25] Added usage of MobileCard type on Service page

---
 pages/services.tsx | 47 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/pages/services.tsx b/pages/services.tsx
index 9a24a5a..25436b5 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -4,31 +4,54 @@ import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
 import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import ServiceList from '../public/pages.json';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingFull, error } = useServices();
+  const isMobile = useWindowSize();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
   else if (loadingFull) {
-    content =
-      <PageContentBox>
-        {initialData?.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else if (fullData) {
-    content =
-      <PageContentBox>
-        {fullData.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else {
     content = <div>Error loading data</div>

From 37841c64555deb4c4c1ccdef2ce192c3b5eba756 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 6 Jan 2023 00:33:07 +0100
Subject: [PATCH 04/25] Changed Syntax to make move to new Card layout easier

---
 pages/services.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/services.tsx b/pages/services.tsx
index 25436b5..2ae5794 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -3,7 +3,7 @@ import { Service, Status, ServiceType, ServiceLocation } from '../interfaces/Car
 import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
-import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { CardContentService, PageContentBoxNew as PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
 import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import ServiceList from '../public/pages.json';
 import useWindowSize from '../components/windowsize';

From 4880bb1df9aa0e86cc2748211c8cc96e729f0b58 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Fri, 6 Jan 2023 00:34:00 +0100
Subject: [PATCH 05/25] Added additional optional entries to card type

Now includes 1-liner description, optional warning, optional external link and optional external name
---
 interfaces/CardTypes.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/interfaces/CardTypes.ts b/interfaces/CardTypes.ts
index aabe411..e2a9b74 100644
--- a/interfaces/CardTypes.ts
+++ b/interfaces/CardTypes.ts
@@ -15,8 +15,11 @@ export interface Service {
   name: string,
   icon: string,
   href: string,
+  desc1?: string,
   desc: string,
-  warn: string,
+  warn?: string,
+  extLink?: string,
+  extName?: string,
   type: ServiceType,
   docker_container_name: string,
   location: ServiceLocation,

From f35a9dedb652d1579485f5b78d94c44ddc191af5 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sat, 14 Jan 2023 21:10:37 +0100
Subject: [PATCH 06/25] Debug changes

---
 public/pages.json | 43 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/public/pages.json b/public/pages.json
index f7378c9..3ecb7f6 100644
--- a/public/pages.json
+++ b/public/pages.json
@@ -4,8 +4,11 @@
       "name": "Nextcloud",
       "icon": "/icons/nextcloud-logo.svg",
       "href": "https://nextcloud.neshweb.net/",
-      "desc": "Self-hosted Cloud Storage Service",
+      "desc1": "Cloud Storage",
+      "desc": "Self-hosted Cloud Storage Service but longer and hopefully with wrap as well as some extra just to make sure",
       "warn": "Note: Registration requires approval",
+      "extLink": "https://qwant.com",
+      "extName": "Qwant",
       "type": "docker",
       "docker_container_name": "nextcloud",
       "location": "brr7-4800u"
@@ -14,6 +17,7 @@
       "name": "Komga",
       "icon": "/icons/komga-logo.png",
       "href": "https://komga.neshweb.net/",
+      "desc1": "Manga/Comics",
       "desc": "Self-hosted Comic Library",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -24,6 +28,7 @@
       "name": "Calibre Web",
       "icon": "/icons/calibre-logo.ico",
       "href": "https://calibre.neshweb.net/",
+      "desc1": "eBooks",
       "desc": "Self-hosted Ebook Library Service",
       "warn": "Note: Registration only via Admin",
       "type": "app",
@@ -33,6 +38,7 @@
       "name": "PeerTube",
       "icon": "/icons/peertube-logo.svg",
       "href": "https://tube.neshweb.net/",
+      "desc1": "Video Platform",
       "desc": "Self-hosted PeerTube Instance",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -43,6 +49,7 @@
       "name": "Mastodon",
       "icon": "/icons/mastodon-logo.svg",
       "href": "https://mastodon.neshweb.net/",
+      "desc1": "Twitter Alternative",
       "desc": "Self-hosted Mastodon Instance",
       "warn": "Note: Registration requires approval",
       "type": "docker",
@@ -52,6 +59,7 @@
     {
       "name": "File Browser",
       "href": "https://files.neshweb.net/",
+      "desc1": "Online File Explorer",
       "desc": "Server File Browser",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -62,6 +70,7 @@
       "name": "Jellyfin",
       "icon": "/icons/jellyfin-logo.svg",
       "href": "https://jellyfin.neshweb.net/",
+      "desc1": "Movie Platform",
       "desc": "Open-Source, Self-Hosted Media Platform",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -72,6 +81,7 @@
       "name": "Navidrome",
       "icon": "/icons/navidrome-logo.png",
       "href": "https://navidrome.neshweb.net/",
+      "desc1": "Music Service",
       "desc": "Open-Source, Self-Hosted Music Streaming Platform",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -81,6 +91,7 @@
     {
       "name": "Picard",
       "href": "https://picard.neshweb.net/",
+      "desc1": "MP3 Tagger",
       "desc": "MP3 Tagger",
       "warn": "Note: Access only via Admin",
       "type": "docker",
@@ -91,6 +102,7 @@
       "name": "Gitlab",
       "icon": "/icons/gitlab-logo.svg",
       "href": "https://gitlab.neshweb.net/",
+      "desc1": "Git Hosting",
       "desc": "Self-hosted Git Service",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -101,6 +113,7 @@
       "name": "Portainer",
       "icon": "/icons/portainer-logo.png",
       "href": "https://portainer.neshweb.net/",
+      "desc1": "Docker Management",
       "desc": "Docker Container Manager",
       "warn": "Note: Admin Only",
       "type": "docker",
@@ -108,9 +121,10 @@
       "location": "brr7-4800u"
     },
     {
-      "name": "Nginx Proxy Manager",
+      "name": "Nginx",
       "icon": "/icons/npm-logo.png",
       "href": "https://nginx.neshweb.net/",
+      "desc1": "Proxy Management",
       "desc": "Web-based Nginx Proxy Manager",
       "warn": "Note: Admin Only",
       "type": "docker",
@@ -121,6 +135,7 @@
       "name": "Grafana",
       "icon": "/icons/grafana-logo.svg",
       "href": "https://monitoring.neshweb.net/",
+      "desc1": "Server Monitoring",
       "desc": "Server Monitoring Utility",
       "warn": "Note: Admin Only",
       "type": "docker",
@@ -130,11 +145,35 @@
     {
       "name": "Matomo",
       "href": "https://tracking.neshweb.net/",
+      "desc1": "Traffic Monitoring",
       "desc": "Traffic Tracking Utility",
       "warn": "Note: Admin Only",
       "type": "docker",
       "docker_container_name": "matomo-web",
       "location": "brr7-4800u"
+    },
+    {
+      "name": "Debug1",
+      "href": "https://qwant.com",
+      "desc1": "DEBUG1",
+      "desc": "Debug Debug Debug",
+      "warn": "Note: Debug",
+      "extLink": "https://qwant.com",
+      "extName": "Qwant",
+      "type": "docker",
+      "docker_container_name": "matomo-web",
+      "location": "brr7-4800u"
+    },
+    {
+      "name": "Debug2",
+      "desc1": "DEBUG2",
+      "desc": "Debug Debug Debug",
+      "warn": "Note: Debug",
+      "extLink": "https://qwant.com",
+      "extName": "Qwant",
+      "type": "docker",
+      "docker_container_name": "Debug",
+      "location": "brr7-4800u"
     }
   ],
   "games": {

From 66b39da2ba1c55810cf8b1196d6777c2a1674a00 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sat, 14 Jan 2023 21:10:54 +0100
Subject: [PATCH 07/25] WIP transfer

---
 components/styles/cards/mobile.tsx | 346 +++++++++++++++++++++++++----
 components/styles/content.tsx      |  23 +-
 2 files changed, 313 insertions(+), 56 deletions(-)

diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index 09bdfea..1cdc874 100644
--- a/components/styles/cards/mobile.tsx
+++ b/components/styles/cards/mobile.tsx
@@ -2,11 +2,12 @@ import { Service } from '../../../interfaces/CardTypes';
 import styled, { css, DefaultTheme } from 'styled-components';
 import Link from 'next/link';
 import Image from 'next/image';
-import { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 // needed for Online Status checks
 interface OnlinePropType {
   status: string;
+  active?: number;
 }
 
 interface ActivePropType {
@@ -14,76 +15,333 @@ interface ActivePropType {
 }
 
 const Card = styled.div<ActivePropType>`
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 332px;
-  margin: 30px 0px;
-  border: 1px solid;
-  
+  width: 10rem;
+  min-height: 6.5rem;
 
-  ${ props => {
+  // themeing
+  border-top: 0.125rem solid;
+  border-radius: 10px;
+
+  ${props => {
     let ret;
-    if(props.active) {
-      ret =  css`
-        position: relative;
-        background-color: black; // DEBUG
-        margin-bottom: -120px;
-        height: 300px;
+    if (props.active) {
+      ret = css`
+        backdrop-filter: blur(1rem);
+        margin-bottom: -6.5rem;
+        max-height: 12rem;
         z-index: 10;
+        color: ${({ theme }) => theme.colors.secondary};
+        border: 0.125rem solid;
+        border-color: ${({ theme }) => theme.colors.secondary};
+        background-color: ${({ theme }) => {
+          let ret;
+
+          if (theme.invertButtons) {
+            ret = theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background;
+          }
+          else {
+            ret = theme.colors.background;
+          }
+
+          return ret;
+        }};
       `
     }
     else {
-      ret =  css`
-        background-color: green; // DEBUG
-        height: 180px;
+      ret = css`
+        max-height: 6.5rem;
+        margin-bottom: 0rem;
+        color: ${({ theme }) => theme.colors.primary};
+        border-color: ${({ theme }) => theme.colors.primary};
+        background-color: ${({ theme }) => theme.colors.background};
       `
     }
     return ret;
   }}
+
+
+  transition-property: max-height, margin-bottom;
+  transition-duration: 2s, 0s;
+  transition-delay: 2s, 2s;
 `
 
-const Test = ({ content }: { content: Service }) => {
+// custom objects for CardTitle
+//#############################
+const CardTitleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex-grow: 0.8;
+`;
+
+const CardTitleText = styled.h2`
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+`;
+
+const CardTitleIcon = styled.div`
+  position: relative;
+  object-fit: contain;
+  margin-right: 0.4rem;
+  aspect-ratio: 1;
+  height: 1.2rem;
+`;
+
+const CardTitleIconMirror = styled.div`
+  height: 1.2rem;
+  aspect-ratio: 1;
+`
+
+// content visible when reduced
+const CardTitle = ({ content }: { content: Service }) => {
   return (
-    <h2>{content.name}</h2>
+    <CardTitleWrap>
+      {
+        content.icon ? (
+          <CardTitleIcon>
+            <Image alt="icon" src={content.icon} fill />
+          </CardTitleIcon>
+        ) : (<></>)
+      }
+      <CardTitleText>{content.name}</CardTitleText>
+      {
+        content.icon ? (
+          <CardTitleIconMirror />
+        ) : (<></>)
+      }
+    </CardTitleWrap>
+
   )
 }
 
-const Test2 = styled.div<ActivePropType>`
-  ${props => props.active ?
-    css`
-      visibility: visible;
-      height: 50px;
-    ` :
-    css`
-      visibility: hidden;
-      height: 0px;
-    `}
+// custom objects for CardDescription
+//###################################
+
+// shared properties for all Description objects
+const CardDescriptionCommon = css`
+  text-align: left;
+  font-size: 0.9rem;
+  margin: 0.3rem;
 `
 
+// content visible when expanded
+const CardDescriptionWrap = styled.div`
+  ${CardDescriptionCommon}
+  padding: 0 0.5rem;
+  margin-bottom: 2rem;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0.9rem;
+  }
+`
+
+const CardDescriptionExtended = styled.p`
+  ${CardDescriptionCommon}
+  margin: 0;
+  margin-bottom: 0.9rem;
+`
+
+const CardDescription = ({ content }: { content: Service }) => {
+  let ret;
+
+  ret = (
+    <CardDescriptionWrap>
+      <CardDescriptionExtended>
+        {content.desc}
+      </CardDescriptionExtended>
+      <p>
+        {content.warn}
+      </p>
+      <a href={content.extLink}>
+        {content.extName}
+      </a>
+    </CardDescriptionWrap>
+  );
+
+  return ret;
+}
+
+const CardDescriptionCollapsed = styled.p<ActivePropType>`
+  max-height: ${props => props.active ? css`2rem` : css`0rem`};
+  visibility: ${props => props.active ? css`visible` : css`hidden`};
+  ${CardDescriptionCommon}
+  text-align: center;
+
+  transition-property: max-height, visibility;
+  transition-delay: 2s;
+`
+
+// custom objects for CardFooter
+//##############################
+
+const CardFooterStyle = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: -0.5rem;  
+`
+
+const CardStatus = styled.p<OnlinePropType>`
+  font-size: 0.9rem;
+  padding: 0.1rem;
+  
+  border-radius: 5px;
+  margin: 0;
+
+  ${props => props.active ? css`
+    border-top: 0;
+    border: 0.125rem solid;
+    ` : css`
+    border: 0;
+    border-top: 0.125rem solid;
+    `};
+
+  ${props => ({ theme }) => {
+    let ret;
+
+    if (theme.backgroundImage) {
+      ret = css`
+        background-image: ${() => {
+          let image;
+          let gradient;
+
+          if (props.active) {
+            if (theme.invertButtons && theme.colors.backgroundAlt) {
+              gradient = css`linear-gradient(${theme.colors.backgroundAlt}, ${theme.colors.backgroundAlt})`;
+            }
+            else {
+              gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`;
+            }
+          }
+          else {
+            gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`;
+          }
+
+          image = css`
+            ${gradient},
+            url(${theme.backgroundImage})
+          `
+          return image;
+        }};
+        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) {
+      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;
+  }};
+  border-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary};
+/*   
+  padding: 0.2rem;
+  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;
+*/
+`
+
+const CardExpandButton = styled.button`
+  cursor: pointer;
+  height: 1.5rem;
+  margin: 0;
+  
+`
+
+// content visble at the bottom of the card
+const CardFooter = ({ expanded, setExpanded, content }: { expanded: boolean, setExpanded: Dispatch<SetStateAction<boolean>>, content: Service }) => {
+  let ret;
+
+  ret = (
+    <CardFooterStyle>
+      <CardStatus active={+expanded} status={content.status}>{content.status}</CardStatus>
+      <CardExpandButton onClick={() => setExpanded(expanded => !expanded)}>{expanded ? "shrink" : "expand"}</CardExpandButton>
+    </CardFooterStyle>
+  )
+
+  return ret;
+}
+
+// exported Card Elements
+//#######################
+
 export const ServiceCardMobile = ({ content }: { content: Service }) => {
   const [expanded, setExpanded] = useState(false);
+
+  function handleBlur(event: any) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setExpanded(false);
+      console.log("triggered") // DEBUG
+    }
+    else {
+      console.log("not triggered") // DEBUG
+    }
+  }
+
   let card;
 
   // TEMP
   if (content.href) {
     // TODO: adjust sizes
     card = (
-      <Card active={+expanded} onBlur={() => setExpanded(false)}>
+      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
         <Link href={content.href}>
-          <Test content={content} />
-          <Test2 active={+expanded}>{content.desc}</Test2>
+          <CardTitle content={content} />
+          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
         </Link>
-        <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
+          <CardDescription content={content} />
+        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
       </Card>
     )
   }
   else {
-    card = <Card>
-      <Test content={content} />
-      <Test2>{content.desc}</Test2>
-      <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
-    </Card>
+    card = (
+      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
+        <div>
+          <CardTitle content={content} />
+          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
+        </div>
+         <CardDescription content={content} />
+        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
+      </Card>
+    )
   }
 
   return card;
@@ -91,6 +349,10 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
 
 // TODO: remove unneeded exports
 
+//#############
+// OLD ELEMENTS
+//#############
+
 const CardStyle = css`
   display: flex;
   flex-direction: column;
@@ -202,13 +464,6 @@ const CardContentWarning = styled.p`
   color: ${({ theme }) => theme.colors.secondary};
   
 `;
-// replaces .contentIcon
-const CardContentTitleIcon = styled(Image)`
-  object-fit: "contain";
-  margin-right: 8px;
-  aspect-ratio: 1;
-  height: 28px;
-`;
 // replaces .contentTitle
 const CardContentTitleWrap = styled.div`
   position: relative;
@@ -226,11 +481,6 @@ const CardContentTitleWrap = styled.div`
 const CardContentTitle = ({ content }: { content: Service }) => {
   return (
     <CardContentTitleWrap>
-      {
-        content.icon ? (
-          <CardContentTitleIcon alt="icon" src={content.icon} width="28" height="28" sizes='10vw' />
-        ) : (<></>)
-      }
       <h2>{content.name}</h2>
     </CardContentTitleWrap>
   )
diff --git a/components/styles/content.tsx b/components/styles/content.tsx
index 2621162..a47e1a5 100644
--- a/components/styles/content.tsx
+++ b/components/styles/content.tsx
@@ -8,6 +8,7 @@ interface OnlinePropType {
   status: string;
 }
 
+// TODO: remove unneeded exports
 // replaces .title
 export const PageTitle = styled.h1`
   margin: 0;
@@ -33,13 +34,19 @@ export const PageDescription = styled.p`
 // replaces .grid
 export const PageContentBox = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 80%;
+  width: 100%;
+  margin: 5.5rem;
 `;
 
-const CardStyle = css`
+// update for PageContentBox
+export const PageContentBoxNew = styled(PageContentBox)`
+  gap: 2rem 1rem;
+`
+
+export const CardStyle = css`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -101,7 +108,7 @@ export const PageCard = styled.div`
 `;
 
 // replaces the three status classes
-const OnlineStatus = styled.p<OnlinePropType>`
+export const OnlineStatus = styled.p<OnlinePropType>`
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -151,13 +158,13 @@ const OnlineStatus = styled.p<OnlinePropType>`
 `;
 
 // replaces .cardwarn
-const CardContentWarning = styled.p`
+export const CardContentWarning = styled.p`
   color: ${({ theme }) => theme.colors.secondary};
   
 `;
 
 // replaces .contentIcon
-const CardContentTitleIcon = styled(Image)`
+export const CardContentTitleIcon = styled(Image)`
   object-fit: "contain";
   margin-right: 8px;
   aspect-ratio: 1;
@@ -165,7 +172,7 @@ const CardContentTitleIcon = styled(Image)`
 `;
 
 // replaces .contentTitle
-const CardContentTitleWrap = styled.div`
+export const CardContentTitleWrap = styled.div`
   position: relative;
   display: flex;
   flex-direction: row;
@@ -179,7 +186,7 @@ const CardContentTitleWrap = styled.div`
   }
 `;
 
-const CardContentTitle = ({ content }: { content: Service | Game }) => {
+export const CardContentTitle = ({ content }: { content: Service | Game }) => {
   return (
     <CardContentTitleWrap>
       {

From fa0b4f59b0001b2cd0878dc99e09bbc107fbab68 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Wed, 15 Mar 2023 18:47:25 +0100
Subject: [PATCH 08/25] Merge Fixes

---
 public/data/pages.json | 51 ++----------------------------------------
 1 file changed, 2 insertions(+), 49 deletions(-)

diff --git a/public/data/pages.json b/public/data/pages.json
index 3ddbd0e..639019c 100644
--- a/public/data/pages.json
+++ b/public/data/pages.json
@@ -3,14 +3,9 @@
     {
       "name": "Nextcloud",
       "icon": "/icons/nextcloud-logo.svg",
-<<<<<<< HEAD:public/pages.json
       "href": "https://nextcloud.neshweb.net/",
       "desc1": "Cloud Storage",
       "desc": "Self-hosted Cloud Storage Service but longer and hopefully with wrap as well as some extra just to make sure",
-=======
-      "href": "https://nextcloud.neshweb.net",
-      "desc": "Self-hosted Cloud Storage Service",
->>>>>>> main:public/data/pages.json
       "warn": "Note: Registration requires approval",
       "extLink": "https://qwant.com",
       "extName": "Qwant",
@@ -19,20 +14,11 @@
       "location": "tower-0"
     },
     {
-<<<<<<< HEAD:public/pages.json
-      "name": "Komga",
-      "icon": "/icons/komga-logo.png",
-      "href": "https://komga.neshweb.net/",
-      "desc1": "Manga/Comics",
-      "desc": "Self-hosted Comic Library",
-      "warn": "Note: Registration only via Admin",
-=======
       "name": "Kavita",
       "icon": "/icons/kavita-logo.svg",
       "href": "https://kavita.neshweb.net",
       "desc": "Self-hosted Manga Library",
       "warn": "Registration via Admin invite",
->>>>>>> main:public/data/pages.json
       "type": "docker",
       "docker_container_name": "kavita",
       "location": "tower-0"
@@ -51,12 +37,8 @@
     {
       "name": "PeerTube",
       "icon": "/icons/peertube-logo.svg",
-<<<<<<< HEAD:public/pages.json
       "href": "https://tube.neshweb.net/",
       "desc1": "Video Platform",
-=======
-      "href": "https://tube.neshweb.net",
->>>>>>> main:public/data/pages.json
       "desc": "Self-hosted PeerTube Instance",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -66,12 +48,8 @@
     {
       "name": "Mastodon",
       "icon": "/icons/mastodon-logo.svg",
-<<<<<<< HEAD:public/pages.json
       "href": "https://mastodon.neshweb.net/",
       "desc1": "Twitter Alternative",
-=======
-      "href": "https://mastodon.neshweb.net",
->>>>>>> main:public/data/pages.json
       "desc": "Self-hosted Mastodon Instance",
       "warn": "Note: Registration requires approval",
       "type": "docker",
@@ -162,29 +140,7 @@
       "warn": "Note: Admin Only",
       "type": "docker",
       "docker_container_name": "nginx-prox",
-<<<<<<< HEAD:public/pages.json
-      "location": "brr7-4800u"
-    },
-    {
-      "name": "Grafana",
-      "icon": "/icons/grafana-logo.svg",
-      "href": "https://monitoring.neshweb.net/",
-      "desc1": "Server Monitoring",
-      "desc": "Server Monitoring Utility",
-      "warn": "Note: Admin Only",
-      "type": "docker",
-      "docker_container_name": "grafana",
-      "location": "brr7-4800u"
-    },
-    {
-      "name": "Matomo",
-      "href": "https://tracking.neshweb.net/",
-      "desc1": "Traffic Monitoring",
-      "desc": "Traffic Tracking Utility",
-      "warn": "Note: Admin Only",
-      "type": "docker",
-      "docker_container_name": "matomo-web",
-      "location": "brr7-4800u"
+      "location": "tower-0"
     },
     {
       "name": "Debug1",
@@ -196,7 +152,7 @@
       "extName": "Qwant",
       "type": "docker",
       "docker_container_name": "matomo-web",
-      "location": "brr7-4800u"
+      "location": "tower-0"
     },
     {
       "name": "Debug2",
@@ -207,8 +163,6 @@
       "extName": "Qwant",
       "type": "docker",
       "docker_container_name": "Debug",
-      "location": "brr7-4800u"
-=======
       "location": "tower-0"
     },
     {
@@ -219,7 +173,6 @@
       "warn": "Note: Admin Only",
       "type": "app",
       "location": ""
->>>>>>> main:public/data/pages.json
     }
   ],
   "games": {

From 563d85ef6d19651b13a38f4e7c1cbcd8d9cf25a1 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Wed, 15 Mar 2023 20:43:05 +0100
Subject: [PATCH 09/25] Removed dockerode

---
 package.json |  1 -
 yarn.lock    | 96 ++--------------------------------------------------
 2 files changed, 2 insertions(+), 95 deletions(-)

diff --git a/package.json b/package.json
index bc21cd6..7b3df23 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "dockerode": "^3.3.4",
     "eslint-config": "^0.3.0",
     "next": "^13.0.6",
     "react": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index 482d77e..319c76a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -132,11 +132,6 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@balena/dockerignore@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@balena/dockerignore/-/dockerignore-1.0.2.tgz#9ffe4726915251e8eb69f44ef3547e0da2c03e0d"
-  integrity sha512-wMue2Sy4GAVTk6Ic4tJVcnfdau+gx2EnG7S+uAEe+TWJFqE4YoWN4/H8MSLj4eYJKxGg26lZwboEniNiNwZQ6Q==
-
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
@@ -630,13 +625,6 @@ array.prototype.flatmap@^1.3.0:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-asn1@^0.2.4:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
-  integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
-  dependencies:
-    safer-buffer "~2.1.0"
-
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
@@ -678,13 +666,6 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-bcrypt-pbkdf@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
-  dependencies:
-    tweetnacl "^0.14.3"
-
 beeper@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
@@ -727,11 +708,6 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-buildcheck@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/buildcheck/-/buildcheck-0.0.3.tgz#70451897a95d80f7807e68fc412eb2e7e35ff4d5"
-  integrity sha512-pziaA+p/wdVImfcbsZLNF32EiWyujlQLwolMqUQE8xpKNOH7KmZQaY8sXN7DGOEzPAElo9QTaeNRfGnf3iOJbA==
-
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
@@ -912,14 +888,6 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cpu-features@~0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/cpu-features/-/cpu-features-0.0.4.tgz#0023475bb4f4c525869c162e4108099e35bf19d8"
-  integrity sha512-fKiZ/zp1mUwQbnzb9IghXtHtDoTMtNeb8oYGx6kX2SYfhnG0HNdBEBIzB9b5KlXu5DQPhfy3mInbBxFcgwAr3A==
-  dependencies:
-    buildcheck "0.0.3"
-    nan "^2.15.0"
-
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1024,25 +992,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-docker-modem@^3.0.0:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/docker-modem/-/docker-modem-3.0.6.tgz#8c76338641679e28ec2323abb65b3276fb1ce597"
-  integrity sha512-h0Ow21gclbYsZ3mkHDfsYNDqtRhXS8fXr51bU0qr1dxgTMJj0XufbzX+jhNOvA8KuEEzn6JbvLVhXyv+fny9Uw==
-  dependencies:
-    debug "^4.1.1"
-    readable-stream "^3.5.0"
-    split-ca "^1.0.1"
-    ssh2 "^1.11.0"
-
-dockerode@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/dockerode/-/dockerode-3.3.4.tgz#875de614a1be797279caa9fe27e5637cf0e40548"
-  integrity sha512-3EUwuXnCU+RUlQEheDjmBE0B7q66PV9Rw5NiH1sXwINq0M9c5ERP9fxgkw36ZHOtzf4AGEEYySnkx/sACC9EgQ==
-  dependencies:
-    "@balena/dockerignore" "^1.0.2"
-    docker-modem "^3.0.0"
-    tar-fs "~2.0.1"
-
 doctrine@^1.2.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -2385,11 +2334,6 @@ mute-stream@0.0.5:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
   integrity sha512-EbrziT4s8cWPmzr47eYVW3wimS4HsvlnV5ri1xw1aR6JQo/OrJX5rkl32K/QQHdxeabJETtfeaROGhd8W7uBgg==
 
-nan@^2.15.0, nan@^2.16.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
-  integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
-
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
@@ -2756,7 +2700,7 @@ readable-stream@^2.2.2, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0:
+readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -2900,11 +2844,6 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safer-buffer@~2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -3017,27 +2956,11 @@ sparkles@^1.0.0:
   resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
   integrity sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==
 
-split-ca@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split-ca/-/split-ca-1.0.1.tgz#6c83aff3692fa61256e0cd197e05e9de157691a6"
-  integrity sha512-Q5thBSxp5t8WPTTJQS59LrGqOZqOsrhDGDVm8azCqIBjSBd7nd9o2PM+mDulQQkh8h//4U6hFZnc/mul8t5pWQ==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-ssh2@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/ssh2/-/ssh2-1.11.0.tgz#ce60186216971e12f6deb553dcf82322498fe2e4"
-  integrity sha512-nfg0wZWGSsfUe/IBJkXVll3PEZ//YH2guww+mP88gTpuSU4FtZN7zu9JoeTGOyCNx2dTDtT9fOpWwlzyj4uOOw==
-  dependencies:
-    asn1 "^0.2.4"
-    bcrypt-pbkdf "^1.0.2"
-  optionalDependencies:
-    cpu-features "~0.0.4"
-    nan "^2.16.0"
-
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -3221,17 +3144,7 @@ tar-fs@^2.0.0, tar-fs@^2.1.1:
     pump "^3.0.0"
     tar-stream "^2.1.4"
 
-tar-fs@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
-  integrity sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
-tar-stream@^2.0.0, tar-stream@^2.1.4:
+tar-stream@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
   integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
@@ -3311,11 +3224,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tweetnacl@^0.14.3:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"

From 31bd014abf3aae9b5a61cbe6fb5ede14e8292ef9 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Wed, 15 Mar 2023 20:43:56 +0100
Subject: [PATCH 10/25] Several changes to cards

Cards are now bigger and do not contain an expand feature
---
 components/styles/cards/desktop.tsx |   2 +-
 components/styles/cards/mobile.tsx  | 358 +++++++++++-----------------
 interfaces/CardTypes.ts             |   1 -
 pages/api/containers.tsx            |   1 -
 pages/services.tsx                  |  10 +-
 public/data/pages.json              |  13 -
 6 files changed, 152 insertions(+), 233 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 55da40a..326e465 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { CardLink, PageCard, CardStyleWrap, CardContentTitle, CardContentWarning, OnlineStatus } from '../content';
 
 // Card Content Component for Services Page
-export const CardContentService = ({ content }: { content: Service }) => {
+export const ServiceCardDesktop = ({ content }: { content: Service }) => {
   let ret;
   if (content.href) {
     ret = (
diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index 1cdc874..796c79f 100644
--- a/components/styles/cards/mobile.tsx
+++ b/components/styles/cards/mobile.tsx
@@ -7,66 +7,30 @@ import { Dispatch, SetStateAction, useState } from 'react';
 // needed for Online Status checks
 interface OnlinePropType {
   status: string;
-  active?: number;
 }
 
-interface ActivePropType {
-  active?: number;
-}
 
-const Card = styled.div<ActivePropType>`
+const Card = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 10rem;
-  min-height: 6.5rem;
+  width: 30rem;
+  min-height: 10rem;
+  max-height: 15rem;
 
   // themeing
   border-top: 0.125rem solid;
   border-radius: 10px;
 
-  ${props => {
-    let ret;
-    if (props.active) {
-      ret = css`
-        backdrop-filter: blur(1rem);
-        margin-bottom: -6.5rem;
-        max-height: 12rem;
-        z-index: 10;
-        color: ${({ theme }) => theme.colors.secondary};
-        border: 0.125rem solid;
-        border-color: ${({ theme }) => theme.colors.secondary};
-        background-color: ${({ theme }) => {
-          let ret;
-
-          if (theme.invertButtons) {
-            ret = theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background;
-          }
-          else {
-            ret = theme.colors.background;
-          }
-
-          return ret;
-        }};
-      `
-    }
-    else {
-      ret = css`
-        max-height: 6.5rem;
-        margin-bottom: 0rem;
-        color: ${({ theme }) => theme.colors.primary};
-        border-color: ${({ theme }) => theme.colors.primary};
-        background-color: ${({ theme }) => theme.colors.background};
-      `
-    }
-    return ret;
-  }}
+  color: ${({ theme }) => theme.colors.primary};
+  border-color: ${({ theme }) => theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.background};
 
 
   transition-property: max-height, margin-bottom;
-  transition-duration: 2s, 0s;
-  transition-delay: 2s, 2s;
+  transition-duration: 0.2s, 0s;
+  transition-delay: 0.2s, 0.2s;
 `
 
 // custom objects for CardTitle
@@ -74,7 +38,7 @@ const Card = styled.div<ActivePropType>`
 const CardTitleWrap = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   width: 100%;
   flex-grow: 0.8;
@@ -90,34 +54,139 @@ const CardTitleIcon = styled.div`
   object-fit: contain;
   margin-right: 0.4rem;
   aspect-ratio: 1;
-  height: 1.2rem;
+  height: 1.5rem;
 `;
 
 const CardTitleIconMirror = styled.div`
-  height: 1.2rem;
+  height: 1.5rem;
   aspect-ratio: 1;
 `
 
-// content visible when reduced
-const CardTitle = ({ content }: { content: Service }) => {
-  return (
-    <CardTitleWrap>
-      {
-        content.icon ? (
-          <CardTitleIcon>
-            <Image alt="icon" src={content.icon} fill />
-          </CardTitleIcon>
-        ) : (<></>)
-      }
-      <CardTitleText>{content.name}</CardTitleText>
-      {
-        content.icon ? (
-          <CardTitleIconMirror />
-        ) : (<></>)
-      }
-    </CardTitleWrap>
+const CardStatus = styled.p<OnlinePropType>`
+  font-size: 0.9rem;
+  padding: 0.1rem;
+  margin: 0.5rem;
+  margin-right: 1.5rem;
+  
+  border-radius: 5px;
+  border: 0;
+  border-bottom: 0.125rem solid;
 
-  )
+  ${({ theme }) => {
+    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) {
+      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;
+  }};
+`
+
+const CardTitleLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+const CardTitleLinkPlaceholder = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+// content visible when reduced
+const CardTitle = ({ content, href }: { content: Service, href: string }) => {
+  let card;
+
+  if (href) {
+    card = (
+      <CardTitleWrap>
+        <CardTitleLink href={content.href}>
+          {
+            content.icon ? (
+              <CardTitleIcon>
+                <Image alt="icon" src={content.icon} fill />
+              </CardTitleIcon>
+            ) : (<></>)
+          }
+          <CardTitleText>{content.name}</CardTitleText>
+          {
+          content.icon ? (
+            <CardTitleIconMirror />
+          ) : (<></>)
+          }
+        </CardTitleLink>
+        <CardStatus status={content.status}>{content.status}</CardStatus>
+      </CardTitleWrap>
+  
+    )
+  }
+  else {
+    card = (
+      <CardTitleWrap>
+        <CardTitleLinkPlaceholder>
+          {
+            content.icon ? (
+              <CardTitleIcon>
+                <Image alt="icon" src={content.icon} fill />
+              </CardTitleIcon>
+            ) : (<></>)
+          }
+          <CardTitleText>{content.name}</CardTitleText>
+          {
+            content.icon ? (
+              <CardTitleIconMirror />
+            ) : (<></>)
+          }
+        </CardTitleLinkPlaceholder>  
+        <CardStatus status={content.status}>{content.status}</CardStatus>
+      </CardTitleWrap>
+  
+    )
+  }
+  return card
 }
 
 // custom objects for CardDescription
@@ -171,9 +240,9 @@ const CardDescription = ({ content }: { content: Service }) => {
   return ret;
 }
 
-const CardDescriptionCollapsed = styled.p<ActivePropType>`
-  max-height: ${props => props.active ? css`2rem` : css`0rem`};
-  visibility: ${props => props.active ? css`visible` : css`hidden`};
+const CardDescriptionCollapsed = styled.p`
+  max-height:  0rem;
+  visibility: hidden;
   ${CardDescriptionCommon}
   text-align: center;
 
@@ -181,139 +250,10 @@ const CardDescriptionCollapsed = styled.p<ActivePropType>`
   transition-delay: 2s;
 `
 
-// custom objects for CardFooter
-//##############################
-
-const CardFooterStyle = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  position: absolute;
-  bottom: -0.5rem;  
-`
-
-const CardStatus = styled.p<OnlinePropType>`
-  font-size: 0.9rem;
-  padding: 0.1rem;
-  
-  border-radius: 5px;
-  margin: 0;
-
-  ${props => props.active ? css`
-    border-top: 0;
-    border: 0.125rem solid;
-    ` : css`
-    border: 0;
-    border-top: 0.125rem solid;
-    `};
-
-  ${props => ({ theme }) => {
-    let ret;
-
-    if (theme.backgroundImage) {
-      ret = css`
-        background-image: ${() => {
-          let image;
-          let gradient;
-
-          if (props.active) {
-            if (theme.invertButtons && theme.colors.backgroundAlt) {
-              gradient = css`linear-gradient(${theme.colors.backgroundAlt}, ${theme.colors.backgroundAlt})`;
-            }
-            else {
-              gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`;
-            }
-          }
-          else {
-            gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`;
-          }
-
-          image = css`
-            ${gradient},
-            url(${theme.backgroundImage})
-          `
-          return image;
-        }};
-        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) {
-      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;
-  }};
-  border-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary};
-/*   
-  padding: 0.2rem;
-  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;
-*/
-`
-
-const CardExpandButton = styled.button`
-  cursor: pointer;
-  height: 1.5rem;
-  margin: 0;
-  
-`
-
-// content visble at the bottom of the card
-const CardFooter = ({ expanded, setExpanded, content }: { expanded: boolean, setExpanded: Dispatch<SetStateAction<boolean>>, content: Service }) => {
-  let ret;
-
-  ret = (
-    <CardFooterStyle>
-      <CardStatus active={+expanded} status={content.status}>{content.status}</CardStatus>
-      <CardExpandButton onClick={() => setExpanded(expanded => !expanded)}>{expanded ? "shrink" : "expand"}</CardExpandButton>
-    </CardFooterStyle>
-  )
-
-  return ret;
-}
-
 // exported Card Elements
 //#######################
 
 export const ServiceCardMobile = ({ content }: { content: Service }) => {
-  const [expanded, setExpanded] = useState(false);
-
-  function handleBlur(event: any) {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setExpanded(false);
-      console.log("triggered") // DEBUG
-    }
-    else {
-      console.log("not triggered") // DEBUG
-    }
-  }
 
   let card;
 
@@ -321,25 +261,17 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
   if (content.href) {
     // TODO: adjust sizes
     card = (
-      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
-        <Link href={content.href}>
-          <CardTitle content={content} />
-          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
-        </Link>
-          <CardDescription content={content} />
-        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
+      <Card>
+        <CardTitle content={content} href={content.href}/>
+        <CardDescription content={content}/>
       </Card>
     )
   }
   else {
     card = (
-      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
-        <div>
-          <CardTitle content={content} />
-          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
-        </div>
-         <CardDescription content={content} />
-        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
+      <Card>
+        <CardTitle content={content}/>
+        <CardDescription content={content}/>
       </Card>
     )
   }
diff --git a/interfaces/CardTypes.ts b/interfaces/CardTypes.ts
index 21c5ec2..59f0b2b 100644
--- a/interfaces/CardTypes.ts
+++ b/interfaces/CardTypes.ts
@@ -15,7 +15,6 @@ export interface Service {
   name: string,
   icon: string,
   href: string,
-  desc1?: string,
   desc: string,
   warn?: string,
   extLink?: string,
diff --git a/pages/api/containers.tsx b/pages/api/containers.tsx
index 7f6a6d2..9d9fec8 100644
--- a/pages/api/containers.tsx
+++ b/pages/api/containers.tsx
@@ -1,4 +1,3 @@
-import Docker from 'dockerode'
 import ApiSecret from '../../private/portainer_api_secret.json'
 import { DockerInfo } from '../../interfaces/DockerStatus';
 import { ServiceLocation } from '../../interfaces/CardTypes';
diff --git a/pages/services.tsx b/pages/services.tsx
index de5b066..354cd33 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -1,11 +1,13 @@
 import Head from 'next/head'
-import { Service, Status, ServiceType, ServiceLocation } from '../interfaces/CardTypes';
-import Dockerode from 'dockerode';
+import { Service, Status, ServiceType } from '../interfaces/CardTypes';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
 import ServiceList from '../public/data/pages.json';
 import { DockerInfo } from '../interfaces/DockerStatus';
 import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import useWindowSize from '../components/windowsize';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
+import { ServiceCardDesktop } from '../components/styles/cards/desktop';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -29,7 +31,7 @@ function Services() {
       content =
         <PageContentBox>
           {initialData?.map((item: Service) => (
-            <CardContentService key={item.name} content={item} />
+            <ServiceCardDesktop key={item.name} content={item} />
           ))}
         </PageContentBox>
     }
@@ -47,7 +49,7 @@ function Services() {
       content =
         <PageContentBox>
           {fullData.map((item: Service) => (
-            <CardContentService key={item.name} content={item} />
+            <ServiceCardDesktop key={item.name} content={item} />
           ))}
         </PageContentBox>
     }
diff --git a/public/data/pages.json b/public/data/pages.json
index 639019c..e8f6746 100644
--- a/public/data/pages.json
+++ b/public/data/pages.json
@@ -4,7 +4,6 @@
       "name": "Nextcloud",
       "icon": "/icons/nextcloud-logo.svg",
       "href": "https://nextcloud.neshweb.net/",
-      "desc1": "Cloud Storage",
       "desc": "Self-hosted Cloud Storage Service but longer and hopefully with wrap as well as some extra just to make sure",
       "warn": "Note: Registration requires approval",
       "extLink": "https://qwant.com",
@@ -27,7 +26,6 @@
       "name": "Calibre Web",
       "icon": "/icons/calibre-logo.ico",
       "href": "https://calibre.neshweb.net/",
-      "desc1": "eBooks",
       "desc": "Self-hosted Ebook Library Service",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -38,7 +36,6 @@
       "name": "PeerTube",
       "icon": "/icons/peertube-logo.svg",
       "href": "https://tube.neshweb.net/",
-      "desc1": "Video Platform",
       "desc": "Self-hosted PeerTube Instance",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -49,7 +46,6 @@
       "name": "Mastodon",
       "icon": "/icons/mastodon-logo.svg",
       "href": "https://mastodon.neshweb.net/",
-      "desc1": "Twitter Alternative",
       "desc": "Self-hosted Mastodon Instance",
       "warn": "Note: Registration requires approval",
       "type": "docker",
@@ -70,7 +66,6 @@
     {
       "name": "File Browser",
       "href": "https://files.neshweb.net/",
-      "desc1": "Online File Explorer",
       "desc": "Server File Browser",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -81,7 +76,6 @@
       "name": "Jellyfin",
       "icon": "/icons/jellyfin-logo.svg",
       "href": "https://jellyfin.neshweb.net/",
-      "desc1": "Movie Platform",
       "desc": "Open-Source, Self-Hosted Media Platform",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -92,7 +86,6 @@
       "name": "Navidrome",
       "icon": "/icons/navidrome-logo.png",
       "href": "https://navidrome.neshweb.net/",
-      "desc1": "Music Service",
       "desc": "Open-Source, Self-Hosted Music Streaming Platform",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -102,7 +95,6 @@
     {
       "name": "Picard",
       "href": "https://picard.neshweb.net/",
-      "desc1": "MP3 Tagger",
       "desc": "MP3 Tagger",
       "warn": "Note: Access only via Admin",
       "type": "docker",
@@ -113,7 +105,6 @@
       "name": "Gitlab",
       "icon": "/icons/gitlab-logo.svg",
       "href": "https://gitlab.neshweb.net/",
-      "desc1": "Git Hosting",
       "desc": "Self-hosted Git Service",
       "warn": "Note: Registration only via Admin",
       "type": "docker",
@@ -124,7 +115,6 @@
       "name": "Portainer",
       "icon": "/icons/portainer-logo.png",
       "href": "https://portainer.neshweb.net/",
-      "desc1": "Docker Management",
       "desc": "Docker Container Manager",
       "warn": "Note: Admin Only",
       "type": "docker",
@@ -135,7 +125,6 @@
       "name": "Nginx",
       "icon": "/icons/npm-logo.png",
       "href": "https://nginx.neshweb.net/",
-      "desc1": "Proxy Management",
       "desc": "Web-based Nginx Proxy Manager",
       "warn": "Note: Admin Only",
       "type": "docker",
@@ -145,7 +134,6 @@
     {
       "name": "Debug1",
       "href": "https://qwant.com",
-      "desc1": "DEBUG1",
       "desc": "Debug Debug Debug",
       "warn": "Note: Debug",
       "extLink": "https://qwant.com",
@@ -156,7 +144,6 @@
     },
     {
       "name": "Debug2",
-      "desc1": "DEBUG2",
       "desc": "Debug Debug Debug",
       "warn": "Note: Debug",
       "extLink": "https://qwant.com",

From 94223fd80ce680fa5e678e0e16cdf8bae46a96b8 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Wed, 15 Mar 2023 21:27:40 +0100
Subject: [PATCH 11/25] Padding and Text alignment

---
 components/styles/cards/mobile.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index 796c79f..da765e2 100644
--- a/components/styles/cards/mobile.tsx
+++ b/components/styles/cards/mobile.tsx
@@ -18,9 +18,10 @@ const Card = styled.div`
   width: 30rem;
   min-height: 10rem;
   max-height: 15rem;
+  margin-bottom: 2rem;
 
   // themeing
-  border-top: 0.125rem solid;
+  border-top: 0.25rem solid;
   border-radius: 10px;
 
   color: ${({ theme }) => theme.colors.primary};
@@ -202,11 +203,11 @@ const CardDescriptionCommon = css`
 // content visible when expanded
 const CardDescriptionWrap = styled.div`
   ${CardDescriptionCommon}
-  padding: 0 0.5rem;
+  padding: 0 1rem;
   margin-bottom: 2rem;
   overflow-y: scroll;
   scrollbar-width: thin;
-
+  width: 100%;
 
   p {
     margin-top: 0;
@@ -218,6 +219,7 @@ const CardDescriptionExtended = styled.p`
   ${CardDescriptionCommon}
   margin: 0;
   margin-bottom: 0.9rem;
+  width: 100%;
 `
 
 const CardDescription = ({ content }: { content: Service }) => {
@@ -240,16 +242,6 @@ const CardDescription = ({ content }: { content: Service }) => {
   return ret;
 }
 
-const CardDescriptionCollapsed = styled.p`
-  max-height:  0rem;
-  visibility: hidden;
-  ${CardDescriptionCommon}
-  text-align: center;
-
-  transition-property: max-height, visibility;
-  transition-delay: 2s;
-`
-
 // exported Card Elements
 //#######################
 
@@ -270,7 +262,7 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => {
   else {
     card = (
       <Card>
-        <CardTitle content={content}/>
+        <CardTitle content={content} href={""}/>
         <CardDescription content={content}/>
       </Card>
     )

From e5dd399a077f7795aa1cc829d05d33ee4d2d6658 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Wed, 15 Mar 2023 22:17:51 +0100
Subject: [PATCH 12/25] Added "Open in new tab" icon

---
 components/styles/cards/mobile.tsx | 15 ++++++++++++++-
 public/icons/open-new-window.svg   |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/open-new-window.svg

diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index da765e2..a744d0a 100644
--- a/components/styles/cards/mobile.tsx
+++ b/components/styles/cards/mobile.tsx
@@ -16,6 +16,7 @@ const Card = styled.div`
   flex-direction: column;
   align-items: center;
   width: 30rem;
+  max-width: 90%;
   min-height: 10rem;
   max-height: 15rem;
   margin-bottom: 2rem;
@@ -58,6 +59,16 @@ const CardTitleIcon = styled.div`
   height: 1.5rem;
 `;
 
+const OpenInNewTab = styled.div`
+  filter: invert();
+  position: relative;
+  object-fit: contain;
+  margin: 0.3rem;
+  margin-left: 0.5rem;
+  aspect-ratio: 1;
+  height: 1.2rem;
+`
+
 const CardTitleIconMirror = styled.div`
   height: 1.5rem;
   aspect-ratio: 1;
@@ -155,7 +166,9 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
           <CardTitleText>{content.name}</CardTitleText>
           {
           content.icon ? (
-            <CardTitleIconMirror />
+            <OpenInNewTab>
+              <Image alt="open" src={"/icons/open-new-window.svg"} fill />
+            </OpenInNewTab>
           ) : (<></>)
           }
         </CardTitleLink>
diff --git a/public/icons/open-new-window.svg b/public/icons/open-new-window.svg
new file mode 100644
index 0000000..ac2bb29
--- /dev/null
+++ b/public/icons/open-new-window.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>
\ No newline at end of file

From e2f75f43b23b9ce7296d0c10de306c66b45f854c Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:16:54 +0100
Subject: [PATCH 13/25] Added svg support

---
 next.config.js                   |    8 +
 package.json                     |    1 +
 public/icons/open-new-window.svg |    6 +-
 yarn.lock                        | 1423 +++++++++++++++++++++++++++++-
 4 files changed, 1430 insertions(+), 8 deletions(-)

diff --git a/next.config.js b/next.config.js
index 91f05f8..9170d12 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,14 @@ const nextConfig = {
   output: 'standalone',
   compiler: {
     styledComponents: true,
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [{ loader: "@svgr/webpack", options: { icon: true } }]
+    });
+
+    return config;
   }
 };
 
diff --git a/package.json b/package.json
index 7b3df23..ec56ded 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@svgr/webpack": "^6.5.1",
     "eslint-config": "^0.3.0",
     "next": "^13.0.6",
     "react": "^18.2.0",
diff --git a/public/icons/open-new-window.svg b/public/icons/open-new-window.svg
index ac2bb29..7f5e54d 100644
--- a/public/icons/open-new-window.svg
+++ b/public/icons/open-new-window.svg
@@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
+    <path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+</svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 319c76a..8896f01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,13 +2,47 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.18.6":
+"@ampproject/remapping@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
   integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.0.tgz#c241dc454e5b5917e40d37e525e2f4530c399298"
+  integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==
+
+"@babel/core@^7.19.6":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.3.tgz#cf1c877284a469da5d1ce1d1e53665253fae712e"
+  integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.21.3"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.3"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.3"
+    "@babel/types" "^7.21.3"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.5.tgz#cb25abee3178adf58d6814b68517c62bdbfdda95"
@@ -18,18 +52,96 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.16.0":
+"@babel/generator@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.3.tgz#232359d0874b392df04045d72ce2fd9bb5045fce"
+  integrity sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==
+  dependencies:
+    "@babel/types" "^7.21.3"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
+  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
+  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz#64f49ecb0020532f19b1d014b03bccaa1ab85fb9"
+  integrity sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz#53ff78472e5ce10a52664272a239787107603ebb"
+  integrity sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
+  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
 "@babel/helper-environment-visitor@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-explode-assignable-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
+  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-function-name@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
@@ -45,13 +157,82 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
+  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
+  dependencies:
+    "@babel/types" "^7.21.0"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
+
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
+  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
+
+"@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
+  integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
+  dependencies:
+    "@babel/types" "^7.20.0"
+
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
@@ -69,6 +250,30 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
+
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
+  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
+  dependencies:
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
+
+"@babel/helpers@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
+  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -83,6 +288,694 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
   integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==
 
+"@babel/parser@^7.20.7", "@babel/parser@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3"
+  integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+
+"@babel/plugin-proposal-async-generator-functions@^7.20.1":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-class-static-block@^7.18.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.20.2":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.20.7"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@^7.18.9", "@babel/plugin-proposal-optional-chaining@^7.20.7":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-import-assertions@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
+  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz#4e9a0cfc769c85689b77a2e642d24e9f697fc8c7"
+  integrity sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+
+"@babel/plugin-transform-arrow-functions@^7.18.6":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
+  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-async-to-generator@^7.18.6":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-block-scoping@^7.20.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-classes@^7.20.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.18.9":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
+  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
+
+"@babel/plugin-transform-destructuring@^7.20.2":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-duplicate-keys@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-for-of@^7.18.8":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
+  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-modules-amd@^7.19.6":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-modules-commonjs@^7.19.6":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
+  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
+
+"@babel/plugin-transform-modules-systemjs@^7.19.6":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-identifier" "^7.19.1"
+
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+
+"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-constant-elements@^7.18.12":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.21.3.tgz#b32a5556100d424b25e388dd689050d78396884d"
+  integrity sha512-4DVcFeWe/yDYBLp0kBmOGFJ6N2UYg7coGid1gdxb4co62dy/xISDMaYBXBVXEDhfgMk7qkbcYiGtwd5Q/hwDDQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
+"@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+
+"@babel/plugin-transform-react-jsx@^7.18.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz#656b42c2fdea0a6d8762075d58ef9d4e3c4ab8a2"
+  integrity sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.21.0"
+
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-regenerator@^7.18.6":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
+  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    regenerator-transform "^0.15.1"
+
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-spread@^7.19.0":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-typescript@^7.21.0":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz#316c5be579856ea890a57ebc5116c5d064658f2b"
+  integrity sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/plugin-syntax-typescript" "^7.20.0"
+
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/preset-env@^7.19.4":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
+  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+  dependencies:
+    "@babel/compat-data" "^7.20.1"
+    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.18.6"
+    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.20.2"
+    "@babel/plugin-transform-classes" "^7.20.2"
+    "@babel/plugin-transform-computed-properties" "^7.18.9"
+    "@babel/plugin-transform-destructuring" "^7.20.2"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.19.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.20.2"
+    babel-plugin-polyfill-corejs2 "^0.3.3"
+    babel-plugin-polyfill-corejs3 "^0.6.0"
+    babel-plugin-polyfill-regenerator "^0.4.1"
+    core-js-compat "^3.25.1"
+    semver "^6.3.0"
+
+"@babel/preset-modules@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-react-display-name" "^7.18.6"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
+
+"@babel/preset-typescript@^7.18.6":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff"
+  integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-transform-typescript" "^7.21.0"
+
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.19.0.tgz"
@@ -98,6 +991,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.8.4":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -107,6 +1007,31 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
+"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.3.tgz#4747c5e7903d224be71f90788b06798331896f67"
+  integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.21.3"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.3"
+    "@babel/types" "^7.21.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.4.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.5.tgz#78eb244bea8270fdda1ef9af22a5d5e5b7e57133"
@@ -132,6 +1057,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3", "@babel/types@^7.4.4":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05"
+  integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
@@ -193,6 +1127,14 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -207,7 +1149,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/set-array@^1.0.1":
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
@@ -217,7 +1159,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
   integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@@ -328,6 +1270,112 @@
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz"
   integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
 
+"@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
+  integrity sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==
+
+"@svgr/babel-plugin-remove-jsx-attribute@*":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz#652bfd4ed0a0699843585cda96faeb09d6e1306e"
+  integrity sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@*":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz#4b78994ab7d39032c729903fc2dd5c0fa4565cb8"
+  integrity sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz#fb9d22ea26d2bc5e0a44b763d4c46d5d3f596c60"
+  integrity sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==
+
+"@svgr/babel-plugin-svg-dynamic-title@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz#01b2024a2b53ffaa5efceaa0bf3e1d5a4c520ce4"
+  integrity sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==
+
+"@svgr/babel-plugin-svg-em-dimensions@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz#dd3fa9f5b24eb4f93bcf121c3d40ff5facecb217"
+  integrity sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==
+
+"@svgr/babel-plugin-transform-react-native-svg@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz#1d8e945a03df65b601551097d8f5e34351d3d305"
+  integrity sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==
+
+"@svgr/babel-plugin-transform-svg-component@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz#48620b9e590e25ff95a80f811544218d27f8a250"
+  integrity sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==
+
+"@svgr/babel-preset@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.5.1.tgz#b90de7979c8843c5c580c7e2ec71f024b49eb828"
+  integrity sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.5.1"
+    "@svgr/babel-plugin-remove-jsx-attribute" "*"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "*"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.5.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.5.1"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.5.1"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1"
+    "@svgr/babel-plugin-transform-svg-component" "^6.5.1"
+
+"@svgr/core@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.5.1.tgz#d3e8aa9dbe3fbd747f9ee4282c1c77a27410488a"
+  integrity sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==
+  dependencies:
+    "@babel/core" "^7.19.6"
+    "@svgr/babel-preset" "^6.5.1"
+    "@svgr/plugin-jsx" "^6.5.1"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.1"
+
+"@svgr/hast-util-to-babel-ast@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz#81800bd09b5bcdb968bf6ee7c863d2288fdb80d2"
+  integrity sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==
+  dependencies:
+    "@babel/types" "^7.20.0"
+    entities "^4.4.0"
+
+"@svgr/plugin-jsx@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz#0e30d1878e771ca753c94e69581c7971542a7072"
+  integrity sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==
+  dependencies:
+    "@babel/core" "^7.19.6"
+    "@svgr/babel-preset" "^6.5.1"
+    "@svgr/hast-util-to-babel-ast" "^6.5.1"
+    svg-parser "^2.0.4"
+
+"@svgr/plugin-svgo@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz#0f91910e988fc0b842f88e0960c2862e022abe84"
+  integrity sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==
+  dependencies:
+    cosmiconfig "^7.0.1"
+    deepmerge "^4.2.2"
+    svgo "^2.8.0"
+
+"@svgr/webpack@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.5.1.tgz#ecf027814fc1cb2decc29dc92f39c3cf691e40e8"
+  integrity sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==
+  dependencies:
+    "@babel/core" "^7.19.6"
+    "@babel/plugin-transform-react-constant-elements" "^7.18.12"
+    "@babel/preset-env" "^7.19.4"
+    "@babel/preset-react" "^7.18.6"
+    "@babel/preset-typescript" "^7.18.6"
+    "@svgr/core" "^6.5.1"
+    "@svgr/plugin-jsx" "^6.5.1"
+    "@svgr/plugin-svgo" "^6.5.1"
+
 "@swc/helpers@0.4.14":
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
@@ -335,6 +1383,11 @@
   dependencies:
     tslib "^2.4.0"
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/cookie@^0.5.1":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.5.1.tgz#b29aa1f91a59f35e29ff8f7cb24faf1a3a750554"
@@ -374,6 +1427,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.12.tgz#89e7f8aa8c88abf432f9bd594888144d7dba10aa"
   integrity sha512-FgD3NtTAKvyMmD44T07zz2fEf+OKwutgBCEVM8GcvMGVGaDktiLNTDvPwC/LUe3PinMW+X6CuLOF2Ui1mAlSXg==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -640,6 +1698,30 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+babel-plugin-polyfill-corejs2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
+  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
+  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    core-js-compat "^3.25.1"
+
+babel-plugin-polyfill-regenerator@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
+  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+
 "babel-plugin-styled-components@>= 1.12.0":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
@@ -680,6 +1762,11 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
@@ -695,6 +1782,16 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+browserslist@^4.21.3, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+  dependencies:
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -733,6 +1830,11 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
 camelize@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
@@ -743,6 +1845,11 @@ caniuse-lite@^1.0.30001406:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
   integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
 
+caniuse-lite@^1.0.30001449:
+  version "1.0.30001466"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001466.tgz#c1e6197c540392e09709ecaa9e3e403428c53375"
+  integrity sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -863,6 +1970,11 @@ color@^4.2.3:
     color-convert "^2.0.1"
     color-string "^1.9.0"
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -878,6 +1990,18 @@ concat-stream@^1.4.6:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+core-js-compat@^3.25.1:
+  version "3.29.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.29.1.tgz#15c0fb812ea27c973c18d425099afa50b934b41b"
+  integrity sha512-QmchCua884D8wWskMX8tW5ydINzd8oSJVx38lx/pVkFGqztxt73GYre3pm/hyYq8bPf+MW5In4I/uRShFDsbrA==
+  dependencies:
+    browserslist "^4.21.5"
+
 core-js-pure@^3.20.2:
   version "3.25.1"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz"
@@ -888,6 +2012,17 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cosmiconfig@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -902,6 +2037,17 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
+css-select@^4.1.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
 css-to-react-native@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
@@ -911,6 +2057,26 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 csstype@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
@@ -972,6 +2138,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^4.2.2:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.0.tgz#65491893ec47756d44719ae520e0e2609233b59b"
+  integrity sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==
+
 define-properties@^1.1.3, define-properties@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
@@ -1014,6 +2185,36 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 duplexer2@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -1021,6 +2222,11 @@ duplexer2@0.0.2:
   dependencies:
     readable-stream "~1.1.9"
 
+electron-to-chromium@^1.4.284:
+  version "1.4.330"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.330.tgz#4740378db7160d7210afb29800c74048cdf10a99"
+  integrity sha512-PqyefhybrVdjAJ45HaPLtuVaehiSw7C3ya0aad+rvmV53IVyXmYRk3pwIOb2TxTDTnmgQdn46NjMMaysx79/6Q==
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
@@ -1033,6 +2239,23 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
   version "1.20.2"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.2.tgz"
@@ -1138,6 +2361,11 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -1605,6 +2833,11 @@ generate-object-property@^1.1.0:
   dependencies:
     is-property "^1.0.0"
 
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz"
@@ -1878,6 +3111,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-arrayish@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
@@ -2065,6 +3303,16 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
@@ -2089,6 +3337,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonify@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
@@ -2135,6 +3388,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -2187,6 +3445,11 @@ lodash._root@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
   integrity sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.escape@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
@@ -2258,6 +3521,13 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -2265,6 +3535,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
@@ -2391,6 +3666,18 @@ node-addon-api@^5.0.0:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.0.0.tgz#7d7e6f9ef89043befdb20c1989c905ebde18c501"
   integrity sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==
 
+node-releases@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
+  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
+
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -2523,6 +3810,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-node-version@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
@@ -2728,11 +4025,35 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
+  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
 regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
@@ -2747,6 +4068,25 @@ regexpp@^3.2.0:
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+  dependencies:
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+  dependencies:
+    jsesc "~0.5.0"
+
 replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
@@ -2770,7 +4110,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.1"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -2851,7 +4191,7 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-semver@^6.3.0:
+semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -2951,6 +4291,11 @@ source-map-js@^1.0.2:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 sparkles@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
@@ -2961,6 +4306,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -3117,6 +4467,24 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-parser@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
 swr@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
@@ -3273,6 +4641,37 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
+
+update-browserslist-db@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
@@ -3341,11 +4740,21 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"

From c4e73e73cbad2c665f151416ea30af31991e9176 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:17:37 +0100
Subject: [PATCH 14/25] Added accessibility description for mobile nav
 indicators

---
 components/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index cf394ff..f956af3 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -25,7 +25,7 @@ const PageNavbar = ({ mobile }: { mobile: number }) => {
           <NavSideMenuPanel active={+sideBarActive}>
             <NavBarMobile>
               {Links.links.map((item) => (
-                <NavLinkMobile active={path === item.href ? +true : +false} key={item.name} href={item.href}>
+              <NavLinkMobile active={path === item.href ? +true : +false} key={item.name} href={item.href}>
                   {item.name}
                 </NavLinkMobile>
               ))}
@@ -42,7 +42,7 @@ const PageNavbar = ({ mobile }: { mobile: number }) => {
         <NavWrapMobile>
           <NavIndicators>
             {Links.links.map((item) => (
-              <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
+              <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} aria-label={item.name}/>
             ))}
           </NavIndicators>
         </NavWrapMobile>

From 6c1d383c699c76660e216c4f9b9ca93e823e1383 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:18:26 +0100
Subject: [PATCH 15/25] removed 'extName' from pages, made icon and href
 optional

---
 interfaces/CardTypes.ts | 5 ++---
 public/data/pages.json  | 5 +----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/interfaces/CardTypes.ts b/interfaces/CardTypes.ts
index 59f0b2b..04a8604 100644
--- a/interfaces/CardTypes.ts
+++ b/interfaces/CardTypes.ts
@@ -13,12 +13,11 @@ export interface Game {
 
 export interface Service {
   name: string,
-  icon: string,
-  href: string,
+  icon?: string,
+  href?: string,
   desc: string,
   warn?: string,
   extLink?: string,
-  extName?: string,
   type: ServiceType,
   docker_container_name: string,
   location: ServiceLocation,
diff --git a/public/data/pages.json b/public/data/pages.json
index e8f6746..fe75a2f 100644
--- a/public/data/pages.json
+++ b/public/data/pages.json
@@ -6,8 +6,7 @@
       "href": "https://nextcloud.neshweb.net/",
       "desc": "Self-hosted Cloud Storage Service but longer and hopefully with wrap as well as some extra just to make sure",
       "warn": "Note: Registration requires approval",
-      "extLink": "https://qwant.com",
-      "extName": "Qwant",
+      "extLink": "https://nextcloud.com/",
       "type": "docker",
       "docker_container_name": "nextcloud",
       "location": "tower-0"
@@ -137,7 +136,6 @@
       "desc": "Debug Debug Debug",
       "warn": "Note: Debug",
       "extLink": "https://qwant.com",
-      "extName": "Qwant",
       "type": "docker",
       "docker_container_name": "matomo-web",
       "location": "tower-0"
@@ -147,7 +145,6 @@
       "desc": "Debug Debug Debug",
       "warn": "Note: Debug",
       "extLink": "https://qwant.com",
-      "extName": "Qwant",
       "type": "docker",
       "docker_container_name": "Debug",
       "location": "tower-0"

From 691a0ed881a03dd85b4fba60fc1d5c82ead13619 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:19:17 +0100
Subject: [PATCH 16/25] removed 'invertButton' from themes

---
 components/styles/content.tsx               | 12 ++--
 components/styles/navbar/desktop.tsx        | 21 ++----
 components/styles/navbar/mobile.tsx         | 74 ++++-----------------
 components/styles/themedropdown/desktop.tsx | 14 ++--
 public/data/themes.json                     |  3 -
 styled.d.ts                                 |  1 -
 6 files changed, 27 insertions(+), 98 deletions(-)

diff --git a/components/styles/content.tsx b/components/styles/content.tsx
index a47e1a5..c165129 100644
--- a/components/styles/content.tsx
+++ b/components/styles/content.tsx
@@ -95,15 +95,13 @@ export const PageCard = styled.div`
   ${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};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : 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};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
   }
 `;
 
@@ -146,14 +144,12 @@ export const OnlineStatus = styled.p<OnlinePropType>`
 
   ${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};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : 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};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
   }
 `;
 
diff --git a/components/styles/navbar/desktop.tsx b/components/styles/navbar/desktop.tsx
index b77b140..58baac8 100644
--- a/components/styles/navbar/desktop.tsx
+++ b/components/styles/navbar/desktop.tsx
@@ -24,15 +24,12 @@ export const NavBar = styled.nav`
 `
 
 export const NavLink = styled(Link) <ActivePropType>`
-  color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
-    ({ theme }) => theme.colors.primary};
+  color: ${props => ({ theme }) => props.active ? 
+    theme.colors.text ? 
+      theme.colors.text : theme.colors.secondary :
+    theme.colors.primary};
   
-  background-color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
+  background-color: ${props => ({ theme }) => theme.colors.background};
 
   padding: 2px 6px;
   border: 2px solid;
@@ -43,12 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
   transition: all 0.1s ease;
 
   &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
+    color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
   }
 `
\ No newline at end of file
diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx
index c1f0a39..2137fd9 100644
--- a/components/styles/navbar/mobile.tsx
+++ b/components/styles/navbar/mobile.tsx
@@ -87,12 +87,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
-        ret = theme.colors.secondary;
-      }
+      ret = theme.colors.secondary;
     }
     else {
       ret = theme.colors.primary;
@@ -102,12 +97,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   background-color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
-        ret = theme.colors.secondary;
-      }
-      else {
-        ret = theme.colors.background;
-      }
+      ret = theme.colors.secondary;
     }
     else {
       ret = theme.colors.background;
@@ -120,12 +110,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
   border-color: ${props => ({ theme }) => {
     let ret: string;
     if (props.active) {
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
-        ret = theme.colors.secondary;
-      }
+      ret = theme.colors.secondary;
     }
     else {
       ret = theme.colors.primary;
@@ -135,36 +120,15 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
 
   &:hover {
     color: ${({ theme }) => {
-    let ret: string;
-    if (theme.invertButtons) {
-      ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
-    }
-    else {
-      ret = theme.colors.secondary;
-    }
-    return ret;
+    return  theme.colors.secondary
   }};
 
     background-color: ${({ theme }) => {
-    let ret: string;
-    if (theme.invertButtons) {
-      ret = theme.colors.secondary;
-    }
-    else {
-      ret = theme.colors.background;
-    }
-    return ret;
+      return theme.colors.background
   }};
 
-  border-color: ${({ theme }) => {
-    let ret: string;
-      if (theme.invertButtons) {
-        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
-      }
-      else {
-        ret = theme.colors.secondary;
-      }
-    return ret;
+    border-color: ${({ theme }) => {
+      return theme.colors.secondary;
   }};
   }
 `
@@ -220,29 +184,15 @@ export const NavIndicator = styled(Link) <ActivePropType>`
   aspect-ratio: 1;
   width: 10px;
   border: 1px solid; 
-  border-color: ${ props => ({ theme }) => props.active ? 
-    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-    theme.colors.primary
-  };
+  border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary};
 
-  background-color: ${props => ({ theme }) => props.active ?
-    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-    theme.colors.background
-  };
+  background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background};
 
   &:hover {
-    border-color: ${ props => ({ theme }) =>
-      theme.invertButtons ? theme.colors.secondary : theme.colors.primary
-    };
+    border-color: ${({ theme }) => theme.colors.primary};
 
-    color: ${({ theme }) => theme.invertButtons ?
-      theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
-      theme.colors.primary
-    };
+    color: ${({ theme }) => theme.colors.primary};
 
-    background-color: ${({ theme }) => theme.invertButtons ?
-      theme.colors.secondary :
-      theme.colors.primary
-    };
+    background-color: ${({ theme }) => theme.colors.primary};
   }
 `
\ No newline at end of file
diff --git a/components/styles/themedropdown/desktop.tsx b/components/styles/themedropdown/desktop.tsx
index 239073a..91879bc 100644
--- a/components/styles/themedropdown/desktop.tsx
+++ b/components/styles/themedropdown/desktop.tsx
@@ -20,12 +20,12 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   border: 2px solid;
   border-radius: 5px;
   background-color: ${ props => props.focus ? 
-    ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
+    ({ theme }) => theme.colors.background : 
     ({ theme }) => theme.colors.background};
   padding: 2px 6px;
   cursor: pointer;
-  color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? 
-    theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : 
+  color: ${props => props.focus ? 
+    ({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary : 
     ({ theme }) => theme.colors.primary};
 
   transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
@@ -34,13 +34,9 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
   transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
 
   &:focus,:hover {
-    color: ${({ theme }) => theme.invertButtons ? 
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
+    color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
 
-    background-color: ${({ theme }) => theme.invertButtons ? 
-    theme.colors.secondary :
-    theme.colors.background};
+    background-color: ${({ theme }) => theme.colors.background};
   }
 
   border-bottom-left-radius: ${ props => props.show ? "0" : "" };
diff --git a/public/data/themes.json b/public/data/themes.json
index eeba534..0080308 100644
--- a/public/data/themes.json
+++ b/public/data/themes.json
@@ -53,13 +53,11 @@
       "themeId": 4,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
       "backgroundOffset": "60%",
-      "invertButtons": true,
       "colors": {
         "background": "#0008",
         "backgroundAlt": "#000d",
         "primary": "#ccc",
         "secondary": "#00C7C7",
-        "text": "#000",
         "online": "#00ff00",
         "loading": "#0063C7",
         "offline": "#ff0000"
@@ -69,7 +67,6 @@
       "themeName": "dev",
       "themeId": 5,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
-      "invertButtons": true,
       "colors": {
         "background": "#0000",
         "backgroundAlt": "#0000",
diff --git a/styled.d.ts b/styled.d.ts
index d774093..7755f3c 100644
--- a/styled.d.ts
+++ b/styled.d.ts
@@ -6,7 +6,6 @@ declare module 'styled-components' {
     themeId: number,
     backgroundImage?: string,
     backgroundOffset?: string,
-    invertButtons?: boolean,
     colors: {
       background: string,
       backgroundAlt?: string,

From f6258df5a2a2393dfbdc8a717aecbe3a108bd547 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:19:33 +0100
Subject: [PATCH 17/25] Added href check to services page since href is now
 optional

---
 pages/services.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/services.tsx b/pages/services.tsx
index 354cd33..dd11625 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -4,7 +4,7 @@ import { ReactElement } from 'react'
 import useSWR from 'swr';
 import ServiceList from '../public/data/pages.json';
 import { DockerInfo } from '../interfaces/DockerStatus';
-import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
 import useWindowSize from '../components/windowsize';
 import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import { ServiceCardDesktop } from '../components/styles/cards/desktop';
@@ -85,7 +85,7 @@ async function getStatus(entry: Service, containers: DockerInfo[]) {
   // Others to follow but low prio as this is currently the only location used
 
   // Type APP
-  if (entry.type === ServiceType.app) {
+  if (entry.type === ServiceType.app && entry.href) {
     await fetch(entry.href)
       .then((response) => {
         if (response.ok) {
@@ -126,10 +126,10 @@ async function getStatus(entry: Service, containers: DockerInfo[]) {
               default:
                 console.log("Container Status " + container.status + " has no case implemented");
                 entry.status = Status.offline;
-              }
-              found = true;
-              // cancel the for
-              break;
+            }
+            found = true;
+            // cancel the for
+            break;
           }
         }
         // If container name is not missing the container is set to offline

From de8f5e071d8e0968ac9a71ee3eacb43220883f36 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:19:56 +0100
Subject: [PATCH 18/25] Added "open" icon to cards, removed old code

---
 components/styles/cards/mobile.tsx | 226 ++---------------------------
 1 file changed, 11 insertions(+), 215 deletions(-)

diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index a744d0a..f984bb2 100644
--- a/components/styles/cards/mobile.tsx
+++ b/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;
-  margin-bottom: 2rem;
+  max-height: 12.5rem;
+  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 }) => {
-    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;
-  }};
+  background: transparent;
+  
   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;
 }
\ No newline at end of file

From 04fe3f0f4a393f2f93f53f465eb5e4348c44a94e Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 16 Mar 2023 22:20:05 +0100
Subject: [PATCH 19/25] Revamp of desktop cards

---
 components/styles/cards/desktop.tsx | 288 +++++++++++++++++++++++++---
 1 file changed, 259 insertions(+), 29 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 326e465..f836ff5 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -1,33 +1,263 @@
 import { Service } from '../../../interfaces/CardTypes';
-import styled from 'styled-components';
-import { CardLink, PageCard, CardStyleWrap, CardContentTitle, CardContentWarning, OnlineStatus } from '../content';
+import styled, { css, DefaultTheme } from 'styled-components';
+import Link from 'next/link';
+import Image from 'next/image';
+import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg'
 
-// Card Content Component for Services Page
-export const ServiceCardDesktop = ({ 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>
+// needed for Online Status checks
+interface OnlinePropType {
+  status: string;
+}
+
+const Card = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30rem;
+  max-width: 90%;
+  height: 12.5rem;
+  margin: 1rem;
+
+  // themeing
+  border-top: 0.25rem solid;
+  border-radius: 10px;
+
+  color: ${({ theme }) => theme.colors.primary};
+  border-color: ${({ theme }) => theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.background};
+
+
+  transition-property: max-height, margin-bottom;
+  transition-duration: 0.2s, 0s;
+  transition-delay: 0.2s, 0.2s;
+`
+
+// custom objects for CardTitle
+//#############################
+const CardHeaderWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-height: 3.5rem;
+  flex-grow: 0.8;
+`;
+
+const CardTitleText = styled.h2`
+  font-size: 1.2rem;
+  margin: 0.5rem 0;
+`;
+
+const CardTitleIcon = styled.div`
+  position: relative;
+  object-fit: contain;
+  margin-right: 0.4rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+`;
+
+
+const CardStatus = styled.p<OnlinePropType>`
+  font-size: 0.9rem;
+  padding: 0.1rem;
+  margin: 0.5rem;
+  margin-right: 1.5rem;
+  
+  border-radius: 5px;
+  border: 0;
+  border-bottom: 0.125rem solid;
+
+  background: transparent;
+  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;
+  }};
+`
+
+const CardTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  padding-left: 1rem;
+`
+
+// content visible when reduced
+const CardHeader = ({ content, href }: { content: Service, href: string }) => {
+  return (
+    <CardHeaderWrap>
+      <CardTitle>
+        {
+          content.icon ? (
+            <CardTitleIcon>
+              <Image alt="icon" src={content.icon} fill />
+            </CardTitleIcon>
+          ) : (<></>)
+        }
+        <CardTitleText>{content.name}</CardTitleText>
+      </CardTitle>
+      <CardStatus status={content.status}>{content.status}</CardStatus>
+    </CardHeaderWrap>
+  )
+}
+
+// custom objects for CardDescription
+//###################################
+
+// shared properties for all Description objects
+const CardDescriptionCommon = css`
+  text-align: left;
+  font-size: 0.9rem;
+  margin: 0.3rem;
+`
+
+// content visible when expanded
+const CardDescriptionWrap = styled.div`
+  ${CardDescriptionCommon}
+  padding: 0 1rem;
+  overflow: hidden; /* Hide scrollbars */
+  scrollbar-width: thin;
+  width: 100%;
+`
+
+const CardDescriptionExtended = styled.p`
+  ${CardDescriptionCommon}
+  margin: 0;
+  margin-bottom: 0.9rem;
+  width: 100%;
+`
+
+const CardDescriptionWarning = styled(CardDescriptionExtended)`
+  color: ${({ theme }) => theme.colors.offline};
+  font-weight: bold;
+`
+
+const CardDescription = ({ content }: { content: Service }) => {
+  return (
+    <CardDescriptionWrap>
+      <CardDescriptionExtended>
+        {content.desc}
+      </CardDescriptionExtended>
+      <CardDescriptionWarning>
+        {content.warn}
+      </CardDescriptionWarning>
+    </CardDescriptionWrap>
+  )
+}
+
+// custom objects for CardFooter
+//##############################
+
+const CardFooterWrap = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: row;
+  //flex-direction: row;
+  align-items: center;
+  justify-items: center;
+  width: 100%;
+  position: absolute;
+  bottom: 5%;
+`
+
+const CardLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: 5px;
+  border-left: 2px solid;
+  border-right: 2px solid;
+
+  transition-property: overflow-x;
+  transition-duration: 0.2s;
+
+  &:hover {
+    background-color: ${({theme}) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  transition-property: background-color;
+  transition-duration: 0.5s;
+`
+
+const OpenInNewTab = styled.div`
+  color: ${({ theme }) => theme.colors.primary};
+  object-fit: contain;
+  aspect-ratio: 1;
+  height: 1rem;
+  width: 1rem;
+  max-width: 0;
+  overflow: hidden;
+  visibility: hidden;
+
+  ${CardLink}:hover & {
+    margin-left: 0.3rem;
+    max-width: 1rem;
+    transition-delay: 0s, 0s;
+    visibility: visible;
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  transition-property: max-width, margin-left, visibility;
+  transition-duration: 0.5s, 0s, 0S;
+  transition-delay: 0s, 0.2s, 0.2s;
+`
+
+
+const CardFooter = ({ content, href }: { content: Service, href: string }) => {
+  return (
+    <CardFooterWrap>
+      {href ? (
+        <CardLink href={href}>
+          Open
+          <OpenInNewTab>
+            <OpenInNewTabIcon width="1rem" height="1rem" />
+          </OpenInNewTab>
+        </CardLink>
+      ) : (<></>)}
+      {content.extLink ? (
+      <CardLink href={content.extLink}>
+        Official Site
+        <OpenInNewTab>
+          <OpenInNewTabIcon width="1rem" height="1rem" />
+        </OpenInNewTab>
       </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;
+      ) : (<></>)}
+    </CardFooterWrap>
+  )
+}
+
+// exported Card Elements
+//#######################
+
+export const ServiceCardDesktop = ({ content }: { content: Service }) => {
+  return (
+    <Card>
+      <CardHeader content={content} href={content.href ? content.href : ""} />
+      <CardDescription content={content} />
+      <CardFooter content={content} href={content.href ? content.href : ""} />
+    </Card>
+  )
 }
\ No newline at end of file

From 99b60c4f06f66544fa77d7a414ad7ebbae623b73 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:08:50 +0100
Subject: [PATCH 20/25] Finished Desktop layout in this version

Also removed Matomo trackingfrom this branch
---
 components/layout.tsx               |  18 ----
 components/styles/cards/desktop.tsx | 154 ++++++++++++++++++++++------
 components/styles/generic.tsx       |   1 +
 components/styles/navbar/mobile.tsx |   1 +
 4 files changed, 125 insertions(+), 49 deletions(-)

diff --git a/components/layout.tsx b/components/layout.tsx
index 9205de4..5ba4488 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -15,24 +15,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           defer src='https://static.cloudflareinsights.com/beacon.min.js'
           data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
         </Script>
-        <Script id="matomo_analytics">
-          {`
-                var _paq = window._paq = window._paq || [];
-                /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-                _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-                _paq.push(["setCookieDomain", "www.neshweb.net"]);
-                _paq.push(["disableCookies"]);
-                _paq.push(['trackPageView']);
-                _paq.push(['enableLinkTracking']);
-                (function() {
-                  var u="//tracking.neshweb.net/";
-                  _paq.push(['setTrackerUrl', u+'matomo.php']);
-                  _paq.push(['setSiteId', '2']);
-                  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-                  g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-                })();
-              `}
-        </Script>
   
         <PageNavbar mobile={isMobile}/>
         <Main>
diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index f836ff5..054a462 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -9,7 +9,11 @@ interface OnlinePropType {
   status: string;
 }
 
-const Card = styled.div`
+interface BorderHelperType {
+  border_left: boolean;
+}
+
+const Card = styled.div<OnlinePropType>`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -24,7 +28,23 @@ const Card = styled.div`
   border-radius: 10px;
 
   color: ${({ theme }) => theme.colors.primary};
-  border-color: ${({ theme }) => theme.colors.primary};
+  border-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;
+  }};
   background-color: ${({ theme }) => theme.colors.background};
 
 
@@ -60,16 +80,16 @@ const CardTitleIcon = styled.div`
 
 
 const CardStatus = styled.p<OnlinePropType>`
-  font-size: 0.9rem;
-  padding: 0.1rem;
-  margin: 0.5rem;
-  margin-right: 1.5rem;
-  
-  border-radius: 5px;
-  border: 0;
-  border-bottom: 0.125rem solid;
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: -0.8rem;
+  left: 80%;
 
-  background: transparent;
+  font-size: 0.9rem;
+  padding: 0 0.2rem;
+  margin: 0;
+  
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -87,6 +107,36 @@ const CardStatus = styled.p<OnlinePropType>`
     }
     return ret;
   }};
+
+    border-radius: 0.5rem;
+    border: 0.125rem solid;
+
+    ${({ theme }) => {
+    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: ${theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
+        background-position-y: 0;
+      `;
+    }
+    else {
+      ret = css`
+        background-color: ${({ theme }) => theme.colors.background};
+      `;
+    }
+
+    return ret;
+  }};
 `
 
 const CardTitle = styled.div`
@@ -98,20 +148,49 @@ const CardTitle = styled.div`
   padding-left: 1rem;
 `
 
+const CardTitleLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  padding-left: 1rem;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+`
+
 // content visible when reduced
-const CardHeader = ({ content, href }: { content: Service, href: string }) => {
+const CardHeader = ({ content }: { content: Service }) => {
   return (
     <CardHeaderWrap>
-      <CardTitle>
-        {
-          content.icon ? (
-            <CardTitleIcon>
-              <Image alt="icon" src={content.icon} fill />
-            </CardTitleIcon>
-          ) : (<></>)
-        }
-        <CardTitleText>{content.name}</CardTitleText>
-      </CardTitle>
+      {
+        content.href ?
+          <CardTitleLink href={content.href}>
+            {
+              content.icon ? (
+                <CardTitleIcon>
+                  <Image alt="icon" src={content.icon} fill />
+                </CardTitleIcon>
+              ) : (<></>)
+            }
+            <CardTitleText>{content.name}</CardTitleText>
+            <OpenInNewTab>
+              <OpenInNewTabIcon width="1rem" height="1rem" />
+            </OpenInNewTab>
+          </CardTitleLink> :
+          <CardTitle>
+            {
+              content.icon ? (
+                <CardTitleIcon>
+                  <Image alt="icon" src={content.icon} fill />
+                </CardTitleIcon>
+              ) : (<></>)
+            }
+            <CardTitleText>{content.name}</CardTitleText>
+          </CardTitle>
+      }
       <CardStatus status={content.status}>{content.status}</CardStatus>
     </CardHeaderWrap>
   )
@@ -144,6 +223,7 @@ const CardDescriptionExtended = styled.p`
 `
 
 const CardDescriptionWarning = styled(CardDescriptionExtended)`
+  text-align: center;
   color: ${({ theme }) => theme.colors.offline};
   font-weight: bold;
 `
@@ -194,7 +274,7 @@ const CardLink = styled(Link)`
   transition-duration: 0.2s;
 
   &:hover {
-    background-color: ${({theme}) => theme.colors.background};
+    background-color: ${({ theme }) => theme.colors.background};
     color: ${({ theme }) => theme.colors.secondary};
   }
 
@@ -220,6 +300,18 @@ const OpenInNewTab = styled.div`
     color: ${({ theme }) => theme.colors.secondary};
   }
 
+  ${CardTitleLink} {
+    
+  }
+
+  ${CardTitleLink}:hover & {
+    margin-left: 0.3rem;
+    max-width: 1rem;
+    transition-delay: 0s, 0s;
+    visibility: visible;
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
   transition-property: max-width, margin-left, visibility;
   transition-duration: 0.5s, 0s, 0S;
   transition-delay: 0s, 0.2s, 0.2s;
@@ -238,12 +330,12 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
         </CardLink>
       ) : (<></>)}
       {content.extLink ? (
-      <CardLink href={content.extLink}>
-        Official Site
-        <OpenInNewTab>
-          <OpenInNewTabIcon width="1rem" height="1rem" />
-        </OpenInNewTab>
-      </CardLink>
+        <CardLink href={content.extLink}>
+          Official Site
+          <OpenInNewTab>
+            <OpenInNewTabIcon width="1rem" height="1rem" />
+          </OpenInNewTab>
+        </CardLink>
       ) : (<></>)}
     </CardFooterWrap>
   )
@@ -254,8 +346,8 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
 
 export const ServiceCardDesktop = ({ content }: { content: Service }) => {
   return (
-    <Card>
-      <CardHeader content={content} href={content.href ? content.href : ""} />
+    <Card status={content.status}>
+      <CardHeader content={content} />
       <CardDescription content={content} />
       <CardFooter content={content} href={content.href ? content.href : ""} />
     </Card>
diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx
index e8354de..406f35f 100644
--- a/components/styles/generic.tsx
+++ b/components/styles/generic.tsx
@@ -19,6 +19,7 @@ export const Page = styled.div<MobilePropType>`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%" : ""};
+  background-position-y: 0;
 `
 
 export const Main = styled.main`
diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx
index 2137fd9..8dd9bc5 100644
--- a/components/styles/navbar/mobile.tsx
+++ b/components/styles/navbar/mobile.tsx
@@ -169,6 +169,7 @@ export const NavIndicators = styled.nav`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
+  background-position-y: 0;
   width: 100%;
   display: flex;
   flex: 1;

From 2ff6039acfb8c57410493401e3b298fb33326458 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:16:39 +0100
Subject: [PATCH 21/25] SVG cannot be sized using rem

---
 components/styles/cards/desktop.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 054a462..91e4667 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -177,7 +177,7 @@ const CardHeader = ({ content }: { content: Service }) => {
             }
             <CardTitleText>{content.name}</CardTitleText>
             <OpenInNewTab>
-              <OpenInNewTabIcon width="1rem" height="1rem" />
+              <OpenInNewTabIcon width="16px" height="16px" />
             </OpenInNewTab>
           </CardTitleLink> :
           <CardTitle>
@@ -300,10 +300,6 @@ const OpenInNewTab = styled.div`
     color: ${({ theme }) => theme.colors.secondary};
   }
 
-  ${CardTitleLink} {
-    
-  }
-
   ${CardTitleLink}:hover & {
     margin-left: 0.3rem;
     max-width: 1rem;
@@ -325,7 +321,7 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
         <CardLink href={href}>
           Open
           <OpenInNewTab>
-            <OpenInNewTabIcon width="1rem" height="1rem" />
+            <OpenInNewTabIcon width="16px" height="16px" />
           </OpenInNewTab>
         </CardLink>
       ) : (<></>)}
@@ -333,7 +329,7 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
         <CardLink href={content.extLink}>
           Official Site
           <OpenInNewTab>
-            <OpenInNewTabIcon width="1rem" height="1rem" />
+            <OpenInNewTabIcon width="16px" height="16px" />
           </OpenInNewTab>
         </CardLink>
       ) : (<></>)}

From 15aa9a163ab28cc95edc544c53b3d560fec2290a Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:19:42 +0100
Subject: [PATCH 22/25] Added expected size to next/image tags

---
 components/styles/cards/desktop.tsx | 4 ++--
 components/styles/cards/mobile.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 91e4667..6ca2ed7 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -171,7 +171,7 @@ const CardHeader = ({ content }: { content: Service }) => {
             {
               content.icon ? (
                 <CardTitleIcon>
-                  <Image alt="icon" src={content.icon} fill />
+                  <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
                 </CardTitleIcon>
               ) : (<></>)
             }
@@ -184,7 +184,7 @@ const CardHeader = ({ content }: { content: Service }) => {
             {
               content.icon ? (
                 <CardTitleIcon>
-                  <Image alt="icon" src={content.icon} fill />
+                  <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
                 </CardTitleIcon>
               ) : (<></>)
             }
diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx
index f984bb2..76715f7 100644
--- a/components/styles/cards/mobile.tsx
+++ b/components/styles/cards/mobile.tsx
@@ -131,7 +131,7 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
           {
             content.icon ? (
               <CardTitleIcon>
-                <Image alt="icon" src={content.icon} fill />
+                <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
               </CardTitleIcon>
             ) : (<></>)
           }
@@ -154,7 +154,7 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
           {
             content.icon ? (
               <CardTitleIcon>
-                <Image alt="icon" src={content.icon} fill />
+                <Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
               </CardTitleIcon>
             ) : (<></>)
           }

From 4b70f4892c8bfcec6a61ced7f3477241dedf3969 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:21:02 +0100
Subject: [PATCH 23/25] Removed Cloudflare tracking

---
 components/layout.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components/layout.tsx b/components/layout.tsx
index 5ba4488..a27a162 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -11,11 +11,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   if(isMobile) {
     ret = (
       <Page mobile={isMobile}>
-        <Script id="matomo_analytics"
-          defer src='https://static.cloudflareinsights.com/beacon.min.js'
-          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
-        </Script>
-  
         <PageNavbar mobile={isMobile}/>
         <Main>
           {children}
@@ -26,11 +21,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   else {
     ret = (
       <Page>
-        <Script id="matomo_analytics"
-          defer src='https://static.cloudflareinsights.com/beacon.min.js'
-          data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
-        </Script>
-  
         <PageNavbar mobile={isMobile}/>
         <Main>
           {children}

From 9a6db5128a919bafacf66a584891d548cae7d10d Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:26:40 +0100
Subject: [PATCH 24/25] Undid changes to Service Status

---
 components/styles/cards/desktop.tsx | 40 +++++------------------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 6ca2ed7..182bda0 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -82,13 +82,11 @@ const CardTitleIcon = styled.div`
 const CardStatus = styled.p<OnlinePropType>`
   display: flex;
   flex-direction: row;
-  position: absolute;
-  top: -0.8rem;
-  left: 80%;
 
   font-size: 0.9rem;
-  padding: 0 0.2rem;
-  margin: 0;
+  padding: 0.1rem 0.3rem;
+  margin: 0.5rem;
+  margin-right: 1.5rem;
   
   color: ${props => {
     let ret;
@@ -108,35 +106,11 @@ const CardStatus = styled.p<OnlinePropType>`
     return ret;
   }};
 
-    border-radius: 0.5rem;
-    border: 0.125rem solid;
+  border-radius: 0.5rem;
+  border: 0;
+  border-bottom: 0.125rem solid;
 
-    ${({ theme }) => {
-    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: ${theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
-        background-position-y: 0;
-      `;
-    }
-    else {
-      ret = css`
-        background-color: ${({ theme }) => theme.colors.background};
-      `;
-    }
-
-    return ret;
-  }};
+  background: transparent;
 `
 
 const CardTitle = styled.div`

From e8245d41b521e219261ba33a9433cd8d23e5eac0 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Fri, 17 Mar 2023 00:33:13 +0100
Subject: [PATCH 25/25] Changed Card background to Alt if available for better
 visibility

---
 components/styles/cards/desktop.tsx | 2 +-
 public/data/themes.json             | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx
index 182bda0..784f87f 100644
--- a/components/styles/cards/desktop.tsx
+++ b/components/styles/cards/desktop.tsx
@@ -45,7 +45,7 @@ const Card = styled.div<OnlinePropType>`
     }
     return ret;
   }};
-  background-color: ${({ theme }) => theme.colors.background};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
 
 
   transition-property: max-height, margin-bottom;
diff --git a/public/data/themes.json b/public/data/themes.json
index 0080308..ed306a4 100644
--- a/public/data/themes.json
+++ b/public/data/themes.json
@@ -17,6 +17,7 @@
       "themeId": 1,
       "colors": {
         "background": "#161616",
+        "backgroundAlt": "#000000",
         "primary": "#00AAFF",
         "secondary": "#FF5500",
         "online": "#2BFF00",
@@ -29,6 +30,7 @@
       "themeId": 2,
       "colors": {
         "background": "#000000",
+        "backgroundAlt": "#161616",
         "primary": "#00AAFF",
         "secondary": "#FF5500",
         "online": "#2BFF00",
@@ -41,6 +43,7 @@
       "themeId": 3,
       "colors": {
         "background": "#000000",
+        "backgroundAlt": "#161616",
         "primary": "#886aff",
         "secondary": "#E1FF6A",
         "online": "#00ff00",
@@ -55,7 +58,6 @@
       "backgroundOffset": "60%",
       "colors": {
         "background": "#0008",
-        "backgroundAlt": "#000d",
         "primary": "#ccc",
         "secondary": "#00C7C7",
         "online": "#00ff00",