Several changes to cards

Cards are now bigger and do not contain an expand feature

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';

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>
     }