fix: update Badge usage

Refs: SHELL-233 (#478)
zextras · Aug 12, 2024 · 6039cb9 · 6039cb9
1 parent a62652d
commit 6039cb9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 54 deletions.
diff --git a/src/settings/components/general-settings/module-version-settings.tsx b/src/settings/components/general-settings/module-version-settings.tsx
@@ -13,8 +13,7 @@ import {
 	Divider,
 	FormSubSection,
 	Text,
-	Tooltip,
-	useTheme
+	Tooltip
 } from '@zextras/carbonio-design-system';
 import { map } from 'lodash';
 
@@ -27,7 +26,6 @@ import { versionsSubSection } from '../../general-settings-sub-sections';
 const ModuleVersionSettings = (): React.JSX.Element => {
 	const apps = useAppList();
 	const t = getT();
-	const theme = useTheme();
 
 	const copyToClipboard = useCallback<NonNullable<TextProps['onClick']>>((e) => {
 		e.preventDefault();
@@ -43,42 +41,34 @@ const ModuleVersionSettings = (): React.JSX.Element => {
 	const sectionTitle = useMemo(() => versionsSubSection(t), [t]);
 
 	return (
-		<>
-			<FormSubSection
-				label={sectionTitle.label}
-				minWidth="calc(min(100%, 32rem))"
-				width="50%"
-				id={sectionTitle.id}
-			>
-				{map(filteredList, (app: CarbonioModule) => (
-					<Container key={app.name} padding={{ horizontal: 'large', vertical: 'small' }}>
-						<Container orientation="horizontal" mainAlignment="space-between">
-							<Text>{app.display}</Text>
-							<Tooltip placement="top" label={t('label.click_to_copy', 'Click to copy')}>
-								<Text style={{ cursor: 'pointer' }} onClick={copyToClipboard}>
-									Version: {app.version}
-								</Text>
-							</Tooltip>
-						</Container>
-						<Container
-							orientation="horizontal"
-							mainAlignment="space-between"
-							padding={{ top: 'extrasmall', bottom: 'medium' }}
-						>
-							<Text color="secondary">{app.description}</Text>
-							<Badge
-								value="Active"
-								style={{
-									backgroundColor: theme.palette.success.regular,
-									color: theme.palette.gray6.regular
-								}}
-							/>
-						</Container>
-						<Divider color="gray2" />
+		<FormSubSection
+			label={sectionTitle.label}
+			minWidth="calc(min(100%, 32rem))"
+			width="50%"
+			id={sectionTitle.id}
+		>
+			{map(filteredList, (app: CarbonioModule) => (
+				<Container key={app.name} padding={{ horizontal: 'large', vertical: 'small' }}>
+					<Container orientation="horizontal" mainAlignment="space-between">
+						<Text>{app.display}</Text>
+						<Tooltip placement="top" label={t('label.click_to_copy', 'Click to copy')}>
+							<Text style={{ cursor: 'pointer' }} onClick={copyToClipboard}>
+								Version: {app.version}
+							</Text>
+						</Tooltip>
 					</Container>
-				))}
-			</FormSubSection>
-		</>
+					<Container
+						orientation="horizontal"
+						mainAlignment="space-between"
+						padding={{ top: 'extrasmall', bottom: 'medium' }}
+					>
+						<Text color="secondary">{app.description}</Text>
+						<Badge value="Active" color={'gray6'} backgroundColor={'success'} />
+					</Container>
+					<Divider color="gray2" />
+				</Container>
+			))}
+		</FormSubSection>
 	);
 };
 

diff --git a/src/shell/badge-wrap.tsx b/src/shell/badge-wrap.tsx
@@ -7,24 +7,25 @@ import type { FC } from 'react';
 import React, { forwardRef } from 'react';
 
 import { Container, Badge } from '@zextras/carbonio-design-system';
-import type { DefaultTheme } from 'styled-components';
 import styled from 'styled-components';
 
 import type { BadgeInfo } from '../types/apps';
 
-const MiniBadge = styled(Badge)<{ $color?: keyof DefaultTheme['palette'] }>`
+const MiniBadge = styled(Badge)`
 	position: absolute;
 	bottom: 25%;
 	right: 25%;
 	transform: translate(30%, 30%);
-	min-width: 0.75rem;
-	min-height: 0.75rem;
+	min-width: 1rem;
+	min-height: 1rem;
 	pointer-events: none;
 	z-index: 99;
-	font-size: 0.625rem;
-	background: ${({ $color, theme }): string => theme.palette[$color ?? 'primary'].regular};
 	padding: 0.125rem;
-	color: ${({ theme }): string => theme.palette.gray6.regular};
+
+	& > div {
+		font-size: 0.625rem;
+		line-height: normal;
+	}
 `;
 
 const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef<HTMLDivElement, { badge: BadgeInfo }>(
@@ -33,6 +34,8 @@ const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef<HTMLDivElement, { badge:
 			<Container width={'3rem'} height={'3rem'} style={{ position: 'relative' }} ref={ref}>
 				{badge.show && (
 					<MiniBadge
+						color={'gray6'}
+						backgroundColor={badge.color ?? 'primary'}
 						data-testid={'badge-counter'}
 						value={badge.showCount ? badge.count ?? 0 : ''}
 					/>

diff --git a/src/shell/shell-primary-bar.tsx b/src/shell/shell-primary-bar.tsx
@@ -6,8 +6,8 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 
-import { Container, IconButton, Row, Tooltip } from '@zextras/carbonio-design-system';
-import { map, isEmpty, trim, filter, sortBy, noop } from 'lodash';
+import { Button, Container, Row, Tooltip } from '@zextras/carbonio-design-system';
+import { map, isEmpty, trim, filter, sortBy } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -20,6 +20,10 @@ import { minimizeBoards, reopenBoards, useBoardStore } from '../store/boards';
 import type { PrimaryAccessoryView, PrimaryBarView } from '../types/apps';
 import { checkRoute } from '../utility-bar/utils';
 
+function noop(): void {
+	return undefined;
+}
+
 const PrimaryBarContainer = styled(Container)`
 	border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
 	z-index: ${BOARD_CONTAINER_ZINDEX + 1};
@@ -30,8 +34,8 @@ const ToggleBoardIcon = (): React.JSX.Element | null => {
 
 	return isEmpty(boards) ? null : (
 		<Container width={'3rem'} height={'3rem'}>
-			<IconButton
-				iconColor="primary"
+			<Button
+				labelColor="primary"
 				icon={minimized ? 'BoardOpen' : 'BoardCollapse'}
 				onClick={minimized ? reopenBoards : minimizeBoards}
 				size="large"
@@ -54,13 +58,12 @@ const PrimaryBarElement = ({ view, active, onClick }: PrimaryBarItemProps): Reac
 	<Tooltip label={view.label} placement="right" key={view.id}>
 		<BadgeWrap badge={view.badge}>
 			{typeof view.component === 'string' ? (
-				<IconButton
+				<Button
 					icon={view.component}
 					backgroundColor={active ? 'gray4' : 'gray6'}
-					iconColor={active ? 'primary' : 'text'}
+					labelColor={active ? 'primary' : 'text'}
 					onClick={onClick}
 					size="large"
-					data-isselected={active}
 				/>
 			) : (
 				<view.component active={active} />
@@ -73,10 +76,10 @@ const PrimaryBarAccessoryElement = ({ view }: PrimaryBarAccessoryItemProps): Rea
 	<Tooltip label={view.label} placement="right" key={view.id}>
 		<AppContextProvider key={view.id} pkg={view.app}>
 			{typeof view.component === 'string' ? (
-				<IconButton
+				<Button
 					icon={view.component}
 					backgroundColor="gray6"
-					iconColor="text"
+					labelColor="text"
 					onClick={view.onClick ?? noop}
 					size="large"
 				/>