From ec6444b9b25a13da22be44179b8643590da2b23e Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Mon, 20 Jan 2025 11:42:58 +0100 Subject: [PATCH 1/3] change: badge UI --- src/web/components/badge/__tests__/badge.jsx | 6 ++---- src/web/components/badge/badge.jsx | 17 ++++++++--------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/web/components/badge/__tests__/badge.jsx b/src/web/components/badge/__tests__/badge.jsx index 58998e207f..b085c5df53 100644 --- a/src/web/components/badge/__tests__/badge.jsx +++ b/src/web/components/badge/__tests__/badge.jsx @@ -3,14 +3,12 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ - import {describe, test, expect} from '@gsa/testing'; import ReportIcon from 'web/components/icon/reporticon'; import {render} from 'web/utils/testing'; import Badge from '../badge'; - describe('Badge tests', () => { test('should render badge', () => { const {element} = render( @@ -46,13 +44,13 @@ describe('Badge tests', () => { const {getByTestId} = render(); const icon = getByTestId('badge-icon'); - expect(icon).toHaveStyleRule('bottom', '-8px'); + expect(icon).toHaveStyleRule('bottom', '0'); }); test('should not be dynamic', () => { const {getByTestId} = render(); const icon = getByTestId('badge-icon'); - expect(icon).toHaveStyleRule('right', '-8px'); + expect(icon).toHaveStyleRule('right', '0'); }); }); diff --git a/src/web/components/badge/badge.jsx b/src/web/components/badge/badge.jsx index 412d6bc710..92abbd65c7 100644 --- a/src/web/components/badge/badge.jsx +++ b/src/web/components/badge/badge.jsx @@ -18,23 +18,22 @@ const BadgeContainer = styled.div` BadgeContainer.displayName = 'BadgeContainer'; const BadgeIcon = styled.span` - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: inline-flex; justify-content: center; - align-content: center; align-items: center; position: absolute; - font-size: 10px; + font-size: 0.75em; font-weight: bold; - border-radius: 10px; + border-radius: 50%; min-width: 10px; - padding: 3px 5px; + padding: 0.25em 0.5em; z-index: ${Theme.Layers.higher}; background-color: ${({$backgroundColor = Theme.green}) => $backgroundColor}; color: ${({$color = Theme.white}) => $color}; - ${({$position = 'bottom'}) => $position}: ${({radius = 8}) => -radius}px; - right: ${({$margin = 8}) => -$margin}px; + top: ${({$position}) => ($position === 'top' ? '0' : 'auto')}; + bottom: ${({$position}) => ($position === 'bottom' ? '0' : 'auto')}; + right: 0; + transform: translate(80%, -50%); `; BadgeIcon.displayName = 'BadgeIcon'; From 60151269200c4318d2632dd5ed1023b8dded430a Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Mon, 20 Jan 2025 11:45:08 +0100 Subject: [PATCH 2/3] change: footer link to https --- src/web/components/structure/footer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web/components/structure/footer.jsx b/src/web/components/structure/footer.jsx index 56d8355036..154d1a0026 100644 --- a/src/web/components/structure/footer.jsx +++ b/src/web/components/structure/footer.jsx @@ -28,7 +28,7 @@ const GreenboneFooter = () => {