fix: minor fixes

claranet-it · Sep 18, 2024 · 63da85a · 63da85a
1 parent 8a45ccc
commit 63da85a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 35 deletions.
diff --git a/src/components/form/Multiselect.tsx b/src/components/form/Multiselect.tsx
@@ -9,6 +9,7 @@ import {
 } from '@builder.io/qwik';
 import { initFlowbite } from 'flowbite';
 import { t } from '../../locale/labels';
+import { getIcon } from '../icons';
 
 interface multiSelectInterface {
 	id: string;
@@ -61,7 +62,7 @@ export const Multiselect = component$<multiSelectInterface>(
 			if (value.value.length === options.value.length) {
 				value.value = [];
 			} else {
-				value.value = [...options.value];
+				value.value = options.value;
 			}
 		});
 
@@ -119,21 +120,7 @@ export const Multiselect = component$<multiSelectInterface>(
 					<span class={['truncate', value.value.length === 0 && 'text-darkgray-500']}>
 						{value.value.join(', ') || placeholder}
 					</span>
-					<svg
-						class='text-darkgray-700 m-[5px] h-2.5 w-2.5'
-						aria-hidden='true'
-						xmlns='http://www.w3.org/2000/svg'
-						fill='none'
-						viewBox='0 0 10 6'
-					>
-						<path
-							stroke='currentColor'
-							stroke-linecap='round'
-							stroke-linejoin='round'
-							stroke-width='2'
-							d='m1 1 4 4 4-4'
-						/>
-					</svg>
+					{getIcon('Downarrow')}
 				</button>
 
 				{invalid && <p class='mt-1 text-xs text-red-500'>{t('REQUIRED_FIELD_LABEL')}</p>}
@@ -150,7 +137,7 @@ export const Multiselect = component$<multiSelectInterface>(
 								id='checkbox-item-1'
 								type='checkbox'
 								value=''
-								class='h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700'
+								class='h-4 w-4 rounded border-gray-300 bg-gray-100 text-clara-red focus:ring-2 focus:ring-clara-red'
 							/>
 							<label
 								for='checkbox-item-1'
@@ -170,7 +157,7 @@ export const Multiselect = component$<multiSelectInterface>(
 										id={'checkbox-item-' + index}
 										type='checkbox'
 										value=''
-										class='h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700'
+										class='h-4 w-4 rounded border-gray-300 bg-gray-100 text-clara-red focus:ring-2 focus:ring-clara-red'
 									/>
 									<label
 										for={'checkbox-item-' + index}

diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
@@ -9,6 +9,7 @@ import {
 } from '@builder.io/qwik';
 import { initFlowbite } from 'flowbite';
 import { t } from '../../locale/labels';
+import { getIcon } from '../icons';
 
 interface selectInterface {
 	id: string;
@@ -88,21 +89,7 @@ export const Select = component$<selectInterface>(
 					<span class={['truncate', !value.value && 'text-darkgray-500']}>
 						{value.value || placeholder}
 					</span>
-					<svg
-						class='text-darkgray-700 m-[5px] h-2.5 w-2.5'
-						aria-hidden='true'
-						xmlns='http://www.w3.org/2000/svg'
-						fill='none'
-						viewBox='0 0 10 6'
-					>
-						<path
-							stroke='currentColor'
-							stroke-linecap='round'
-							stroke-linejoin='round'
-							stroke-width='2'
-							d='m1 1 4 4 4-4'
-						/>
-					</svg>
+					{getIcon('Downarrow')}
 				</button>
 
 				{invalid && <p class='mt-1 text-xs text-red-500'>{t('REQUIRED_FIELD_LABEL')}</p>}

diff --git a/src/components/icons/DownArrow.tsx b/src/components/icons/DownArrow.tsx
@@ -0,0 +1,21 @@
+import { component$ } from '@builder.io/qwik';
+
+export const DownArrow = component$(() => {
+	return (
+		<svg
+			class='text-darkgray-700 m-[5px] h-2.5 w-2.5'
+			aria-hidden='true'
+			xmlns='http://www.w3.org/2000/svg'
+			fill='none'
+			viewBox='0 0 10 6'
+		>
+			<path
+				stroke='currentColor'
+				stroke-linecap='round'
+				stroke-linejoin='round'
+				stroke-width='2'
+				d='m1 1 4 4 4-4'
+			/>
+		</svg>
+	);
+});
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -13,6 +13,7 @@ import { Claranet } from './Claranet';
 import { Clear } from './Clear';
 import { Close } from './Close';
 import { Design } from './Design';
+import { DownArrow } from './DownArrow';
 import { Downalod } from './Download';
 import { Edit } from './Edit';
 import { EditWhite } from './EditWhite';
@@ -125,6 +126,8 @@ export const getIcon = (skill: string) => {
 			return <Info />;
 		case 'Download':
 			return <Downalod />;
+		case 'Downarrow':
+			return <DownArrow />;
 		default:
 			return <AWS />;
 	}

diff --git a/src/components/report/GropuByList.tsx b/src/components/report/GropuByList.tsx
@@ -63,7 +63,7 @@ export const GroupByList = component$<GroupByListProps>(({ data, from, to }) =>
 				<div class='flex flex-none flex-row items-center gap-2'>
 					<Button variant={'link'} onClick$={handlerDownloadCSV}>
 						<span class='inline-flex items-start gap-1'>
-							{getIcon('Downlaod')} {t('REPORT_DOWNLOAD_CSV_LABEL')}
+							{getIcon('Download')} {t('REPORT_DOWNLOAD_CSV_LABEL')}
 						</span>
 					</Button>
 				</div>

diff --git a/src/components/report/ReportHeader.tsx b/src/components/report/ReportHeader.tsx
@@ -110,7 +110,7 @@ export const ReportHeader = component$<ReportHeaderProps>(
 
 						<Button variant={'link'} onClick$={downloadCSV}>
 							<span class='inline-flex items-start gap-1'>
-								{getIcon('Downlaod')} {t('REPORT_DOWNLOAD_CSV_LABEL')}
+								{getIcon('Download')} {t('REPORT_DOWNLOAD_CSV_LABEL')}
 							</span>
 						</Button>
 					</div>