add feedback link

Azure · Sep 15, 2023 · 4f11771 · 4f11771
1 parent 6faa573
commit 4f11771
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/common/translations/en.js b/src/common/translations/en.js
@@ -64,6 +64,8 @@ const en = {
     'exterior': 'Exterior',
     'facility.levels': 'Facility Levels',
     'facility.name': 'Facility name',
+    'feedback': 'Feedback',
+    'feedback.link': 'Feedback link',
     'geography': 'Geography',
     'file.name': 'File name',
     'geography.europe': 'Europe',

diff --git a/src/components/top-bar/top-bar.js b/src/components/top-bar/top-bar.js
@@ -1,16 +1,17 @@
 import { useTranslation } from 'react-i18next';
-import { Icon } from '@fluentui/react/lib/Icon';
 
 import {
   azMapsCreatorTextStyle,
   barStyle,
   docLink,
+  linksContainer,
   logoContainer,
   msftAzureTextStyle,
   splitterStyle,
 } from './top-bar.style';
 
 const docsLink = 'https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2';
+const feedbackLink = 'https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest';
 
 const TopBar = () => {
   const { t } = useTranslation();
@@ -22,10 +23,14 @@ const TopBar = () => {
         <span className={splitterStyle}/>
         <span className={azMapsCreatorTextStyle}>Azure Maps Creator</span>
       </div>
-      <a className={docLink} href={docsLink} target='_blank' rel='noreferrer' aria-label={t('docs.link')}>
-        {t('docs')}&nbsp;
-        <Icon iconName='NavigateExternalInline' />
-      </a>
+      <div className={linksContainer}>
+        <a className={docLink} href={docsLink} target='_blank' rel='noreferrer' aria-label={t('docs.link')}>
+          {t('docs')}
+        </a>
+        <a className={docLink} href={feedbackLink} target='_blank' rel='noreferrer' aria-label={t('feedback.link')}>
+          {t('feedback')}
+        </a>
+      </div>
     </div>
   );
 };

diff --git a/src/components/top-bar/top-bar.style.js b/src/components/top-bar/top-bar.style.js
@@ -36,6 +36,14 @@ export const logoContainer = css`
 
 export const docLink = css`
   color: white;
-  margin: 0 1.25rem;
   text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const linksContainer = css`
+  display: flex;
+  gap: 1rem;
+  margin-right: 1.25rem;
 `;