feat: update button and tooltip content and UI

README.md

@@ -23,7 +23,39 @@ Check the page that opens if the Header is properly rendered and if the latest p
 
 It will create a `build` folder with the compiled assets.
 
-## URL
+## How to use
 
-https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js
-https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js.map
+Put the full URL of the script file in the `src` attribute of a `<script>` tag:
+
+```html
+<script src="https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js"></script>
+```
+
+You can place the script reference in head or body tag, as you like.
+
+Then, you can use the **hub-button-app** custom element wherever you need it.
+Please notice the custom element exposes a property called **theme** to control its appearance; possible values can be
+`dark` or `light`, with light as the default value.
+
+### Embed into another project (local fallback)
+
+The script (and its sourcemap) can be embedded in another project codebase, this can be useful as a local fallback in
+case the remote source became unavailable.
+
+To make the static assets on your computer please run `make static-assets`.
+
+Please notice that in macOS `''` must be added after `-i` in each sed command, e.g.
+`sed -i 's@something@something@' dest.file` become `sed -i '' 's@something@something@' dest.file`.
+
+When you have the static assets available please remember to update, in both the script and its sourcemap, the following
+lines:
+
+| File | Line | Key |
+| - | - | - |
+| main-v1.js | 3 | `sourceMappingURL` |
+| main-v1.js.map | 1 | `file` |
+
+### Deployment URLs
+
+- https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js
+- https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js.map

public/index.html

@@ -9,7 +9,7 @@
      point this script src to the local build
     -->
     <script
-      type="text/javascript"
+      type="text/babel"
       src="/build/static/js/"
     ></script>
     <!--

src/App.tsx

@@ -1,11 +1,19 @@
 import HubButton from 'components/HubButton'
 import { darkTheme, lightTheme } from 'components/themes'
+import { useMemo } from 'react'
 import { ThemeProvider } from 'styled-components'
 
-export const App = ({ theme = 'light' }: { theme?: string }) => {
+export const App = ({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {
+  const safeTheme = useMemo(() => {
+    if (!['light', 'dark'].includes(theme)) {
+      return 'light'
+    }
+    return theme
+  }, [theme])
+
   return (
-    <ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
-      <HubButton />
+    <ThemeProvider theme={safeTheme === 'dark' ? darkTheme : lightTheme}>
+      <HubButton theme={safeTheme} />
     </ThemeProvider>
   )
 }