Merge pull request #249 from rebeccaalpert/jump-links

fix(JumpButton): Shrink it for now
patternfly · Oct 29, 2024 · e3ac08a · e3ac08a
2 parents f79b6f3 + a90edd0
commit e3ac08a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/packages/module/src/MessageBox/JumpButton.scss b/packages/module/src/MessageBox/JumpButton.scss
@@ -4,13 +4,16 @@
 // importants are temporary until we can find a workaround for the way Backstage is pulling in style sheets
 .pf-chatbot__jump {
   position: absolute !important;
-  inset-inline-start: 50% !important;
-  width: 3rem !important;
-  height: 3rem !important;
+  inset-inline-start: 75% !important;
+  width: 2rem !important;
+  height: 2rem !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: var(--pf-t--global--spacer--md) !important;
   border-radius: var(--pf-t--global--border--radius--pill) !important;
-
-  background-color: var(--pf-t--chatbot--jump--background) !important;
+  --pf-v6-c-button--MinWidth: 2rem;
+  background-color: var(--pf-t--global--background--color--primary--default) !important;
   border: 1px solid var(--pf-t--chatbot--border) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
   color: var(--pf-t--chatbot--icon--fill) !important;
@@ -22,9 +25,13 @@
     opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
   z-index: var(--pf-t--global--z-index--md) !important;
 
+  .pf-v6-c-button__text {
+    line-height: 1rem;
+  }
+
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot--jump--background--hover) !important;
+    background-color: var(--pf-t--global--background--color--primary--hover) !important;
     box-shadow: var(--pf-t--global--box-shadow--md) !important;
     color: var(--pf-t--chatbot--icon--fill--hover) !important;
   }

diff --git a/packages/module/src/MessageBox/JumpButton.tsx b/packages/module/src/MessageBox/JumpButton.tsx
@@ -27,7 +27,7 @@ const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidd
         aria-label={`Jump ${position} button`}
         onClick={onClick}
       >
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize="lg" isInline>
           {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
         </Icon>
       </Button>

diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss
@@ -39,8 +39,6 @@
 
   --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
   --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
-  --pf-t--chatbot--jump--background: var(--pf-t--chatbot--background);
-  --pf-t--chatbot--jump--background--hover: var(--pf-t--color--white);
 
   --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
 
@@ -76,7 +74,6 @@
 :where(.pf-v6-theme-dark) {
   --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
   --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-  --pf-t--chatbot--jump--background--hover: var(--pf-t--color--black);
 
   --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);