diff --git a/web/src/components/features/examples/ExamplesSection/ExamplesSection.tsx b/web/src/components/features/examples/ExamplesSection/ExamplesSection.tsx index bdd09ab4..a9c4d004 100644 --- a/web/src/components/features/examples/ExamplesSection/ExamplesSection.tsx +++ b/web/src/components/features/examples/ExamplesSection/ExamplesSection.tsx @@ -9,6 +9,7 @@ import { DefaultButton, type IButtonProps, type IStackItemProps, + type IButtonStyles, } from '@fluentui/react' import type { Snippet } from '~/services/examples' @@ -75,7 +76,7 @@ export const ExamplesSection: React.FC = ({ label, snippets, onSelect }) }, } - const btnStyles = { + const btnStyles: IButtonStyles = { root: { maxWidth: 'none', minWidth: 'none', @@ -83,9 +84,14 @@ export const ExamplesSection: React.FC = ({ label, snippets, onSelect }) padding: `0 ${DefaultSpacing.s1}`, margin: DefaultSpacing.s1, borderColor: semanticColors.variantBorder, + justifyContent: 'flex-start', + alignContent: 'center', }, icon: { marginRight: DefaultSpacing.s1, + height: '1em', + fontSize: '1em', + lineHeight: '1em', }, textContainer: { textAlign: 'left', diff --git a/web/src/components/modals/AboutModal/FooterButtons/FooterButtons.tsx b/web/src/components/modals/AboutModal/FooterButtons/FooterButtons.tsx index 47465c6e..fbe1ed42 100644 --- a/web/src/components/modals/AboutModal/FooterButtons/FooterButtons.tsx +++ b/web/src/components/modals/AboutModal/FooterButtons/FooterButtons.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Stack, DefaultButton, mergeStyleSets } from '@fluentui/react' +import { Stack, DefaultButton, mergeStyleSets, type IButtonStyles } from '@fluentui/react' import environment from '~/environment' @@ -13,11 +13,18 @@ const styles = mergeStyleSets({ flexDirection: 'column', }, }, - button: { - display: 'block', - }, }) +const btnStyles: IButtonStyles = { + root: { + display: 'flex', + }, + icon: { + fontSize: '14px', + height: '14px', + }, +} + export const FooterButtons: React.FC = () => ( ( > ( ( = ({ visible, snippetId, originUrl, onDismiss styles={{ root: [ { - color: bodyBackground, + // HACK: for some reason in recent @fluentui/react link color is flickering. + color: `${bodyBackground} !important`, }, ], }}