refactor: facebook icon instead of image and misc ui fixes

frontend/components.d.ts

@@ -131,6 +131,7 @@ declare module 'vue' {
     ExotelCallUI: typeof import('./src/components/Telephony/ExotelCallUI.vue')['default']
     ExportIcon: typeof import('./src/components/Icons/ExportIcon.vue')['default']
     ExternalLinkIcon: typeof import('./src/components/Icons/ExternalLinkIcon.vue')['default']
+    FacebookIcon: typeof import('./src/components/Icons/FacebookIcon.vue')['default']
     FadedScrollableDiv: typeof import('./src/components/FadedScrollableDiv.vue')['default']
     Field: typeof import('./src/components/FieldLayout/Field.vue')['default']
     FieldLayout: typeof import('./src/components/FieldLayout/FieldLayout.vue')['default']

frontend/src/components/Icons/FacebookIcon.vue

@@ -0,0 +1,26 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1" id="svg9"
+        width="666.66669" height="666.66718" viewBox="0 0 666.66668 666.66717">
+        <defs id="defs13">
+            <clipPath clipPathUnits="userSpaceOnUse" id="clipPath25">
+                <path d="M 0,700 H 700 V 0 H 0 Z" id="path23" />
+            </clipPath>
+        </defs>
+        <g id="g17" transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)">
+            <g id="g19">
+                <g id="g21" clip-path="url(#clipPath25)">
+                    <g id="g27" transform="translate(600,350)">
+                        <path
+                            d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0"
+                            style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path29" />
+                    </g>
+                    <g id="g31" transform="translate(447.9175,273.6036)">
+                        <path
+                            d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z"
+                            style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path33" />
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>
+</template>

frontend/src/components/Settings/LeadSyncing/LeadSyncSourceForm.vue

@@ -29,15 +29,6 @@
 
     <!-- Form -->
      <div class="grid grid-cols-2 gap-4">
-        <FormControl 
-            type="text"
-            v-if="isLocal"
-            required="true"
-            v-model="syncSource.name"
-            :label="__('Source Name')"
-            :placeholder="__('Enter Source Name')"
-        />
-
         <FormControl
             type="autocomplete"
             required="true"
@@ -47,14 +38,29 @@
             :placeholder="__('Select Source Type')"
          >
             <template v-if="syncSource.type" #prefix>
-                <Avatar
-                    size="xs"
-                    class="mr-2"
-                    :image="syncSource.type.icon"
+                <component
+                    class="mr-2 size-4"
+                    :is="syncSource.type.icon"
                 />
             </template>
+
+			<template #item-prefix="{ option }">
+				<component
+                    class="size-4"
+                    :is="option.icon"
+                />
+    		</template>
         </FormControl>
 
+        <FormControl 
+            type="text"
+            v-if="isLocal"
+            required="true"
+            v-model="syncSource.name"
+            :label="__('Source Name')"
+            :placeholder="__('Enter Source Name')"
+        />
+
 
         <FormControl
             v-if="fieldsMap.background_sync_frequency"

frontend/src/components/Settings/LeadSyncing/leadSyncSourceConfig.js

@@ -1,4 +1,4 @@
-import LogoFacebook from '@/images/facebook.png'
+import LogoFacebook from '@/components/Icons/FacebookIcon.vue';
 
 
 export const supportedSourceTypes = [