From afd2f9a2990f76abffceeb8b243ff12fc3d33873 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Thu, 25 Jul 2024 15:44:54 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20new=20feedback=20link=20i?=
 =?UTF-8?q?n=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             | 11 ++++----
 src/frontend/src/components/Feedback.tsx | 25 +++++++++++++++++
 src/frontend/src/layout/Header.tsx       | 34 +++++++++++++-----------
 src/frontend/src/locales/de/global.json  |  1 +
 src/frontend/src/locales/en/global.json  |  1 +
 src/frontend/src/locales/fr/global.json  |  1 +
 src/frontend/src/primitives/Button.tsx   | 16 ++++++++++-
 7 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 src/frontend/src/components/Feedback.tsx

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 79f581ff..1574a509 100644
--- a/src/frontend/panda.config.ts
+++ b/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}' },
diff --git a/src/frontend/src/components/Feedback.tsx b/src/frontend/src/components/Feedback.tsx
new file mode 100644
index 00000000..7d995e5c
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index f03e0021..fdf711cf 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/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">
diff --git a/src/frontend/src/locales/de/global.json b/src/frontend/src/locales/de/global.json
index 5e902bab..a1670e4c 100644
--- a/src/frontend/src/locales/de/global.json
+++ b/src/frontend/src/locales/de/global.json
@@ -6,6 +6,7 @@
   "error": {
     "heading": ""
   },
+  "feedbackAlert": "",
   "forbidden": {
     "heading": ""
   },
diff --git a/src/frontend/src/locales/en/global.json b/src/frontend/src/locales/en/global.json
index 6cfcb6ec..db8f569d 100644
--- a/src/frontend/src/locales/en/global.json
+++ b/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"
   },
diff --git a/src/frontend/src/locales/fr/global.json b/src/frontend/src/locales/fr/global.json
index 63b477a3..5d07ce14 100644
--- a/src/frontend/src/locales/fr/global.json
+++ b/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"
   },
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index 53d93e4c..346713a5 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/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: {