fix: broken styles after @fluentui/react migration (#466)

* feat: fix broken button styles after @fluentui/react migration * fix: examples buttons * fix: share popup link color
x1unix · Jan 25, 2025 · 59be850 · 59be850
1 parent 752eb84
commit 59be850
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git 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,17 +76,22 @@ export const ExamplesSection: React.FC<Props> = ({ label, snippets, onSelect })
     },
   }
 
-  const btnStyles = {
+  const btnStyles: IButtonStyles = {
     root: {
       maxWidth: 'none',
       minWidth: 'none',
       flex: '1',
       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
@@ -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 = () => (
   <Stack
     horizontal
@@ -31,7 +38,7 @@ export const FooterButtons: React.FC = () => (
   >
     <Stack.Item grow={1}>
       <DefaultButton
-        className={styles.button}
+        styles={btnStyles}
         href={environment.urls.issue}
         target="_blank"
         iconProps={{
@@ -43,7 +50,7 @@ export const FooterButtons: React.FC = () => (
     </Stack.Item>
     <Stack.Item grow={1}>
       <DefaultButton
-        className={styles.button}
+        styles={btnStyles}
         href={environment.urls.github}
         target="_blank"
         iconProps={{
@@ -56,7 +63,7 @@ export const FooterButtons: React.FC = () => (
 
     <Stack.Item grow={1}>
       <DefaultButton
-        className={styles.button}
+        styles={btnStyles}
         href={environment.urls.donate}
         target="_blank"
         iconProps={{

diff --git a/web/src/components/utils/SharePopup.tsx b/web/src/components/utils/SharePopup.tsx
@@ -49,7 +49,8 @@ export const SharePopup: FC<Props> = ({ visible, snippetId, originUrl, onDismiss
         styles={{
           root: [
             {
-              color: bodyBackground,
+              // HACK: for some reason in recent @fluentui/react link color is flickering.
+              color: `${bodyBackground} !important`,
             },
           ],
         }}