✨(frontend) new feedback link in header

this is just a link to an external url that is, for now, hardcoded as
our deploys dont have frontend env vars right now

src/frontend/panda.config.ts

@@ -201,12 +201,13 @@ const config: Config = {
           'subtle-text': { value: '{colors.red.700}' },
         },
         success: {
-          DEFAULT: { value: '{colors.emerald.700}' },
-          hover: { value: '{colors.emerald.800}' },
-          active: { value: '{colors.emerald.900}' },
+          DEFAULT: { value: '{colors.green.700}' },
+          hover: { value: '{colors.green.800}' },
+          active: { value: '{colors.green.900}' },
           text: { value: '{colors.white}' },
-          subtle: { value: '{colors.emerald.100}' },
-          'subtle-text': { value: '{colors.emerald.700}' },
+          subtle: { value: '{colors.green.100}' },
+          'subtle-text': { value: '{colors.green.800}' },
+          ...pandaPreset.theme.tokens.colors.green,
         },
         warning: {
           DEFAULT: { value: '{colors.amber.700}' },

src/frontend/src/components/Feedback.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { RiExternalLinkLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+export const Feedback = () => {
+  const { t } = useTranslation()
+  return (
+    <Button
+      href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+      variant="success"
+      target="_blank"
+    >
+      <span className={css({ marginRight: 0.5 })} aria-hidden="true">
+        💡
+      </span>
+      {t('feedbackAlert')}
+      <RiExternalLinkLine
+        size={16}
+        className={css({ marginLeft: 0.5 })}
+        aria-hidden="true"
+      />
+    </Button>
+  )
+}

src/frontend/src/layout/Header.tsx

@@ -6,6 +6,7 @@ import { A, Button, Popover, PopoverList, Text } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/utils/useMatchesRoute'
+import { Feedback } from '@/components/Feedback'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -26,21 +27,24 @@ export const Header = () => {
     >
       <Stack direction="row" justify="space-between" align="center">
         <header>
-          <Text bold variant="h1" margin={false}>
-            <Link
-              onClick={(event) => {
-                if (
-                  isRoom &&
-                  !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
-                ) {
-                  event.preventDefault()
-                }
-              }}
-              to="/"
-            >
-              {t('app')}
-            </Link>
-          </Text>
+          <Stack gap={1} direction="row" align="center">
+            <Text bold variant="h1" margin={false}>
+              <Link
+                onClick={(event) => {
+                  if (
+                    isRoom &&
+                    !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
+                  ) {
+                    event.preventDefault()
+                  }
+                }}
+                to="/"
+              >
+                {t('app')}
+              </Link>
+            </Text>
+            <Feedback />
+          </Stack>
         </header>
         <nav>
           <Stack gap={1} direction="row" align="center">

src/frontend/src/locales/de/global.json

@@ -6,6 +6,7 @@
   "error": {
     "heading": ""
   },
+  "feedbackAlert": "",
   "forbidden": {
     "heading": ""
   },

src/frontend/src/locales/en/global.json

@@ -6,6 +6,7 @@
   "error": {
     "heading": "An error occured while loading the page"
   },
+  "feedbackAlert": "Give us feedback on Meet",
   "forbidden": {
     "heading": "You don't have the permission to view this page"
   },

src/frontend/src/locales/fr/global.json

@@ -6,6 +6,7 @@
   "error": {
     "heading": "Une erreur est survenue lors du chargement de la page"
   },
+  "feedbackAlert": "Donnez-nous votre avis sur Meet",
   "forbidden": {
     "heading": "Accès interdit"
   },

src/frontend/src/primitives/Button.tsx

@@ -11,7 +11,8 @@ import { Tooltip } from './Tooltip'
 
 const button = cva({
   base: {
-    display: 'inline-block',
+    display: 'flex',
+    alignItems: 'center',
     transition: 'background 200ms, outline 200ms, border-color 200ms',
     cursor: 'pointer',
     border: '1px solid transparent',
@@ -56,6 +57,19 @@ const button = cva({
       primary: {
         colorPalette: 'primary',
       },
+      // @TODO: better handling of colors… this is a mess
+      success: {
+        colorPalette: 'success',
+        borderColor: 'success.300',
+        color: 'success.subtle-text',
+        backgroundColor: 'success.subtle',
+        '&[data-hovered]': {
+          backgroundColor: 'success.200',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'success.subtle!',
+        },
+      },
     },
     outline: {
       true: {