update padding and text

client/ui/frontend/src/components/SquareIcon.tsx

@@ -25,7 +25,7 @@ type SquareIconProps = {
 
 export const SquareIcon = ({
     icon: Icon,
-    iconSize = 20,
+    iconSize = 18,
     variant = "default",
     className,
 }: SquareIconProps) => (

client/ui/frontend/src/components/empty-state/EmptyState.tsx

@@ -1,7 +1,5 @@
 import { ComponentType } from "react";
-import { useTranslation } from "react-i18next";
-import { Browser } from "@wailsio/runtime";
-import { ExternalLinkIcon, LucideProps } from "lucide-react";
+import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 import { SquareIcon } from "@/components/SquareIcon";
 
@@ -9,54 +7,20 @@ type Props = {
     icon: ComponentType<LucideProps>;
     title: string;
     description?: string;
-    learnMoreUrl?: string;
-    learnMoreTopic?: string;
     className?: string;
 };
 
-const openUrl = (url: string) => {
-    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
-};
-
-export const EmptyState = ({
-    icon,
-    title,
-    description,
-    learnMoreUrl,
-    learnMoreTopic,
-    className,
-}: Props) => {
-    const { t } = useTranslation();
+export const EmptyState = ({ icon, title, description, className }: Props) => {
     return (
         <div className={cn("py-12 text-center", className)}>
             <div
                 className={
-                    "flex flex-col items-center justify-start max-w-sm mx-auto relative top-6"
+                    "flex flex-col items-center justify-start max-w-sm mx-auto relative top-[7.8rem]"
                 }
             >
                 <SquareIcon icon={icon} className={"mb-3"} />
                 <p className={"text-[0.95rem] font-medium text-nb-gray-200 mb-1"}>{title}</p>
                 {description && <p className={"text-sm text-nb-gray-350"}>{description}</p>}
-                {learnMoreUrl && learnMoreTopic && (
-                    <p className={"text-sm text-nb-gray-350"}>
-                        {t("common.learnMoreAbout")}{" "}
-                        <a
-                            href={learnMoreUrl}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                openUrl(learnMoreUrl);
-                            }}
-                            className={cn(
-                                "text-netbird hover:underline underline-offset-4",
-                                "cursor-pointer wails-no-draggable",
-                                "inline-flex items-center gap-1",
-                            )}
-                        >
-                            {learnMoreTopic}
-                            <ExternalLinkIcon size={12} className={"shrink-0"} />
-                        </a>
-                    </p>
-                )}
             </div>
         </div>
     );

client/ui/frontend/src/components/empty-state/NoResults.tsx

@@ -16,7 +16,7 @@ export const NoResults = ({ icon = FunnelXIcon, title, description }: Props) =>
             icon={icon}
             title={title ?? t("common.noResults.title")}
             description={description ?? t("common.noResults.description")}
-            className={"relative top-[2.8rem]"}
+            className={"relative -top-[3.8rem]"}
         />
     );
 };