From d51196c5364a6ba84cadcdb0a403c86fb81f9c6a Mon Sep 17 00:00:00 2001
From: Nevo David <me@nevos.io>
Date: Thu, 6 Feb 2025 23:29:38 +0700
Subject: [PATCH] feat: settings

---
 .../components/layout/settings.component.tsx  | 25 ++++++++++++++++++-
 .../src/components/layout/top.menu.tsx        |  1 -
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/layout/settings.component.tsx b/apps/frontend/src/components/layout/settings.component.tsx
index 8a6edf98..3ae40b93 100644
--- a/apps/frontend/src/components/layout/settings.component.tsx
+++ b/apps/frontend/src/components/layout/settings.component.tsx
@@ -21,6 +21,7 @@ import { useVariables } from '@gitroom/react/helpers/variable.context';
 import { PublicComponent } from '@gitroom/frontend/components/public-api/public.component';
 import Link from 'next/link';
 import { Webhooks } from '@gitroom/frontend/components/webhooks/webhooks';
+import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
 
 export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
   const { isGeneral } = useVariables();
@@ -210,8 +211,30 @@ export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
 };
 
 export const SettingsComponent = () => {
+  const settings = useModals();
+  const user = useUser();
+
+  const openModal = useCallback(() => {
+    if (user?.tier.current !== 'FREE') {
+      return;
+    }
+
+    settings.openModal({
+      children: (
+        <div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] w-[500px] mx-auto">
+          <SettingsPopup />
+        </div>
+      ),
+      classNames: {
+        modal: 'bg-transparent text-textColor',
+      },
+      withCloseButton: false,
+      size: '100%',
+    });
+  }, [user]);
+
   return (
-    <Link href="/settings">
+    <Link href="/settings" onClick={openModal}>
       <svg
         width="40"
         height="40"
diff --git a/apps/frontend/src/components/layout/top.menu.tsx b/apps/frontend/src/components/layout/top.menu.tsx
index f4bc2f37..b3483eef 100644
--- a/apps/frontend/src/components/layout/top.menu.tsx
+++ b/apps/frontend/src/components/layout/top.menu.tsx
@@ -77,7 +77,6 @@ export const TopMenu: FC = () => {
   const user = useUser();
   const { billingEnabled } = useVariables();
   const menuItems = useMenuItems();
-
   return (
     <div className="flex flex-col h-full animate-normalFadeDown order-3 md:order-2 col-span-2 md:col-span-1">
       <ul className="gap-0 md:gap-5 flex flex-1 items-center text-[18px]">