feat: add setting icon to account switch modal and update plus icon

jungcome7 · claude · jungcome7 · commit 596c8d7fb5d8 · 2026-03-17T17:04:30.000+09:00
- Add SettingOutlineIcon (gear) to account switch dropdown title
- Clicking gear navigates to /wallet/select for account ordering
- Replace fill-based plus icon with stroke-based design system icon
- Update title typography to Semi Bold 14px (lh 1.4, ls -0.14px)
- Add 8px spacing below title row
- Apply hovered_1 style (0.7 opacity) on icon hover
- Icons exported from Figma REST API (nodes 5612:26339, 5612:26343)

KEPLR-2012

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/apps/extension/src/components/icon/index.tsx b/apps/extension/src/components/icon/index.tsx
@@ -30,6 +30,7 @@ export * from "./loading";
 export * from "./menu";
 export * from "./percentage";
 export * from "./plus";
+export * from "./plus-stroke";
 export * from "./profile";
 export * from "./profile-circle";
 export * from "./profile-outlined";
@@ -38,6 +39,7 @@ export * from "./right-arrow";
 export * from "./rocket-launch";
 export * from "./search";
 export * from "./setting";
+export * from "./setting-outline";
 export * from "./star";
 export * from "./shield-exclamation";
 export * from "./trash";
diff --git a/apps/extension/src/components/icon/plus-stroke.tsx b/apps/extension/src/components/icon/plus-stroke.tsx
@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from "react";
+import { IconProps } from "./types";
+
+export const PlusStrokeIcon: FunctionComponent<IconProps> = ({
+  width = "1.5rem",
+  height = "1.5rem",
+  color,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 5V19M5 12H19"
+        stroke={color || "currentColor"}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/apps/extension/src/components/icon/setting-outline.tsx b/apps/extension/src/components/icon/setting-outline.tsx
@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from "react";
+import { IconProps } from "./types";
+
+export const SettingOutlineIcon: FunctionComponent<IconProps> = ({
+  width = "1.5rem",
+  height = "1.5rem",
+  color,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.59353 3.94017C9.68394 3.39771 10.1533 3.00012 10.7032 3.00012H13.2972C13.8471 3.00012 14.3165 3.39771 14.4069 3.94017L14.6204 5.22122C14.6827 5.59527 14.9327 5.90683 15.2645 6.09048C15.3386 6.13154 15.412 6.17396 15.4844 6.21769C15.8094 6.41396 16.2048 6.47499 16.5603 6.34178L17.7772 5.8859C18.2922 5.69297 18.8712 5.90063 19.1461 6.3769L20.4431 8.62333C20.7181 9.0996 20.6084 9.70485 20.1839 10.0544L19.1795 10.8812C18.887 11.122 18.742 11.4938 18.749 11.8727C18.7498 11.915 18.7502 11.9575 18.7502 12.0001C18.7502 12.0427 18.7498 12.0852 18.749 12.1276C18.742 12.5064 18.887 12.8782 19.1795 13.119L20.1839 13.9458C20.6084 14.2954 20.7181 14.9006 20.4431 15.3769L19.1461 17.6233C18.8712 18.0996 18.2922 18.3073 17.7772 18.1143L16.5603 17.6585C16.2048 17.5252 15.8094 17.5863 15.4844 17.7825C15.412 17.8263 15.3386 17.8687 15.2645 17.9098C14.9327 18.0934 14.6827 18.405 14.6204 18.779L14.4069 20.0601C14.3165 20.6025 13.8471 21.0001 13.2972 21.0001H10.7032C10.1533 21.0001 9.68394 20.6025 9.59353 20.0601L9.38002 18.779C9.31768 18.405 9.06771 18.0934 8.73594 17.9098C8.66176 17.8687 8.58844 17.8263 8.51601 17.7826C8.19098 17.5863 7.79565 17.5253 7.44008 17.6585L6.22322 18.1143C5.70822 18.3073 5.12923 18.0996 4.85426 17.6233L3.55728 15.3769C3.28231 14.9006 3.39196 14.2954 3.81654 13.9459L4.82089 13.119C5.1134 12.8782 5.2584 12.5064 5.25138 12.1276C5.2506 12.0852 5.2502 12.0427 5.2502 12.0001C5.2502 11.9575 5.2506 11.9151 5.25138 11.8727C5.2584 11.4939 5.1134 11.122 4.82089 10.8812L3.81654 10.0544C3.39196 9.70487 3.28231 9.09961 3.55728 8.62335L4.85426 6.37691C5.12923 5.90065 5.70822 5.69298 6.22321 5.88591L7.44007 6.34179C7.79563 6.475 8.19096 6.41397 8.516 6.2177C8.58843 6.17396 8.66176 6.13154 8.73594 6.09048C9.06771 5.90683 9.31768 5.59527 9.38002 5.22122L9.59353 3.94017Z"
+        stroke={color || "currentColor"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 12C15 13.6569 13.6568 15 12 15C10.3431 15 8.99997 13.6569 8.99997 12C8.99997 10.3432 10.3431 9.00004 12 9.00004C13.6568 9.00004 15 10.3432 15 12Z"
+        stroke={color || "currentColor"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/apps/extension/src/pages/main/components/account-switch-float-modal/index.tsx b/apps/extension/src/pages/main/components/account-switch-float-modal/index.tsx
@@ -1,14 +1,7 @@
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled, { useTheme } from "styled-components";
 import SimpleBar from "simplebar-react";
 import { ColorPalette } from "../../../../styles";
-import { Subtitle3 } from "../../../../components/typography";
 import { useStore } from "../../../../stores";
 import { KeyInfo } from "@keplr-wallet/background";
 import { observer } from "mobx-react-lite";
@@ -21,8 +14,12 @@ import { ReferenceType, UseFloatingReturn } from "@floating-ui/react-dom";
 import { FloatModal } from "../../../../components/float-modal";
 import { useSearchKeyInfos } from "../../../../hooks/use-search-key-infos";
 import { useGetAllSortedKeyInfos } from "../../../../hooks/key-info";
-import { IconProps } from "../../../../components/icon/types";
+import {
+  SettingOutlineIcon,
+  PlusStrokeIcon,
+} from "../../../../components/icon";
 import { Box } from "../../../../components/box";
+import { useNavigate } from "react-router";
 import { Stack } from "../../../../components/stack";
 import { AccountItemSwitchModal } from "./account-item";
 
@@ -46,6 +43,7 @@ export const AccountSwitchFloatModal = observer(
     const searchInputRef = useRef<HTMLInputElement>(null);
     const intl = useIntl();
     const theme = useTheme();
+    const navigate = useNavigate();
     const { searchText, setSearchText, searchedKeyInfos } = useSearchKeyInfos();
 
     const closeModalInner = useCallback(() => {
@@ -109,9 +107,29 @@ export const AccountSwitchFloatModal = observer(
             ref={floating.refs.setFloating}
           >
             <Styles.TitleContainer>
-              <Subtitle3>
+              <Styles.TitleText>
                 {intl.formatMessage({ id: "page.wallet.title" })}
-              </Subtitle3>
+              </Styles.TitleText>
+              <Box
+                cursor="pointer"
+                hover={{
+                  opacity: COMMON_HOVER_OPACITY,
+                }}
+                onClick={() => {
+                  closeModalInner();
+                  navigate("/wallet/select");
+                }}
+              >
+                <SettingOutlineIcon
+                  width="1.5rem"
+                  height="1.5rem"
+                  color={
+                    theme.mode === "light"
+                      ? ColorPalette["gray-700"]
+                      : ColorPalette["gray-10"]
+                  }
+                />
+              </Box>
               <Box
                 cursor="pointer"
                 hover={{
@@ -123,9 +141,18 @@ export const AccountSwitchFloatModal = observer(
                   });
                 }}
               >
-                <_PlusIcon width="1.5rem" height="1.5rem" />
+                <PlusStrokeIcon
+                  width="1.5rem"
+                  height="1.5rem"
+                  color={
+                    theme.mode === "light"
+                      ? ColorPalette["gray-700"]
+                      : ColorPalette["gray-10"]
+                  }
+                />
               </Box>
             </Styles.TitleContainer>
+            <Gutter size="0.5rem" />
 
             <SimpleBar
               style={{
@@ -135,33 +162,39 @@ export const AccountSwitchFloatModal = observer(
               }}
             >
               {shouldShowSearch && (
-                <Styles.SearchContainer>
-                  <SearchTextInput
-                    ref={searchInputRef}
-                    value={searchText}
-                    onChange={(e) => {
-                      e.preventDefault();
-                      setSearchText(e.target.value);
-                    }}
-                    placeholder="Search"
-                    placeholderColor={
-                      theme.mode === "dark"
-                        ? ColorPalette["gray-300"]
-                        : undefined
-                    }
-                    iconColor={
-                      theme.mode === "dark"
-                        ? ColorPalette["gray-300"]
-                        : undefined
-                    }
-                    textInputContainerStyle={{
-                      backgroundColor: "transparent",
-                    }}
-                    inputStyle={{
-                      backgroundColor: "transparent",
-                    }}
-                  />
-                </Styles.SearchContainer>
+                <React.Fragment>
+                  <Styles.SearchContainer>
+                    <SearchTextInput
+                      ref={searchInputRef}
+                      value={searchText}
+                      onChange={(e) => {
+                        e.preventDefault();
+                        setSearchText(e.target.value);
+                      }}
+                      placeholder="Search"
+                      placeholderColor={
+                        theme.mode === "dark"
+                          ? ColorPalette["gray-300"]
+                          : undefined
+                      }
+                      iconColor={
+                        theme.mode === "dark"
+                          ? ColorPalette["gray-300"]
+                          : undefined
+                      }
+                      textInputContainerStyle={{
+                        backgroundColor: "transparent",
+                        borderRadius: "1rem",
+                        minHeight: "3.75rem",
+                      }}
+                      inputStyle={{
+                        backgroundColor: "transparent",
+                        height: "3.75rem",
+                      }}
+                    />
+                  </Styles.SearchContainer>
+                  <Gutter size="0.75rem" />
+                </React.Fragment>
               )}
               <Stack gutter="0.5rem">
                 {sortedKeyInfos.map((keyInfo) => {
@@ -193,23 +226,6 @@ export const AccountSwitchFloatModal = observer(
   }
 );
 
-const _PlusIcon: FunctionComponent<IconProps> = ({ width, height, color }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M12.9 5.69993C12.9 5.20287 12.4971 4.79993 12 4.79993C11.503 4.79993 11.1 5.20287 11.1 5.69993V11.0999H5.70005C5.20299 11.0999 4.80005 11.5029 4.80005 11.9999C4.80005 12.497 5.20299 12.8999 5.70005 12.8999L11.1 12.8999V18.2999C11.1 18.797 11.503 19.1999 12 19.1999C12.4971 19.1999 12.9 18.797 12.9 18.2999V12.8999H18.3C18.7971 12.8999 19.2 12.497 19.2 11.9999C19.2 11.5029 18.7971 11.0999 18.3 11.0999H12.9V5.69993Z"
-        fill={color || "currentColor"}
-      />
-    </svg>
-  );
-};
-
 const Styles = {
   ModalContainer: styled.div<{
     top: number;
@@ -239,16 +255,28 @@ const Styles = {
   `,
 
   TitleContainer: styled.div`
-    padding: 0 0.5rem 0.25rem 0.5rem;
+    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    gap: 0.75rem;
 
     color: ${({ theme }) =>
       theme.mode === "light" ? ColorPalette["gray-700"] : ColorPalette.white};
   `,
 
+  TitleText: styled.div`
+    flex: 1;
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    letter-spacing: -0.14px;
+    color: ${({ theme }) =>
+      theme.mode === "light"
+        ? ColorPalette["gray-700"]
+        : ColorPalette["gray-10"]};
+  `,
+
   SearchContainer: styled.div`
     padding: 0 0.3125rem;
     margin: 0.5rem 0;
