フロントの微修正 (#717)

Co-authored-by: Taichiro Suzuki <[email protected]>
aws-samples · Nov 15, 2024 · a8066d4 · a8066d4
1 parent 257c98e
commit a8066d4
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 37 deletions.
diff --git a/packages/web/src/components/Drawer.tsx b/packages/web/src/components/Drawer.tsx
@@ -81,14 +81,15 @@ const Drawer: React.FC<Props> = (props) => {
       <DrawerBase>
         {useCaseBuilderEnabled && (
           <Switch
-            className="mx-3 mt-2"
-            label="ユースケースビルダー"
+            className="mx-3 mb-1 mt-3"
+            label="ビルダーモード"
             checked={false}
             onSwitch={() => {
               navigate(ROUTE_INDEX_USE_CASE_BUILDER);
             }}
           />
         )}
+        <div className="border-b" />
         <div className="text-aws-smile mx-3 my-1 text-xs">
           ユースケース <span className="text-gray-400">(生成 AI)</span>
         </div>

diff --git a/packages/web/src/components/useCaseBuilder/ButtonFavorite.tsx b/packages/web/src/components/useCaseBuilder/ButtonFavorite.tsx
@@ -12,7 +12,7 @@ type Props = BaseProps & {
 const ButtonFavorite: React.FC<Props> = (props) => {
   return (
     <ButtonIcon
-      className={`${props.className ?? ''} p-2 ${props.isFavorite ? 'text-aws-smile' : ''}`}
+      className={`${props.className ?? ''} ${props.isFavorite ? 'text-aws-smile' : ''}`}
       disabled={props.disabled}
       onClick={() => {
         props.onClick();

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderDrawer.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderDrawer.tsx
@@ -25,13 +25,15 @@ const UseCaseBuilderDrawer: React.FC<Props> = (props) => {
     <DrawerBase>
       <div className="flex-none">
         <Switch
-          className="mx-3 mt-2"
-          label="ユースケースビルダー"
+          className="mx-3 mb-1 mt-3"
+          label="ビルダーモード"
           checked
           onSwitch={() => {
             navigate('/');
           }}
         />
+        <div className="border-b" />
+        <div className="text-aws-smile mx-3 my-1 text-xs">メインメニュー</div>
         {items.map((item, idx) => (
           <DrawerItem
             key={idx}

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderHelp.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderHelp.tsx
@@ -41,7 +41,7 @@ type Props = {
 const UseCaseBuilderHelp: React.FC<Props> = (props) => {
   return (
     <div
-      className={`${props.isOpen ? 'visible w-96' : 'invisible w-0'} fixed right-0 z-[9999999] h-screen overflow-y-auto border-l bg-white px-6 py-3 shadow transition-all`}>
+      className={`${props.isOpen ? 'right-0' : '-right-96'} fixed z-[9999999] h-screen w-96 overflow-y-auto border-l bg-white px-6 py-3 shadow transition-all`}>
       <div className="mb-6 flex justify-between p-1 text-xl font-bold">
         <div>ヘルプ</div>
         <ButtonIcon onClick={props.onClose}>

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx
@@ -167,36 +167,40 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
   );
 
   return (
-    <div className="relative">
-      <div className="col-span-12 mb-4 flex h-0 items-center justify-center text-xl font-semibold">
-        {props.isLoading
-          ? '読み込み中...'
-          : props.title
-            ? props.title
-            : '[タイトル未入力]'}
-      </div>
-      {!props.previewMode && (
-        <div className="absolute -top-2 right-0">
-          <div className="flex items-center gap-2">
-            <ButtonFavorite
-              isFavorite={props.isFavorite}
-              disabled={props.isLoading}
-              onClick={props.onToggleFavorite}
-            />
+    <div>
+      <div className="mb-4 flex flex-col-reverse text-xl font-semibold md:flex-row">
+        {!props.previewMode && <div className="flex-1" />}
+        <div className="flex flex-1 flex-row justify-center">
+          {props.isLoading
+            ? '読み込み中...'
+            : props.title
+              ? props.title
+              : '[タイトル未入力]'}
+        </div>
+        {!props.previewMode && (
+          <div className="mb-2 flex flex-1 flex-row justify-end md:mb-0">
+            <div className="flex items-center">
+              <ButtonFavorite
+                isFavorite={props.isFavorite}
+                disabled={props.isLoading}
+                onClick={props.onToggleFavorite}
+              />
 
-            {props.canEdit && (
-              <>
-                <ButtonShare
-                  isShared={props.isShared}
-                  disabled={props.isLoading}
-                  onClick={props.onToggleShared}
-                />
-                <ButtonUseCaseEdit useCaseId={props.useCaseId} />
-              </>
-            )}
+              {props.canEdit && (
+                <>
+                  <ButtonUseCaseEdit useCaseId={props.useCaseId} />
+                  <ButtonShare
+                    className="ml-2"
+                    isShared={props.isShared}
+                    disabled={props.isLoading}
+                    onClick={props.onToggleShared}
+                  />
+                </>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
 
       <div className="pb-4 text-sm text-gray-600">
         {props.description ?? ''}

diff --git a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderEditPage.tsx
@@ -290,9 +290,15 @@ const UseCaseBuilderEditPage: React.FC = () => {
         }}
       />
       {(isLoading || isDeleting || isPosting) && (
-        <LoadingOverlay>
-          {isLoading ? '読み込み中...' : isDeleting ? '削除中...' : '登録中...'}
-        </LoadingOverlay>
+        <div className="absolute left-0 top-0">
+          <LoadingOverlay>
+            {isLoading
+              ? '読み込み中...'
+              : isDeleting
+                ? '削除中...'
+                : '登録中...'}
+          </LoadingOverlay>
+        </div>
       )}
 
       <UseCaseBuilderHelp