diff --git a/web/src/pages/activity-log/ActivityLogPage.tsx b/web/src/pages/activity-log/ActivityLogPage.tsx index 5adf5fb319..7f1b42b45f 100644 --- a/web/src/pages/activity-log/ActivityLogPage.tsx +++ b/web/src/pages/activity-log/ActivityLogPage.tsx @@ -9,7 +9,6 @@ import Skeleton from 'react-loading-skeleton'; import { useI18nContext } from '../../i18n/i18n-react'; import { FilterButton } from '../../shared/components/Layout/buttons/FilterButton/FilterButton'; import { PageContainer } from '../../shared/components/Layout/PageContainer/PageContainer'; -import { PageLimiter } from '../../shared/components/Layout/PageLimiter/PageLimiter'; import { FilterGroupsModal } from '../../shared/components/modals/FilterGroupsModal/FilterGroupsModal'; import type { FilterGroupsModalFilter } from '../../shared/components/modals/FilterGroupsModal/types'; import { Button } from '../../shared/defguard-ui/components/Layout/Button/Button'; @@ -34,10 +33,8 @@ import { export const ActivityLogPage = () => { return ( - - - - + + ); }; diff --git a/web/src/pages/devices/components/DevicesList/DevicesList.tsx b/web/src/pages/devices/components/DevicesList/DevicesList.tsx index 12a8cda5f4..00ce1de11b 100644 --- a/web/src/pages/devices/components/DevicesList/DevicesList.tsx +++ b/web/src/pages/devices/components/DevicesList/DevicesList.tsx @@ -1,7 +1,6 @@ import './style.scss'; import { useMutation } from '@tanstack/react-query'; -import dayjs from 'dayjs'; import { useCallback, useMemo } from 'react'; import { shallow } from 'zustand/shallow'; @@ -22,6 +21,7 @@ import useApi from '../../../../shared/hooks/useApi'; import { useClipboard } from '../../../../shared/hooks/useClipboard'; import { useToaster } from '../../../../shared/hooks/useToaster'; import type { StandaloneDevice } from '../../../../shared/types'; +import { dateToLocal } from '../../../../shared/utils/displayDate'; import type { ListCellTag } from '../../../acl/AclIndexPage/components/shared/types'; import { useDeleteStandaloneDeviceModal } from '../../hooks/useDeleteStandaloneDeviceModal'; import { useDevicesPage } from '../../hooks/useDevicesPage'; @@ -96,9 +96,10 @@ const DeviceRow = (props: StandaloneDevice) => { [assigned_ips], ); const formatDate = useMemo(() => { - const day = dayjs(added_date); + const day = dateToLocal(added_date); return day.format('DD.MM.YYYY | HH:mm'); }, [added_date]); + const { writeToClipboard } = useClipboard(); return (
diff --git a/web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx b/web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx index fdac477563..af570538f6 100644 --- a/web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx +++ b/web/src/pages/network/NetworkEditForm/NetworkEditForm.tsx @@ -206,7 +206,17 @@ export const NetworkEditForm = () => { address = data.address.join(','); } - return { ...defaultValues, ...omited, allowed_ips, address }; + // we changed the default and this field is conditionally disabled + const peer_disconnect_threshold = + data.peer_disconnect_threshold < 120 ? 120 : data.peer_disconnect_threshold; + + return { + ...defaultValues, + ...omited, + allowed_ips, + address, + peer_disconnect_threshold, + }; }, [defaultValues], ); diff --git a/web/src/pages/settings/components/GlobalSettings/types.ts b/web/src/pages/settings/components/GlobalSettings/types.ts index 177da30317..342f24b59d 100644 --- a/web/src/pages/settings/components/GlobalSettings/types.ts +++ b/web/src/pages/settings/components/GlobalSettings/types.ts @@ -8,7 +8,7 @@ export const globalSettingsSchema = (LL: TranslationFunctions) => instance_name: z .string() .min(3, LL.form.error.minimumLength()) - .max(12, LL.form.error.maximumLength()), + .max(64, LL.form.error.maximumLength()), openid_enabled: z.boolean(), wireguard_enabled: z.boolean(), worker_enabled: z.boolean(), diff --git a/web/src/shared/components/Layout/PageContainer/PageContainer.tsx b/web/src/shared/components/Layout/PageContainer/PageContainer.tsx index 3e8263dfaa..49d4558d7c 100644 --- a/web/src/shared/components/Layout/PageContainer/PageContainer.tsx +++ b/web/src/shared/components/Layout/PageContainer/PageContainer.tsx @@ -1,22 +1,34 @@ import './style.scss'; -import classNames from 'classnames'; -import { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'; - +import clsx from 'clsx'; +import { type ComponentProps, useEffect } from 'react'; import { useNavigationStore } from '../../../../components/Navigation/hooks/useNavigationStore'; -export const PageContainer = forwardRef>( - ({ children, className, ...rest }, ref) => { - const isNavOpen = useNavigationStore((state) => state.isOpen); - const cn = useMemo(() => classNames('page-container', className), [className]); - const contentCn = useMemo( - () => classNames('page-content', { 'nav-open': isNavOpen }), - [isNavOpen], - ); - return ( -
-
{children}
+type Props = { + withDefaultPadding?: boolean; +} & ComponentProps<'div'>; + +export const PageContainer = ({ + children, + className, + ref, + withDefaultPadding = false, + ...rest +}: Props) => { + const isNavOpen = useNavigationStore((state) => state.isOpen); + useEffect(() => { + console.log({ withDefaultPadding }); + }, [withDefaultPadding]); + return ( +
+
+ {children}
- ); - }, -); +
+ ); +}; diff --git a/web/src/shared/components/Layout/PageContainer/style.scss b/web/src/shared/components/Layout/PageContainer/style.scss index 591137583c..2c1b17be20 100644 --- a/web/src/shared/components/Layout/PageContainer/style.scss +++ b/web/src/shared/components/Layout/PageContainer/style.scss @@ -1,27 +1,13 @@ @use '@scssutils' as *; .page-container { + min-height: inherit; + @include media-breakpoint-down(lg) { height: 100%; max-height: inherit; box-sizing: border-box; position: relative; - - & > .page-content { - overflow-y: auto; - box-sizing: border-box; - margin-top: 6rem; - height: calc(100% - 6rem); - max-height: 100%; - - // hide scroll - &::-webkit-scrollbar { - display: none; - } - - -ms-overflow-style: none; - scrollbar-width: none; /* Firefox */ - } } @include media-breakpoint-up(lg) { @@ -33,9 +19,6 @@ & > .page-content { width: calc(100% - 87px); margin-left: 87px; - height: inherit; - max-height: inherit; - position: relative; &.nav-open { margin-left: 230px; @@ -44,3 +27,12 @@ } } } + +.page-container > .page-content.default-padding { + box-sizing: border-box; + padding: var(--spacing-m) var(--spacing-s) var(--spacing-m); + + @include media-breakpoint-up(lg) { + padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-m); + } +} diff --git a/web/src/shared/components/Layout/PageLayout/PageLayout.tsx b/web/src/shared/components/Layout/PageLayout/PageLayout.tsx index 47f04dd3a2..b8c4880a52 100644 --- a/web/src/shared/components/Layout/PageLayout/PageLayout.tsx +++ b/web/src/shared/components/Layout/PageLayout/PageLayout.tsx @@ -8,11 +8,21 @@ import { PageContainer } from '../PageContainer/PageContainer'; type Props = { id: string; className?: string; + withDefaultPadding?: boolean; } & PropsWithChildren; -export const PageLayout = ({ id, className, children }: Props) => { +export const PageLayout = ({ + id, + className, + children, + withDefaultPadding = false, +}: Props) => { return ( - + {children} ); diff --git a/web/src/shared/scss/base/_base.scss b/web/src/shared/scss/base/_base.scss index a38da50892..e403a28fa0 100644 --- a/web/src/shared/scss/base/_base.scss +++ b/web/src/shared/scss/base/_base.scss @@ -99,17 +99,29 @@ html { body { font-size: 1.6rem; color: v.$gray-light; - font-family: Poppins, 'Roboto Condensed', Roboto, 'Open Sans', Helvetica, Arial; + font-family: + Poppins, + Roboto, + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Oxygen, + Ubuntu, + Cantarell, + 'Open Sans', + 'Helvetica Neue', + sans-serif; background: v.$bg-light; overflow-x: hidden; position: relative; + max-height: 100dvh; } #app, #root { position: relative; min-height: 100dvh; - max-height: 100dvh; } h1, diff --git a/web/src/shared/utils/displayDate.ts b/web/src/shared/utils/displayDate.ts new file mode 100644 index 0000000000..2d5a93ac72 --- /dev/null +++ b/web/src/shared/utils/displayDate.ts @@ -0,0 +1,3 @@ +import dayjs, { type Dayjs } from 'dayjs'; + +export const dateToLocal = (value: string): Dayjs => dayjs.utc(value).local();