Sfoglia il codice sorgente

Add styles (grw-ai-assistant-chat-sidebar)

Shun Miyazawa 1 anno fa
parent
commit
34479e4aa7

+ 14 - 0
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.module.scss

@@ -0,0 +1,14 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/variables/growi-official-colors';
+@use '@growi/ui/scss/atoms/btn-muted';
+
+// == Colors
+.grw-ai-assistant-chat-sidebar :global {
+  .growi-ai-chat-icon {
+    color: growi-official-colors.$growi-ai-purple;
+  }
+
+  .btn-submit {
+    @include btn-muted.colorize(bs.$purple, bs.$purple);
+  }
+}

+ 7 - 3
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.tsx

@@ -6,6 +6,10 @@ import SimpleBar from 'simplebar-react';
 
 
 import { useAiAssistantChatSidebar } from '../../../stores/ai-assistant';
 import { useAiAssistantChatSidebar } from '../../../stores/ai-assistant';
 
 
+import styles from './AiAssistantChatSidebar.module.scss';
+
+const moduleClass = styles['grw-ai-assistant-chat-sidebar'] ?? '';
+
 const RIGHT_SIDEBAR_WIDTH = 500;
 const RIGHT_SIDEBAR_WIDTH = 500;
 
 
 type AiAssistantChatSidebarSubstanceProps = {
 type AiAssistantChatSidebarSubstanceProps = {
@@ -18,8 +22,8 @@ const AiAssistantChatSidebarSubstance: React.FC<AiAssistantChatSidebarSubstanceP
   return (
   return (
     <>
     <>
       <div className="d-flex align-items-center p-3 border-bottom">
       <div className="d-flex align-items-center p-3 border-bottom">
-        <span className="material-symbols-outlined me-2">robot</span>
-        <h6 className="mb-0 flex-grow-1">GROWI AI について</h6>
+        <span className="growi-custom-icons growi-ai-chat-icon me-3 fs-4">ai_assistant</span>
+        <h5 className="mb-0 fw-bold flex-grow-1">GROWI AI について</h5>
         <button
         <button
           type="button"
           type="button"
           className="btn btn-link p-0 border-0"
           className="btn btn-link p-0 border-0"
@@ -63,7 +67,7 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
       {isOpened && (
       {isOpened && (
         <div
         <div
           ref={sidebarRef}
           ref={sidebarRef}
-          className="position-fixed top-0 end-0 h-100 border-start bg-white shadow-sm"
+          className={`position-fixed top-0 end-0 h-100 border-start bg-white shadow-sm ${moduleClass}`}
           style={{ zIndex: 1500, width: `${RIGHT_SIDEBAR_WIDTH}px` }}
           style={{ zIndex: 1500, width: `${RIGHT_SIDEBAR_WIDTH}px` }}
           data-testid="grw-right-sidebar"
           data-testid="grw-right-sidebar"
         >
         >