feat(select): add small size option for Select component and corresponding styles

fix(provider): update button icon styles in ProviderHeaderCard
style(provider): enhance layout and typography in ProviderHeaderCard and ProviderResourcePanel
fix(provider): update status styles in ProviderResourceTable and sharedForm

src/components/ui/Select.module.scss

@@ -45,6 +45,13 @@
   }
 }
 
+.triggerSm {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  box-shadow: none;
+}
+
 .triggerText {
   overflow: hidden;
   text-overflow: ellipsis;

src/components/ui/Select.tsx

@@ -28,6 +28,7 @@ interface SelectProps {
   ariaLabelledBy?: string;
   ariaDescribedBy?: string;
   fullWidth?: boolean;
+  size?: 'sm' | 'md';
   id?: string;
 }
 
@@ -87,6 +88,7 @@ export function Select({
   ariaLabelledBy,
   ariaDescribedBy,
   fullWidth = true,
+  size = 'md',
   id,
 }: SelectProps) {
   const generatedId = useId();
@@ -301,7 +303,7 @@ export function Select({
         <button
           id={selectId}
           type="button"
-          className={styles.trigger}
+          className={`${styles.trigger} ${size === 'sm' ? styles.triggerSm : ''}`.trim()}
           onClick={disabled ? undefined : () => setOpen((prev) => !prev)}
           onKeyDown={handleKeyDown}
           aria-haspopup="listbox"

src/components/ui/icons.tsx

@@ -207,7 +207,7 @@ export function IconPencil({ size = 20, ...props }: IconProps) {
 export function IconAlertTriangle({ size = 20, ...props }: IconProps) {
   return (
     <svg {...baseSvgProps} width={size} height={size} {...props}>
-      <path d="M21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
       <path d="M12 9v4" />
       <path d="M12 17h.01" />
     </svg>

src/features/providers/components/OpenAIBrandToolbar.tsx

@@ -88,6 +88,7 @@ export function OpenAIBrandToolbar({
           options={sortOptions}
           onChange={(value) => onSortBy(value as OpenAISortBy)}
           ariaLabel={t('providersPage.toolbar.sortBy')}
+          size="sm"
         />
         <button
           type="button"

src/features/providers/components/ProviderHeaderCard.module.scss

@@ -2,11 +2,9 @@
 @use '../../../styles/variables' as *;
 
 .card {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .row {
@@ -30,9 +28,8 @@
 
 .title {
   margin: 0;
-  font-size: 22px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-size: 28px;
+  font-weight: 700;
   color: var(--text-primary);
 }
 
@@ -108,7 +105,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 20px;
 }
 
 .chip {
@@ -141,6 +137,11 @@
   animation: pwc-spin 0.9s linear infinite;
 }
 
+.btnIcon {
+  display: inline-flex;
+  align-items: center;
+}
+
 @keyframes pwc-spin {
   from {
     transform: rotate(0deg);

src/features/providers/components/ProviderHeaderCard.tsx

@@ -51,7 +51,7 @@ export function ProviderHeaderCard({
                 : t('providersPage.actions.refresh')
             }
           >
-            <span className={isFetching ? styles.spin : undefined}>
+            <span className={`${styles.btnIcon} ${isFetching ? styles.spin : ''}`.trim()}>
               {isFetching ? <IconLoader2 size={14} /> : <IconRefreshCw size={14} />}
             </span>
             <span>

src/features/providers/components/ProviderResourcePanel.module.scss

@@ -43,18 +43,17 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
 }
 
 .titleRow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .logo {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: var(--radius-md);
   object-fit: contain;
   flex-shrink: 0;
@@ -67,17 +66,11 @@
 }
 
 .title {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--muted-foreground);
-  margin: 0;
-  line-height: 1.5;
+  letter-spacing: -0.005em;
 }
 
 .searchWrap {

src/features/providers/components/ProviderResourcePanel.tsx

@@ -89,9 +89,6 @@ export function ProviderResourcePanel({
                 {t(`providersPage.providerNames.${group.id}`)}
               </h2>
             </div>
-            <p className={styles.subtitle}>
-              {t('providersPage.table.description', { route: group.path })}
-            </p>
           </div>
           {group.id !== 'ampcode' ? (
             <div className={styles.searchWrap}>

src/features/providers/components/ProviderResourceTable.module.scss

@@ -113,9 +113,9 @@
 }
 
 .statusActive {
-  border-color: var(--primary-30);
-  background: var(--primary-10);
-  color: var(--primary-color);
+  border-color: var(--success-badge-border);
+  background: var(--success-badge-bg);
+  color: var(--success-badge-text);
 }
 
 .statusDisabled {

src/features/providers/sheets/forms/sharedForm.module.scss

@@ -310,7 +310,7 @@
 }
 
 .statusIconSuccess {
-  color: var(--primary-color);
+  color: var(--success-color);
 }
 
 .statusIconError {