From 1d5a4538d4c4672d27b124e482603076c1824153 Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Fri, 15 Nov 2024 10:23:59 +0100
Subject: [PATCH] change: spinner and footer

---
 src/web/components/loading/loading.jsx  | 27 +++----------------------
 src/web/components/structure/footer.jsx |  2 +-
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/web/components/loading/loading.jsx b/src/web/components/loading/loading.jsx
index 3e353ee9a6..e7b2b36bb3 100644
--- a/src/web/components/loading/loading.jsx
+++ b/src/web/components/loading/loading.jsx
@@ -5,32 +5,11 @@
 
 import React from 'react';
 
-import styled, {keyframes} from 'styled-components';
+import styled from 'styled-components';
 
 import Layout from 'web/components/layout/layout';
 
-import GbLogo from 'web/components/icon/svg/greenbone.svg?url';
-
-const Loader = styled.div`
-  width: 80px;
-  height: 80px;
-  margin: 40px auto;
-  background-image: url(${GbLogo});
-  background-size: 90%;
-  background-position: center;
-  background-repeat: no-repeat;
-  animation: ${keyframes({
-      '0%, 100%': {
-        transform: 'scale(0.9)',
-        opacity: 0.2,
-      },
-      '50%': {
-        transform: 'scale(1.0)',
-        opacity: 1,
-      },
-    })}
-    2s infinite ease-in-out;
-`;
+import {Spinner} from '@greenbone/opensight-ui-components-mantinev7';
 
 const StyledLayout = styled(Layout)`
   width: 100%;
@@ -38,7 +17,7 @@ const StyledLayout = styled(Layout)`
 
 const Loading = () => (
   <StyledLayout data-testid="loading" align={['center', 'center']}>
-    <Loader />
+    <Spinner />
   </StyledLayout>
 );
 
diff --git a/src/web/components/structure/footer.jsx b/src/web/components/structure/footer.jsx
index e3c77463bc..2a2406bd06 100644
--- a/src/web/components/structure/footer.jsx
+++ b/src/web/components/structure/footer.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import styled from 'styled-components';
@@ -12,6 +11,7 @@ import Theme from 'web/utils/theme';
 
 const Link = styled.a`
   color: ${Theme.mediumGray};
+  font-size: 10px;
   &:link {
     color: ${Theme.mediumGray};
   }