Ver Fonte

refactor: adjust button styles and layout in PageSelectionMethodButtons component

Shun Miyazawa há 8 meses atrás
pai
commit
72713545cc

+ 0 - 7
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageSelectionMethodButtons.module.scss

@@ -1,12 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 
-.page-selection-method-buttons :global {
-  .page-selection-method-btn {
-      width: 280px;
-  }
-}
-
-
 // == Colors
 // == Colors
 .page-selection-method-buttons :global {
 .page-selection-method-buttons :global {
   .page-selection-method-btn {
   .page-selection-method-btn {

+ 4 - 4
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageSelectionMethodButtons.tsx

@@ -14,7 +14,7 @@ const SelectionButton = (props: { icon: string, label: string, onClick: () => vo
   return (
   return (
     <button
     <button
       type="button"
       type="button"
-      className="btn p-4 text-center page-selection-method-btn"
+      className="btn text-center py-4 w-100 page-selection-method-btn"
       onClick={onClick}
       onClick={onClick}
     >
     >
       <span
       <span
@@ -34,15 +34,15 @@ export const PageSelectionMethodButtons = (): JSX.Element => {
 
 
   return (
   return (
     <div className={moduleClass}>
     <div className={moduleClass}>
-      <div className="row justify-content-center">
-        <div className="col-auto">
+      <div className="row g-3">
+        <div className="col">
           <SelectionButton
           <SelectionButton
             icon="manage_search"
             icon="manage_search"
             label={t('modal_ai_assistant.search_by_keyword')}
             label={t('modal_ai_assistant.search_by_keyword')}
             onClick={() => changePageMode(AiAssistantManagementModalPageMode.KEYWORD_SEARCH)}
             onClick={() => changePageMode(AiAssistantManagementModalPageMode.KEYWORD_SEARCH)}
           />
           />
         </div>
         </div>
-        <div className="col-auto">
+        <div className="col">
           <SelectionButton
           <SelectionButton
             icon="account_tree"
             icon="account_tree"
             label={t('modal_ai_assistant.select_from_page_tree')}
             label={t('modal_ai_assistant.select_from_page_tree')}