From 32b9b752dd3e38069cb4f0842ac20daf5a9ec8fe Mon Sep 17 00:00:00 2001
From: x1unix <9203548+x1unix@users.noreply.github.com>
Date: Sat, 25 Jan 2025 01:33:51 -0500
Subject: [PATCH 1/3] feat: fix broken button styles after @fluentui/react
 migration

---
 .../FooterButtons/FooterButtons.tsx           | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

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 = () => (
   <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={{

From 1de958bef18cc15f68bbe83db57b1d3595887481 Mon Sep 17 00:00:00 2001
From: x1unix <9203548+x1unix@users.noreply.github.com>
Date: Sat, 25 Jan 2025 01:45:20 -0500
Subject: [PATCH 2/3] fix: examples buttons

---
 .../features/examples/ExamplesSection/ExamplesSection.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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<Props> = ({ label, snippets, onSelect })
     },
   }
 
-  const btnStyles = {
+  const btnStyles: IButtonStyles = {
     root: {
       maxWidth: 'none',
       minWidth: 'none',
@@ -83,9 +84,14 @@ export const ExamplesSection: React.FC<Props> = ({ 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',

From 8b8492a3afe350d8e0ba553ff38b7691dc72dc8f Mon Sep 17 00:00:00 2001
From: x1unix <9203548+x1unix@users.noreply.github.com>
Date: Sat, 25 Jan 2025 01:52:11 -0500
Subject: [PATCH 3/3] fix: share popup link color

---
 web/src/components/utils/SharePopup.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/utils/SharePopup.tsx b/web/src/components/utils/SharePopup.tsx
index caca0b20..e6faf6ba 100644
--- 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`,
             },
           ],
         }}