Small visual adjustments

This commit is contained in:
Owen
2025-12-15 21:23:40 -05:00
committed by Owen Schwartz
parent c44c1a5518
commit 10f1437496
3 changed files with 22 additions and 39 deletions

View File

@@ -48,9 +48,7 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { orgQueries } from "@app/lib/queries"; import { orgQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { ListClientsResponse } from "@server/routers/client/listClients";
import { ListSitesResponse } from "@server/routers/site"; import { ListSitesResponse } from "@server/routers/site";
import { ListUsersResponse } from "@server/routers/user";
import { UserType } from "@server/types/UserTypes"; import { UserType } from "@server/types/UserTypes";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
@@ -59,7 +57,7 @@ import { useTranslations } from "next-intl";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { InfoPopup } from "@app/components/ui/info-popup"; // import { InfoPopup } from "@app/components/ui/info-popup";
// Helper to validate port range string format // Helper to validate port range string format
const isValidPortRangeString = (val: string | undefined | null): boolean => { const isValidPortRangeString = (val: string | undefined | null): boolean => {
@@ -838,7 +836,7 @@ export default function CreateInternalResourceDialog({
<h3 className="text-lg font-semibold mb-4"> <h3 className="text-lg font-semibold mb-4">
{t("portRestrictions")} {t("portRestrictions")}
</h3> </h3>
<div className="space-y-4"> <div className="space-y-3">
{/* TCP Ports */} {/* TCP Ports */}
<FormField <FormField
control={form.control} control={form.control}
@@ -846,21 +844,19 @@ export default function CreateInternalResourceDialog({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FormLabel className="min-w-[50px]"> <FormLabel className="min-w-10">
TCP TCP
</FormLabel> </FormLabel>
<InfoPopup {/*<InfoPopup
info={t("tcpPortsDescription")} info={t("tcpPortsDescription")}
/> />*/}
</div>
<div className="flex items-center gap-2">
<Select <Select
value={tcpPortMode} value={tcpPortMode}
onValueChange={(value: PortMode) => { onValueChange={(value: PortMode) => {
setTcpPortMode(value); setTcpPortMode(value);
}} }}
> >
<SelectTrigger className="w-[120px]"> <SelectTrigger className="w-[110px]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -910,21 +906,19 @@ export default function CreateInternalResourceDialog({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FormLabel className="min-w-[50px]"> <FormLabel className="min-w-10">
UDP UDP
</FormLabel> </FormLabel>
<InfoPopup {/*<InfoPopup
info={t("udpPortsDescription")} info={t("udpPortsDescription")}
/> />*/}
</div>
<div className="flex items-center gap-2">
<Select <Select
value={udpPortMode} value={udpPortMode}
onValueChange={(value: PortMode) => { onValueChange={(value: PortMode) => {
setUdpPortMode(value); setUdpPortMode(value);
}} }}
> >
<SelectTrigger className="w-[120px]"> <SelectTrigger className="w-[110px]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { import {
@@ -36,18 +36,11 @@ import { toast } from "@app/hooks/useToast";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { ListRolesResponse } from "@server/routers/role";
import { ListUsersResponse } from "@server/routers/user";
import { ListSiteResourceRolesResponse } from "@server/routers/siteResource/listSiteResourceRoles";
import { ListSiteResourceUsersResponse } from "@server/routers/siteResource/listSiteResourceUsers";
import { ListSiteResourceClientsResponse } from "@server/routers/siteResource/listSiteResourceClients";
import { ListClientsResponse } from "@server/routers/client/listClients";
import { Tag, TagInput } from "@app/components/tags/tag-input"; import { Tag, TagInput } from "@app/components/tags/tag-input";
import { AxiosResponse } from "axios";
import { UserType } from "@server/types/UserTypes"; import { UserType } from "@server/types/UserTypes";
import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query"; import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
import { orgQueries, resourceQueries } from "@app/lib/queries"; import { orgQueries, resourceQueries } from "@app/lib/queries";
import { InfoPopup } from "@app/components/ui/info-popup"; // import { InfoPopup } from "@app/components/ui/info-popup";
// Helper to validate port range string format // Helper to validate port range string format
const isValidPortRangeString = (val: string | undefined | null): boolean => { const isValidPortRangeString = (val: string | undefined | null): boolean => {
@@ -822,7 +815,7 @@ export default function EditInternalResourceDialog({
<h3 className="text-lg font-semibold mb-4"> <h3 className="text-lg font-semibold mb-4">
{t("portRestrictions")} {t("portRestrictions")}
</h3> </h3>
<div className="space-y-4"> <div className="space-y-3">
{/* TCP Ports */} {/* TCP Ports */}
<FormField <FormField
control={form.control} control={form.control}
@@ -830,21 +823,19 @@ export default function EditInternalResourceDialog({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FormLabel className="min-w-[50px]"> <FormLabel className="min-w-10">
TCP TCP
</FormLabel> </FormLabel>
<InfoPopup {/*<InfoPopup
info={t("tcpPortsDescription")} info={t("tcpPortsDescription")}
/> />*/}
</div>
<div className="flex items-center gap-2">
<Select <Select
value={tcpPortMode} value={tcpPortMode}
onValueChange={(value: PortMode) => { onValueChange={(value: PortMode) => {
setTcpPortMode(value); setTcpPortMode(value);
}} }}
> >
<SelectTrigger className="w-[120px]"> <SelectTrigger className="w-[110px]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -894,21 +885,19 @@ export default function EditInternalResourceDialog({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FormLabel className="min-w-[50px]"> <FormLabel className="min-w-10">
UDP UDP
</FormLabel> </FormLabel>
<InfoPopup {/*<InfoPopup
info={t("udpPortsDescription")} info={t("udpPortsDescription")}
/> />*/}
</div>
<div className="flex items-center gap-2">
<Select <Select
value={udpPortMode} value={udpPortMode}
onValueChange={(value: PortMode) => { onValueChange={(value: PortMode) => {
setUdpPortMode(value); setUdpPortMode(value);
}} }}
> >
<SelectTrigger className="w-[120px]"> <SelectTrigger className="w-[110px]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

View File

@@ -308,7 +308,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
role="option" role="option"
aria-selected={isSelected} aria-selected={isSelected}
className={cn( className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent", "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent",
isSelected && isSelected &&
"bg-accent text-accent-foreground", "bg-accent text-accent-foreground",
classStyleProps?.commandItem classStyleProps?.commandItem