fix: address icon migration review on space

Drop strokeWidth from Propel icons. The generated glyphs paint with
fill="currentColor", so the prop reached the svg and changed nothing;
keeping it implied a control that no longer exists.

Wrap the password and email-clear icon click targets in buttons. These
already carried onClick directly on the icon, but Propel bakes
aria-hidden="true" onto the svg, so the migration also hid them from
assistive tech. The buttons restore an accessible name and put the
controls in the tab order, matching the pattern email.tsx already uses.

apps/space/components/account/auth-forms/password.tsx

@@ -137,10 +137,15 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             disabled
           />
           {passwordFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>
@@ -163,15 +168,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             autoFocus
           />
           {showPassword?.password ? (
-            <HideOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <HideOutline className="h-5 w-5 text-placeholder" />
+            </button>
           ) : (
-            <ShowOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Show password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <ShowOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
         {passwordSupport}
@@ -195,15 +208,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               autoComplete="off"
             />
             {showPassword?.retypePassword ? (
-              <HideOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Hide password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <HideOutline className="h-5 w-5 text-placeholder" />
+              </button>
             ) : (
-              <ShowOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Show password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <ShowOutline className="h-5 w-5 text-placeholder" />
+              </button>
             )}
           </div>
           {!!passwordFormData.confirm_password &&

apps/space/components/account/auth-forms/unique-code.tsx

@@ -102,10 +102,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>

apps/space/components/issues/filters/applied-filters/filters-list.tsx

@@ -59,7 +59,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
                 className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
-                <CloseOutline height={12} width={12} strokeWidth={2} />
+                <CloseOutline height={12} width={12} />
               </button>
             </div>
           </div>
@@ -71,7 +71,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
         className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1 text-11 text-tertiary hover:text-secondary"
       >
         {t("common.clear_all")}
-        <CloseOutline height={12} width={12} strokeWidth={2} />
+        <CloseOutline height={12} width={12} />
       </button>
     </div>
   );

apps/space/components/issues/filters/applied-filters/label.tsx

@@ -38,7 +38,7 @@ export function AppliedLabelsFilters(props: Props) {
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(labelId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );

apps/space/components/issues/filters/applied-filters/priority.tsx

@@ -27,7 +27,7 @@ export function AppliedPriorityFilters(props: Props) {
             className="grid place-items-center text-tertiary hover:text-secondary"
             onClick={() => handleRemove(priority)}
           >
-            <CloseOutline height={10} width={10} strokeWidth={2} />
+            <CloseOutline height={10} width={10} />
           </button>
         </div>
       ))}

apps/space/components/issues/filters/applied-filters/state.tsx

@@ -38,7 +38,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(stateId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );

apps/space/components/issues/filters/helpers/filter-option.tsx

@@ -30,7 +30,7 @@ export function FilterOption(props: Props) {
           isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
-        {isChecked && <TickOutline width={10} height={10} strokeWidth={3} />}
+        {isChecked && <TickOutline width={10} height={10} />}
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}

apps/space/components/issues/filters/selection.tsx

@@ -30,7 +30,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
-          <SearchOutline className="text-placeholder" width={12} height={12} strokeWidth={2} />
+          <SearchOutline className="text-placeholder" width={12} height={12} />
           <input
             type="text"
             className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
@@ -41,7 +41,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseOutline className="text-tertiary" height={12} width={12} strokeWidth={2} />
+              <CloseOutline className="text-tertiary" height={12} width={12} />
             </button>
           )}
         </div>

apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx

@@ -25,11 +25,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
       onClick={() => toggleExpanded()}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
-        {isExpanded ? (
-          <ChevronUpOutline width={14} height={14} strokeWidth={2} />
-        ) : (
-          <ChevronDownOutline width={14} height={14} strokeWidth={2} />
-        )}
+        {isExpanded ? <ChevronUpOutline width={14} height={14} /> : <ChevronDownOutline width={14} height={14} />}
       </div>
 
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">

apps/space/components/issues/issue-layouts/properties/all-properties.tsx

@@ -146,7 +146,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
               }
             )}
           >
-            <ViewsOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <ViewsOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>
@@ -160,7 +160,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <AttachOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <AttachOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.attachment_count}</div>
           </div>
         </Tooltip>
@@ -174,7 +174,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <LinkOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <LinkOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.link_count}</div>
           </div>
         </Tooltip>

apps/space/components/issues/issue-layouts/properties/labels.tsx

@@ -29,7 +29,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         <div
           className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
-          <LabelsOutline className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelsOutline className="h-3.5 w-3.5" />
           {shouldShowLabel && <span>No Labels</span>}
         </div>
       </Tooltip>

apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
         )}
 
         <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
-          <ChatOutline className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
+          <ChatOutline className="size-3 text-secondary" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -139,14 +139,14 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                 disabled={isSubmitting}
                 className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
               >
-                <TickOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <TickOutline className="h-3 w-3 text-on-color" />
               </button>
               <button
                 type="button"
                 className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <CloseOutline className="h-3 w-3 text-on-color" />
               </button>
             </div>
           </form>
@@ -173,7 +173,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             onClick={() => {}}
             className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
           >
-            <MoreVerticalOutline className="size-4" strokeWidth={2} />
+            <MoreVerticalOutline className="size-4" />
           </Menu.Button>
 
           <Transition