chore(profile): sortable links

apps/profile/app/components/accounts/SaveButton.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@kubelt/design-system'
+import { Button } from '@kubelt/design-system/src/atoms/buttons/Button'
 
-const SaveButton = ({ isFormChanged, discardFn }: any) => {
+const SaveButton = ({ isFormChanged, discardFn, size = 'xl' }: any) => {
   return (
     <>
       {/* Form where this button is used should have 
@@ -19,7 +19,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
               <Button
                 type="reset"
                 btnType={'secondary'}
-                btnSize={'xl'}
+                btnSize={size}
                 className="!text-gray-600 border-none mb-4 lg:mb-0"
                 onClick={discardFn}
               >
@@ -29,7 +29,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
             <Button
               isSubmit
               btnType={'primary'}
-              btnSize={'xl'}
+              btnSize={size}
               className="mb-4 lg:mb-0"
             >
               Save
@@ -40,7 +40,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
             <Button
               isSubmit
               btnType={'primary'}
-              btnSize={'xl'}
+              btnSize={size}
               className="mb-4 lg:mb-0"
               disabled
             >

apps/profile/app/components/accounts/UnsavedChangesModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Modal } from '@kubelt/design-system/src/molecules/modal/Modal'
+import SaveButton from './SaveButton'
+import { Text } from '@kubelt/design-system'
+
+import warn from '~/assets/warning.svg'
+
+const UnsavedChangesModal = ({ isOpen, handleClose }) => {
+  return (
+    <Modal isOpen={isOpen} handleClose={handleClose}>
+      <div className="relative bg-white lg:w-[32rem] rounded-xl pb-3 pr-6">
+        <div className="relative bg-white rounded-xl pl-6 pt-6">
+          <div className="mb-[53px] flex flex-row items-start">
+            <img src={warn} alt="warning" className="mr-4" />
+            <div className="flex flex-col items-start">
+              <Text size="lg" className="text-gray-900 mb-2">
+                You have Unsaved Changes
+              </Text>
+              <Text size="sm" className="text-gray-500 text-left">
+                You have made some changes. Do you want to discard or save them?
+              </Text>
+            </div>
+          </div>
+          <SaveButton
+            size="l"
+            isFormChanged={true}
+            discardFn={() => {
+              console.log('hey')
+            }}
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default UnsavedChangesModal

apps/profile/app/components/conditional-tooltip.tsx

@@ -4,7 +4,6 @@ type ConditionalTooltipProps = {
   children: any
   condition: boolean
   content: string
-  placement: string
   trigger?: 'hover' | 'click'
 }
 
@@ -18,10 +17,10 @@ const ConditionalTooltip = ({
   return condition ? (
     <Tooltip
       content={content}
-      placement={placement}
+      // placement=
       // without `text-black` text gets white on white bg
       // ¯\_(ツ)_/¯
-      className="text-black"
+      className="text-black bg-white !font-mono"
       trigger={trigger}
     >
       {children}

apps/profile/app/routes/$profile[.]json.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunction } from '@remix-run/cloudflare'
+import type { LoaderFunction } from '@remix-run/cloudflare'
 import { loader as profileLoader } from '~/routes/$profile.json'
 
 export const loader: LoaderFunction = profileLoader

apps/profile/app/routes/account/gallery.tsx

@@ -120,15 +120,6 @@ const Nft = forwardRef(
      * It re-renders this small component quite often
      * every time user changes screen size
      */
-    const [width, setWidth] = useState(0)
-    useLayoutEffect(() => {
-      function updateSize() {
-        setWidth(window.innerWidth)
-      }
-      window.addEventListener('resize', updateSize)
-      updateSize()
-      return () => window.removeEventListener('resize', updateSize)
-    }, [])
 
     const inlineStyles = {
       opacity: faded ? '0.2' : isDragging ? '0' : '1',
@@ -138,7 +129,6 @@ const Nft = forwardRef(
        * Don't know how to write it better so keep it for now
        */
       height: '100%',
-
       ...style,
     }
     return (

apps/profile/app/routes/account/settings/integrations.tsx

@@ -1,5 +1,3 @@
-
-
 export default function AccountSettingsIntegrations() {
   return (
     <>Connection Integrations</>