feat: code and UI alignment to the design system's new version (#94)

* feat: code and UI alignment to the design system's new version

Co-authored-by: Giuliano Caregnato <[email protected]>

package.json

@@ -101,8 +101,8 @@
 		"@fontsource/roboto": "^4.5.7",
 		"@sentry/browser": "^6.17.7",
 		"@tinymce/tinymce-react": "^3.13.0",
-		"@zextras/carbonio-design-system": "^0.3.10",
-		"@zextras/carbonio-ui-preview": "^0.1.5",
+		"@zextras/carbonio-design-system": "^0.4.0",
+		"@zextras/carbonio-ui-preview": "^0.2.0",
 		"darkreader": "4.9.46",
 		"history": "^5.2.0",
 		"i18next": "21.6.10",

src/globals.d.ts

@@ -35,7 +35,7 @@ type cliSettingsNamespace = {
  */
 declare const devUtils: devUtilsNamespace | undefined;
 declare const cliSettings: cliSettingsNamespace | undefined;
-declare module '@zextras/carbonio-design-system';
+// declare module '@zextras/carbonio-design-system';
 declare module 'tinymce';
 declare module '*.svg';
 declare module '*.mp3';

src/reporting/feedback.tsx

@@ -15,12 +15,14 @@ import React, {
 } from 'react';
 import {
 	Text,
-	Button,
+	ButtonOld as Button,
 	Select,
 	Container,
 	Row,
 	Icon,
-	SnackbarManagerContext
+	SnackbarManagerContext,
+	ContainerProps,
+	SelectItem
 } from '@zextras/carbonio-design-system';
 import { Severity, Event } from '@sentry/browser';
 import { filter, find, map } from 'lodash';
@@ -51,7 +53,7 @@ const TextArea = styled.textarea<{ size?: string }>`
 
 const TextContainer = styled(Container)`
 	text-align: justify;
-	align-items: left;
+	align-items: flex-start;
 	width: 80%;
 `;
 
@@ -74,17 +76,23 @@ const TAContainer = styled(Container)`
 	}
 `;
 
-const SubHeadingText = styled(Text)`
+const SubHeadingText = styled(Text)<{ lineHeight?: string }>`
 	border-radius: 2px 2px 0 0;
 	line-height: 21px;
 	font-size: 14px;
 	font-weight: 300;
 	margin-top: 10px;
-	line-height: ${(props): string => props.lineHeight};
+	line-height: ${({ lineHeight }): string => lineHeight ?? 'normal'};
 `;
 
-const LabelContainer = styled(Container)`
-	border-bottom: 1px solid ${(props): string => (props.disabled ? 'red' : '#cfd5dc')};
+interface LabelContainerProps extends ContainerProps {
+	disabled: boolean;
+}
+
+const LabelContainer = styled(Container)<LabelContainerProps>`
+	border-bottom: 1px solid
+		${({ theme, disabled }): string =>
+			disabled ? theme.palette.error.regular : theme.palette.gray2.regular};
 `;
 
 const emptyEvent: Event = {
@@ -128,10 +136,11 @@ const getTopics = (t: TFunction): Array<{ label: string; value: string }> => [
 
 const ModuleLabelFactory: FC<{
 	selected: Array<{ label: string; value: string }>;
-	label: string;
+	label?: string;
 	open: boolean;
 	focus: boolean;
-}> = ({ selected, label, open, focus }) => (
+	disabled: boolean;
+}> = ({ selected, label, open, focus, disabled }) => (
 	<LabelContainer
 		orientation="horizontal"
 		width="fill"
@@ -142,6 +151,7 @@ const ModuleLabelFactory: FC<{
 		padding={{
 			all: 'small'
 		}}
+		disabled={disabled}
 	>
 		<Row takeAvailableSpace mainAlignment="unset">
 			<Text size="medium" color={open || focus ? 'primary' : 'secondary'}>
@@ -309,7 +319,7 @@ const Feedback: FC = () => {
 		<Container padding={{ all: 'large' }} mainAlignment="space-around">
 			<Container orientation="horizontal" height="fit">
 				<TextContainer mainAlignment="flex-start" crossAlignment="flex-start">
-					<Text weight="bold" size="18px">
+					<Text weight="bold" size="large">
 						{t('feedback.report_something', 'Do you want to report something?')}
 					</Text>
 					<SubHeadingText overflow="break-word" lineHeight="21px">
@@ -343,27 +353,30 @@ const Feedback: FC = () => {
 			>
 				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
 					<Row padding={{ vertical: 'large' }}>
-						<Text weight="bold" size="14px">
+						<Text weight="bold" size="small">
 							Module
 						</Text>
 					</Row>
 					<Select
 						label={t('feedback.select_a_module', 'Select a module')}
 						items={appItems}
+						defaultSelection={{ label: '', value: '' }}
 						onChange={onAppSelect}
 						LabelFactory={ModuleLabelFactory}
 					/>
 				</Container>
 				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
 					<Row padding={{ vertical: 'large' }}>
-						<Text weight="bold" size="14px">
+						<Text weight="bold" size="small">
 							Topic
 						</Text>
 					</Row>
 					<Select
 						label={t('feedback.select_a_topic', 'Select a topic')}
-						selection={find(topics, ['value', event.extra?.topic])}
 						items={topics}
+						defaultSelection={
+							find(topics, ['value', event.extra?.topic]) ?? { label: '', value: '' }
+						}
 						onChange={onTopicSelect}
 						LabelFactory={LabelFactory}
 						multiple={false}

src/search/module-selector.tsx

@@ -11,10 +11,11 @@ import { useSearchStore } from './search-store';
 import { SEARCH_APP_ID } from '../constants';
 import { useCurrentRoute, pushHistory } from '../history/hooks';
 
-const SelectorContainer = styled(Container)<{ open: boolean }>`
+const SelectorContainer = styled(Container)<{ open?: boolean }>`
 	border-right: 1px solid ${({ theme }): string => theme.palette.gray4.regular};
 	cursor: pointer;
 	background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].regular};
+
 	&:hover {
 		background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].hover};
 	}
@@ -67,7 +68,7 @@ const ModuleSelectorComponent: FC<{ app: string | undefined }> = ({ app }) => {
 				orientation="horizontal"
 				height={42}
 				width="fit"
-				minWidth="150px"
+				minWidth={150}
 				crossAlignment="center"
 				mainAlignment="space-between"
 				borderRadius="half"

src/search/search-app-view.tsx

@@ -28,7 +28,7 @@ const useDisableSearch = (): [boolean, Function] =>
 const ResultsHeader: FC<{ label: string }> = ({ label }) => {
 	const [t] = useTranslation();
 	const [query, updateQuery] = useQuery();
-	const [disabled, setDisabled] = useDisableSearch();
+	const [, setDisabled] = useDisableSearch();
 
 	const resetQuery = useCallback(() => {
 		updateQuery([]);
@@ -62,7 +62,7 @@ const ResultsHeader: FC<{ label: string }> = ({ label }) => {
 							label={t('label.clear_search_query', 'CLEAR SEARCH')}
 							icon="CloseOutline"
 							color="primary"
-							size="large"
+							width="fill"
 							type="ghost"
 							onClick={resetQuery}
 						/>