more styling cleanup (#114)

RedHatInsights · Feb 12, 2024 · 65268e7 · 65268e7
1 parent e0915e2
commit 65268e7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/src/Components/AstroChat/AstroChat.tsx b/src/Components/AstroChat/AstroChat.tsx
@@ -54,7 +54,7 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
 
   useLayoutEffect(() => {
     if (astroContainer.current) {
-      const messageContainer = astroContainer.current.querySelector('.astro-c-card__body');
+      const messageContainer = astroContainer.current.querySelector('.pf-v5-c-card__body');
       if (messageContainer) {
         messageContainer.scrollTo(0, messageContainer.scrollHeight);
       }
@@ -97,9 +97,8 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
   };
   return (
     <div ref={astroContainer}>
-      <Card className={`astro-c-card ${fullscreen ? 'astro-c-card-full-screen' : ''}`}>
+      <Card className={`${fullscreen ? 'pf-v5-c-card-full-screen' : ''}`}>
         <CardHeader
-          className="astro-c-card__header"
           actions={{
             actions: (
               <>
@@ -114,12 +113,12 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
           }}
         >
           <CardTitle>
-            <Title headingLevel="h4" size="lg" className="pf-u-color-light-100">
+            <Title headingLevel="h4" size="lg">
               Virtual Assistant
             </Title>
           </CardTitle>
         </CardHeader>
-        <CardBody className="astro-c-card__body pf-v5-u-px-md pf-v5-u-pt-xl pf-v5-m-scrollable pf-v5-u-background-color-100">
+        <CardBody>
           {messages.map((message, index) => {
             if ('isLoading' in message && message.isLoading) {
               return <LoadingMessageEntry key={index} />;
@@ -141,8 +140,7 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
             }
           })}
         </CardBody>
-
-        <CardFooter className="astro-c-card__footer pf-v5-u-p-0">
+        <CardFooter>
           <InputGroup>
             <TextArea
               value={input}

diff --git a/src/Components/AstroChat/AstroChatSkeleton.tsx b/src/Components/AstroChat/AstroChatSkeleton.tsx
@@ -19,9 +19,8 @@ import PlaneIcon from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 export const AstroChatSkeleton: React.FunctionComponent<unknown> = () => {
   return (
     <div>
-      <Card className="astro-c-card">
+      <Card>
         <CardHeader
-          className="astro-c-card__header"
           actions={{
             actions: (
               <>
@@ -36,17 +35,24 @@ export const AstroChatSkeleton: React.FunctionComponent<unknown> = () => {
           }}
         >
           <CardTitle>
-            <Title headingLevel="h4" size="lg" className="pf-u-color-light-100">
+            <Title headingLevel="h4" size="lg">
               Virtual Assistant
             </Title>
           </CardTitle>
         </CardHeader>
-        <CardBody className="astro-c-card__body pf-v5-u-px-md pf-v5-u-pt-xl pf-v5-m-scrollable pf-v5-u-background-color-100">
+        <CardBody>
           <Skeleton width="80%" />
         </CardBody>
-        <CardFooter className="astro-c-card__footer pf-v5-u-p-0">
+        <CardFooter>
           <InputGroup>
-            <TextArea placeholder="Type a message..." name="user-query" type="text" aria-label="User question" readOnlyVariant="plain" />
+            <TextArea
+              className="pf-v5-u-pl-md"
+              placeholder="Type a message..."
+              name="user-query"
+              type="text"
+              aria-label="User question"
+              readOnlyVariant="plain"
+            />
             <InputGroupText id="username">
               <Button isDisabled variant="plain" className="pf-v5-u-px-sm">
                 <PlaneIcon />

diff --git a/src/SharedComponents/AstroVirtualAssistant/astro-virtual-assistant.scss b/src/SharedComponents/AstroVirtualAssistant/astro-virtual-assistant.scss
@@ -1,11 +1,14 @@
-.astro-c-card {
+.pf-v5-c-card {
   width: 350px;
   height: 550px;
   @media screen and (max-width: 768px) {
     height: 420px;
     width: 100%;
   }
   overflow: hidden;
+  &__title {
+    color: var(--pf-v5-global--Color--light-100);
+  }
   &__header {
     background: url(../../assets/header-background-01.svg) var(--pf-v5-global--palette--red-200);
     background-repeat: no-repeat;
@@ -16,6 +19,10 @@
     }
   }
   &__body {
+    background-color: var(--pf-v5-global--BackgroundColor--100);
+    padding-left: var(--pf-v5-global--spacer--md);
+    padding-right: var(--pf-v5-global--spacer--md) ;
+    padding-top: var(--pf-v5-global--spacer--xl);
     overflow-y: scroll;
     &::-webkit-scrollbar{
       display: none;
@@ -63,6 +70,7 @@
     }
   }
   &__footer {
+    padding: 0;
     .pf-v5-c-input-group {
       height: 60px;
     }
@@ -76,7 +84,7 @@
   }
 }
 
-.astro-c-card-full-screen {
+.pf-v5-c-card-full-screen {
   height: calc(100vh - 220px);
   @media screen and (max-width: 768px) {
     width: 100vw;