Merge pull request #1538 from acelaya-forks/feature/brand-colors

Add initial support to new light mode brand color
2025-12-10 14:16:59 -06:00 · 2025-05-09 09:07:31 +02:00 · 2025-05-09 09:07:31 +02:00 · 03a0945a29
commit 03a0945a29
parent 869708469d 023a0ca824
10 changed files with 77 additions and 48 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.

 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).

+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* Update to `@shlinkio/shlink-frontend-kit` 0.9 and `@shlinkio/shlink-web-component` 0.14 to add initial support to the new light theme brand color.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [4.4.0] - 2025-04-20
 ### Added
 * [#1510](https://github.com/shlinkio/shlink-web-client/issues/1510) Existing HTTP credentials (cookies, TLS certs, authentication headers) can now be forwarded to the API server if appropriate [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Credentials) are set
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -5,7 +5,8 @@ services:
    build:
      context: .
      dockerfile: ./dev.Dockerfile
-    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
+    working_dir: /home/shlink/www
+    command: /bin/sh -c "npm install && npm run start"
    volumes:
      - ./:/home/shlink/www
    ports:
--- a/package-lock.json
+++ b/package-lock.json
@ -16,9 +16,9 @@
        "@json2csv/plainjs": "^7.0.6",
        "@reduxjs/toolkit": "^2.7.0",
        "@shlinkio/data-manipulation": "^1.0.3",
-        "@shlinkio/shlink-frontend-kit": "^0.8.13",
+        "@shlinkio/shlink-frontend-kit": "^0.9.3",
        "@shlinkio/shlink-js-sdk": "^2.1.0",
-        "@shlinkio/shlink-web-component": "^0.13.3",
+        "@shlinkio/shlink-web-component": "^0.14.0",
        "bootstrap": "5.2.3",
        "bottlejs": "^2.0.1",
        "clsx": "^2.1.1",
@ -2375,9 +2375,9 @@
      }
    },
    "node_modules/@formkit/drag-and-drop": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@formkit/drag-and-drop/-/drag-and-drop-0.4.2.tgz",
-      "integrity": "sha512-AVyhGFrIg51SpG+tjYQYC0J5LXCv4qCfPUl3Brr2vccictNnxOEgfJ1xCZsT0G5ugOASNBgGoTBXyrN/HxOxNQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@formkit/drag-and-drop/-/drag-and-drop-0.5.3.tgz",
+      "integrity": "sha512-VGQsKYc350OOMbz7wYt69YqDbn49x7RJ32eqiJieNke54nGZYmx18XEqTw0lBiJmH3RaiH6V45gB1u+tvI/TNw==",
      "license": "MIT"
    },
    "node_modules/@fortawesome/fontawesome-common-types": {
@ -3451,16 +3451,19 @@
      }
    },
    "node_modules/@shlinkio/shlink-frontend-kit": {
-      "version": "0.8.13",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.13.tgz",
-      "integrity": "sha512-dIlHuXVZ3OZxa0mJBHHPq2O45EuVVZXKeTzNh704pnm9dTY6vhhF+TEkNK1jiNgUmiRAtkcOAxd+ew8TQkAYfg==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.3.tgz",
+      "integrity": "sha512-DKmR2UKZz57IL/rSCQBxDEmejKeoJOQxR/cXXEP2IlP5Zt+TAjO/qS/jIVQDSms39ZWUYQINs5tKtC7RBboYaA==",
      "license": "MIT",
      "dependencies": {
        "clsx": "^2.1.1"
      },
      "peerDependencies": {
-        "@fortawesome/fontawesome-free": "^6.4.2",
-        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/fontawesome-common-types": "^6.7.2",
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
        "@fortawesome/react-fontawesome": "^0.2.2",
        "react": "^18.3 || ^19.0",
        "react-dom": "^18.3 || ^19.0",
@ -3481,12 +3484,12 @@
      "license": "MIT"
    },
    "node_modules/@shlinkio/shlink-web-component": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.13.3.tgz",
-      "integrity": "sha512-BXDzjAOucIOHentKoOf1gG5qmZGfDHJlkvqZdt/KwQ0Mp2OO/VJcKBFkmLhWwRDE4qli7QHv0dPK+Qey0NSVPA==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.0.tgz",
+      "integrity": "sha512-IzsSft5mkKZchk1MvfUsUgZtX0q5mYiisZlJmM1lt766ZeQHXROei1gnoWojtfB5zmSRe7gDwaE3Ogp05vGAOw==",
      "license": "MIT",
      "dependencies": {
-        "@formkit/drag-and-drop": "^0.4.2",
+        "@formkit/drag-and-drop": "^0.5.3",
        "@json2csv/plainjs": "^7.0.6",
        "@shlinkio/data-manipulation": "^1.0.3",
        "bottlejs": "^2.0.1",
@ -3501,16 +3504,16 @@
        "react-leaflet": "^4.2.1 || ^5.0",
        "react-swipeable": "^7.0.2",
        "react-tag-autocomplete": "^7.5.0",
-        "recharts": "^2.15.2"
+        "recharts": "^2.15.3"
      },
      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.4.2",
-        "@fortawesome/free-brands-svg-icons": "^6.4.2",
-        "@fortawesome/free-regular-svg-icons": "^6.4.2",
-        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-brands-svg-icons": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
        "@fortawesome/react-fontawesome": "^0.2.2",
        "@reduxjs/toolkit": "^2.5.0",
-        "@shlinkio/shlink-frontend-kit": "^0.8.10",
+        "@shlinkio/shlink-frontend-kit": "^0.9.1",
        "@shlinkio/shlink-js-sdk": "^2.0.0",
        "react": "^18.3 || ^19.0",
        "react-dom": "^18.3 || ^19.0",
@ -13802,9 +13805,9 @@
      }
    },
    "@formkit/drag-and-drop": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@formkit/drag-and-drop/-/drag-and-drop-0.4.2.tgz",
-      "integrity": "sha512-AVyhGFrIg51SpG+tjYQYC0J5LXCv4qCfPUl3Brr2vccictNnxOEgfJ1xCZsT0G5ugOASNBgGoTBXyrN/HxOxNQ=="
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@formkit/drag-and-drop/-/drag-and-drop-0.5.3.tgz",
+      "integrity": "sha512-VGQsKYc350OOMbz7wYt69YqDbn49x7RJ32eqiJieNke54nGZYmx18XEqTw0lBiJmH3RaiH6V45gB1u+tvI/TNw=="
    },
    "@fortawesome/fontawesome-common-types": {
      "version": "6.7.2",
@ -14391,9 +14394,9 @@
      "requires": {}
    },
    "@shlinkio/shlink-frontend-kit": {
-      "version": "0.8.13",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.8.13.tgz",
-      "integrity": "sha512-dIlHuXVZ3OZxa0mJBHHPq2O45EuVVZXKeTzNh704pnm9dTY6vhhF+TEkNK1jiNgUmiRAtkcOAxd+ew8TQkAYfg==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.9.3.tgz",
+      "integrity": "sha512-DKmR2UKZz57IL/rSCQBxDEmejKeoJOQxR/cXXEP2IlP5Zt+TAjO/qS/jIVQDSms39ZWUYQINs5tKtC7RBboYaA==",
      "requires": {
        "clsx": "^2.1.1"
      }
@ -14404,11 +14407,11 @@
      "integrity": "sha512-K6zmA/A7Ux9hTn+ZjAm85YmMl7/v5XgZBM62syCxCsK7Tdw7Gg4+C06cZ2gUv+HWrHtv5IXsi4ax00++8Kg5vw=="
    },
    "@shlinkio/shlink-web-component": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.13.3.tgz",
-      "integrity": "sha512-BXDzjAOucIOHentKoOf1gG5qmZGfDHJlkvqZdt/KwQ0Mp2OO/VJcKBFkmLhWwRDE4qli7QHv0dPK+Qey0NSVPA==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.14.0.tgz",
+      "integrity": "sha512-IzsSft5mkKZchk1MvfUsUgZtX0q5mYiisZlJmM1lt766ZeQHXROei1gnoWojtfB5zmSRe7gDwaE3Ogp05vGAOw==",
      "requires": {
-        "@formkit/drag-and-drop": "^0.4.2",
+        "@formkit/drag-and-drop": "^0.5.3",
        "@json2csv/plainjs": "^7.0.6",
        "@shlinkio/data-manipulation": "^1.0.3",
        "bottlejs": "^2.0.1",
@ -14423,7 +14426,7 @@
        "react-leaflet": "^4.2.1 || ^5.0",
        "react-swipeable": "^7.0.2",
        "react-tag-autocomplete": "^7.5.0",
-        "recharts": "^2.15.2"
+        "recharts": "^2.15.3"
      },
      "dependencies": {
        "react-leaflet": {
--- a/package.json
+++ b/package.json
@ -29,9 +29,9 @@
    "@json2csv/plainjs": "^7.0.6",
    "@reduxjs/toolkit": "^2.7.0",
    "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.8.13",
+    "@shlinkio/shlink-frontend-kit": "^0.9.3",
    "@shlinkio/shlink-js-sdk": "^2.1.0",
-    "@shlinkio/shlink-web-component": "^0.13.3",
+    "@shlinkio/shlink-web-component": "^0.14.0",
    "bootstrap": "5.2.3",
    "bottlejs": "^2.0.1",
    "clsx": "^2.1.1",
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@ -26,7 +26,7 @@ const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
  const settingsPath = '/settings';

  return (
-    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-brand tw:dark:bg-dm-brand">
+    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-main tw:dark:bg-dm-main">
      <NavbarBrand tag={Link} to="/">
        <ShlinkLogo className="tw:inline tw:w-7 tw:mr-1" color="white" /> Shlink
      </NavbarBrand>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -5,8 +5,8 @@ import pack from '../package.json';
 import { container } from './container';
 import { setUpStore } from './container/store';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
-import './tailwind.css';
 import './index.scss';
+import './tailwind.css';

 const store = setUpStore(container);
 const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;
--- a/src/servers/ManageServersRow.tsx
+++ b/src/servers/ManageServersRow.tsx
@ -27,7 +27,11 @@ const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps>
        <Table.Cell columnName="Auto-connect">
          {server.autoConnect && (
            <>
-              <FontAwesomeIcon icon={checkIcon} className="tw:text-brand" id="autoConnectIcon" />
+              <FontAwesomeIcon
+                icon={checkIcon}
+                className="tw:text-lm-brand tw:dark:text-dm-brand"
+                id="autoConnectIcon"
+              />
              <UncontrolledTooltip target="autoConnectIcon" placement="right">
                Auto-connect to this server
              </UncontrolledTooltip>
--- a/src/tailwind.css
+++ b/src/tailwind.css
@ -1,15 +1,7 @@
@import 'tailwindcss' prefix(tw) important;
-@source '../node_modules/@shlinkio/shlink-frontend-kit';
@import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
-
-@theme {
-    /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
-    --breakpoint-sm: 576px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 992px;
-    --breakpoint-xl: 1200px;
-    --breakpoint-2xl: 1400px;
-}
+@source '../node_modules/@shlinkio/shlink-frontend-kit';
+@source '../node_modules/@shlinkio/shlink-web-component';

@layer base {
    :root {
--- a/test/servers/snapshots/ManageServersRow.test.tsx.snap
+++ b/test/servers/snapshots/ManageServersRow.test.tsx.snap
@ -24,7 +24,7 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
        >
          <svg
            aria-hidden="true"
-            class="svg-inline--fa fa-check tw:text-brand"
+            class="svg-inline--fa fa-check tw:text-lm-brand tw:dark:text-dm-brand"
            data-icon="check"
            data-prefix="fas"
            focusable="false"
--- a/vite.config.ts
+++ b/vite.config.ts
@ -21,9 +21,20 @@ export default defineConfig({
    manifestFilename: 'manifest.json',
    manifest,
  })],
+
  build: {
    outDir: 'build',
  },
+
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // Silence annoying sass deprecation warnings until we get rid of bootstrap
+        silenceDeprecations: ['mixed-decls', 'abs-percent', 'color-functions', 'global-builtin', 'import'],
+      },
+    },
+  },
+
  server: {
    port: 3000,
    watch: {
@ -31,6 +42,7 @@ export default defineConfig({
      ignored: ['**/.idea/**', '**/.git/**', '**/build/**', '**/coverage/**', '**/test/**'],
    },
  },
+
  base: !homepage ? undefined : homepage, // Not using just homepage because empty string should be discarded

  // Vitest config