chore: icon picker list consisteny

packages/ui/src/emoji/icons-list.tsx

@@ -71,7 +71,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
         )}
         <button
           type="button"
-          className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
+          className={cn("grid place-items-center h-5 w-5 rounded-full border border-transparent", {
             "border-custom-border-400": !showHexInput,
           })}
           onClick={() => {
@@ -91,7 +91,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
           <button
             key={icon.name}
             type="button"
-            className="h-6 w-6 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
+            className="h-9 w-9 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
             onClick={() => {
               onChange({
                 name: icon.name,
@@ -99,7 +99,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
               });
             }}
           >
-            <span style={{ color: activeColor }} className="material-symbols-rounded text-base">
+            <span style={{ color: activeColor }} className="material-symbols-rounded text-[20px]">
               {icon.name}
             </span>
           </button>

web/components/project/card.tsx

@@ -203,7 +203,10 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
           <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
             <div className="flex flex-grow items-center gap-2.5 truncate">
               <div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded bg-white/90">
-                <ProjectLogo logo={project.logo_props} />
+                <ProjectLogo
+                  logo={project.logo_props}
+                  className={`${project.logo_props.in_use === "icon" ? "text-[18px]" : ""}`}
+                />
               </div>
 
               <div className="flex w-full flex-col justify-between gap-0.5 truncate">

web/components/project/create-project-form.tsx

@@ -191,7 +191,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
               <CustomEmojiIconPicker
                 label={
                   <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
-                    <ProjectLogo logo={value} className="text-xl" />
+                    <ProjectLogo logo={value} className="text-[24px] leading-[24px]" />
                   </span>
                 }
                 onChange={(val: any) => {

web/components/project/form.tsx

@@ -151,7 +151,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                   <CustomEmojiIconPicker
                     label={
                       <span className="grid h-7 w-7 place-items-center">
-                        <ProjectLogo logo={value} className="text-lg" />
+                        <ProjectLogo logo={value} className="text-[24px] leading-[24px]" />
                       </span>
                     }
                     onChange={(val) => {
@@ -169,6 +169,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                         [val?.type]: logoValue,
                       });
                     }}
+                    className="flex items-center"
                     defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
                     defaultOpen={
                       value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON

web/components/project/sidebar-list-item.tsx

@@ -226,7 +226,10 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     })}
                   >
                     <div className="h-7 w-7 grid place-items-center flex-shrink-0">
-                      <ProjectLogo logo={project.logo_props} />
+                      <ProjectLogo
+                        logo={project.logo_props}
+                        className={`${project.logo_props.in_use === "icon" ? "text-[18px]" : ""}`}
+                      />
                     </div>
                     {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
                   </div>