button width and modal header font fix (#32)

reportportal · Aug 1, 2024 · ae76350 · ae76350
1 parent d7cfa7e
commit ae76350
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss
@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   height: 36px;
+  min-width: 120px;
   padding: 7px 16px;
   margin: 0;
   outline: none;

diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx
@@ -45,6 +45,7 @@ export const WithSteps: Story = {
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [step, setStep] = useState<number>(1);
+    const buttonStyle = { minWidth: 'fit-content' };
 
     const CustomFooter: FC<{ closeHandler: () => void }> = ({ closeHandler }) => {
       return (
@@ -55,14 +56,16 @@ export const WithSteps: Story = {
             gap: 18,
           }}
         >
-          <Button variant={'ghost'} onClick={() => setStep(1)}>
+          <Button style={buttonStyle} variant={'ghost'} onClick={() => setStep(1)}>
             Go to 1 step
           </Button>
-          <Button variant={'ghost'} onClick={() => setStep(2)}>
+          <Button style={buttonStyle} variant={'ghost'} onClick={() => setStep(2)}>
             Go to 2 step
           </Button>
-          <Button onClick={() => console.log('done')}>OK</Button>
-          <Button variant={'danger'} onClick={() => closeHandler()}>
+          <Button style={buttonStyle} onClick={() => console.log('done')}>
+            OK
+          </Button>
+          <Button style={buttonStyle} variant={'danger'} onClick={() => closeHandler()}>
             Cancel
           </Button>
         </div>

diff --git a/src/components/modal/modalHeader/modalHeader.module.scss b/src/components/modal/modalHeader/modalHeader.module.scss
@@ -21,6 +21,7 @@
 }
 
 .modal-title {
+  font-family: var(--rp-ui-base-font-family-heading);
   flex-grow: 1;
   vertical-align: middle;
   text-overflow: ellipsis;