Update node version & UI cosmetics

Dockerfile

@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM docker.io/library/node:16-alpine AS deps
+FROM docker.io/library/node:18.17-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat git openssh
 WORKDIR /app
@@ -18,7 +18,7 @@ RUN \
   fi
 
 # Rebuild the source code only when needed
-FROM docker.io/library/node:16-alpine AS builder
+FROM docker.io/library/node:18.17-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -34,7 +34,7 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN npm run build
 
 # Production image, copy all the files and run next
-FROM docker.io/library/node:16-alpine AS runner
+FROM docker.io/library/node:18.17-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

components/chart/HorizontalBarChart.tsx

@@ -10,6 +10,9 @@ import {
   Legend,
 } from 'chart.js'
 import { convertToHumanReadable } from '../../lib/queueManager'
+import { GRAY_200, GRAY_700 } from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalProps {
@@ -25,6 +28,8 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
   titleText,
   numericTooltip,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
+
   const options = {
     indexAxis: 'y' as const,
     elements: {
@@ -54,6 +59,11 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
         position: 'bottom' as const,
         labels: {
           usePointStyle: true,
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_200
+              : GRAY_700,
         },
       },
       title: {
@@ -62,6 +72,11 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
         font: {
           size: 16,
         },
+        color:
+          theme === 'dark' ||
+          (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ? GRAY_200
+            : GRAY_700,
       },
       tooltip: {
         callbacks: {

components/chart/HorizontalNoLabel.tsx

@@ -11,6 +11,12 @@ import {
 } from 'chart.js'
 import { getRandomColor } from '../../lib/queueManager'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
+import {
+  GRAY_200,
+  GRAY_700,
+} from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
@@ -20,13 +26,12 @@ interface BarChartHorizontalNoLabelsProps {
   queuedata: any
 }
 
-// type Align = 'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom' | number | ((context: any) => Align);
-
 const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
   datasets,
   titleText,
   queuedata,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const validQueueData = queuedata || []
 
   const queueDataMap: { [label: string]: any } = {}
@@ -48,7 +53,6 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
     },
     scales: {
       y: {
-        // display: false,
         display: true,
 
         beginAtZero: true,
@@ -63,6 +67,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
           font: {
             size: 14,
           },
+          color:
+          theme === 'dark' ||
+          (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ? GRAY_200
+            : GRAY_700,
         },
       },
       x: {
@@ -91,6 +100,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
         font: {
           size: 16,
         },
+        color:
+        theme === 'dark' ||
+        (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          ? GRAY_200
+          : GRAY_700,
       },
       datalabels: {
         color: 'white',

components/chart/HorizontalNotStacked.tsx

@@ -9,6 +9,14 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js'
+import {
+  GRAY_200,
+  GRAY_300,
+  GRAY_600,
+  GRAY_700,
+} from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalNotStackedProps {
@@ -24,6 +32,7 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
   tickColor,
   titleText
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const options = {
     indexAxis: 'y' as const,
     responsive: true,
@@ -45,7 +54,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
         },
         ticks: {
           stepSize: 1,
-          color: tickColor,
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_200
+              : GRAY_700,
           font:{
             size:14,
           },
@@ -74,6 +87,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
         font: {
           size: 16,
         },
+        color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
       },
     },
   }

components/chart/HorizontalWithTitle.tsx

@@ -9,21 +9,28 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
+import {
+  GRAY_200,
+  GRAY_300,
+  GRAY_600,
+  GRAY_700,
+} from '../../lib/colors'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalWithTitleProps {
   labels: string[]
   datasets: any[]
-  tickColor?: string
   titleText?: string
 }
 
 const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
   labels,
   datasets,
-  tickColor,
   titleText,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const options = {
     indexAxis: 'y' as const,
     responsive: true,
@@ -45,7 +52,11 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
         },
         ticks: {
           stepSize: 2,
-          color: tickColor,
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_200
+              : GRAY_700,
           font: {
             size: 14,
           },
@@ -62,13 +73,25 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
       legend: {
         position: 'bottom' as const,
         display: false,
+        labels: {
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
+        },
       },
       title: {
         display: true,
         text: titleText,
         font: {
           size: 16,
         },
+        color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
         padding: {
           top: 0,
           bottom: 4,

components/chart/index.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 export * from './BarChart'

components/common/ActionCall.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import React from 'react'

components/common/Avatar/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/Avatar/index.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 /**
  *

components/common/Button.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/Dropdown/DropdownHeader.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { FC, ComponentProps } from 'react'

components/common/EmptyState.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import classNames from 'classnames'

components/common/IconSwitch.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { FC, useState, useEffect, ComponentProps, ReactNode } from 'react'

components/common/InlineNotification.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/MissingPermissionsPage.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

components/common/Modal/ModalActions.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/Modal/ModalContent.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/Modal/index.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 /**

components/common/ProfilePicture/GravatarIconDrawerContent.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { ComponentPropsWithRef, forwardRef } from 'react'
@@ -7,11 +7,10 @@ import { Button } from '../Button'
 import { useState, useRef } from 'react'
 import { closeSideDrawer } from '../../../lib/utils'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleXmark, faSave, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { faCircleXmark, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { SideDrawerCloseIcon } from '../SideDrawerCloseIcon'
 import { t } from 'i18next'
 import { TextInput } from '../TextInput'
-import gravatar from 'gravatar'
 import { Avatar } from '../Avatar'
 import { uploadProfilePicture } from '../../../lib/profilePicture'
 import { useSelector } from 'react-redux'
@@ -169,7 +168,7 @@ export const GravatarIconDrawerContent = forwardRef<
           </div>
         </div>
         <div className='flex items-center justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
             {t('Common.Cancel')}
           </Button>
           <Button
@@ -179,7 +178,6 @@ export const GravatarIconDrawerContent = forwardRef<
             className='ml-4 mb-4'
             disabled={isEmpty(avatarBase64)}
           >
-            <FontAwesomeIcon icon={faSave} className='mr-2 h-4 w-4' />
             {t('Settings.Save avatar')}
           </Button>
         </div>

components/common/ProfilePicture/PresetProfilePictureContent.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { ComponentPropsWithRef, forwardRef, useState } from 'react'