Add fav icon & change the logo to be more consistent between OS's (#288)

felixmosh · Jun 2, 2021 · 1298406 · 1298406
1 parent 9aabd7c
commit 1298406
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 16 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -39,6 +39,7 @@
     "axios": "^0.21.1",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "clsx": "^1.1.1",
+    "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.6",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "date-fns": "2.21.3",

diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
@@ -31,6 +31,12 @@
     box-sizing: content-box;
 }
 
+.header > .logo > img {
+    width: 1.2em;
+    margin-right: 0.3em;
+    margin-bottom: -0.2em;
+}
+
 .header + main {
     padding-top: var(--header-height);
 }
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
@@ -1,9 +1,13 @@
 import React, { PropsWithChildren } from 'react';
 import s from './Header.module.css';
+import { getStaticPath } from '../../utils/getStaticPath';
 
 export const Header = ({ children }: PropsWithChildren<any>) => (
   <header className={s.header}>
-    <div className={s.logo}>🎯 Bull Dashboard</div>
+    <div className={s.logo}>
+      <img src={getStaticPath('/images/logo.svg')} alt="Bull Dashboard" />
+      Bull Dashboard
+    </div>
     {children}
   </header>
 );
diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
@@ -7,5 +7,5 @@
 }
 
 .jobLogs > li {
-  white-space: pre-line;
+  white-space: pre-wrap;
 }
diff --git a/packages/ui/src/index.ejs b/packages/ui/src/index.ejs
@@ -8,6 +8,8 @@
     />
     <base href="<%= basePath %>" />
     <title>Bull Dashboard</title>
+    <link rel="alternate icon" type="image/png" href="/static/favicon-32x32.png">
+    <link rel="icon" type="image/svg+xml" href="/static/images/logo.svg">
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body>

diff --git a/packages/ui/src/static/favicon-32x32.png b/packages/ui/src/static/favicon-32x32.png
diff --git a/packages/ui/src/static/favicon.ico b/packages/ui/src/static/favicon.ico
diff --git a/packages/ui/src/static/images/logo.svg b/packages/ui/src/static/images/logo.svg
diff --git a/packages/ui/src/utils/getStaticPath.ts b/packages/ui/src/utils/getStaticPath.ts
@@ -0,0 +1,3 @@
+export function getStaticPath(path: string): string {
+  return `/static${path}`;
+}
diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js
@@ -6,6 +6,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const isProd = process.env.NODE_ENV === 'production';
 const devServerPort = 9000;
@@ -20,9 +21,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, './dist/static'),
     filename: `[name]${isProd ? '.[contenthash]' : ''}.js`,
-    publicPath: `${
-      isProd ? basePath : `http://localhost:${devServerPort}`
-    }/static/`,
+    publicPath: `${isProd ? basePath : `http://localhost:${devServerPort}`}/static/`,
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
@@ -40,9 +39,7 @@ module.exports = {
               modules: {
                 auto: true,
                 exportLocalsConvention: 'camelCaseOnly',
-                localIdentName: isProd
-                  ? '[hash:base64:6]'
-                  : '[name]__[local]--[hash:base64:5]',
+                localIdentName: isProd ? '[hash:base64:6]' : '[name]__[local]--[hash:base64:5]',
               },
             },
           },
@@ -63,19 +60,15 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
-              plugins: [
-                !isProd && require.resolve('react-refresh/babel'),
-              ].filter(Boolean),
+              plugins: [!isProd && require.resolve('react-refresh/babel')].filter(Boolean),
             },
           },
         ],
       },
     ],
   },
   optimization: {
-    minimizer: [isProd && `...`, isProd && new CssMinimizerPlugin()].filter(
-      Boolean
-    ),
+    minimizer: [isProd && `...`, isProd && new CssMinimizerPlugin()].filter(Boolean),
     chunkIds: 'named',
     splitChunks: {
       cacheGroups: {
@@ -104,6 +97,9 @@ module.exports = {
       },
     }),
     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
+    new CopyPlugin({
+      patterns: [{ from: './src/static/', to: './' }],
+    }),
     new ForkTsCheckerWebpackPlugin(),
     !isProd && new ReactRefreshWebpackPlugin(),
   ].filter(Boolean),

diff --git a/yarn.lock b/yarn.lock
@@ -4908,6 +4908,19 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-webpack-plugin@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-9.0.0.tgz#2bf592785d2fcdde9342dfed3676490fe0aa7ce8"
+  integrity sha512-k8UB2jLIb1Jip2nZbCz83T/XfhfjX6mB1yLJNYKrpYi7FQimfOoFv/0//iT6HV1K8FwUB5yUbCcnpLebJXJTug==
+  dependencies:
+    fast-glob "^3.2.5"
+    glob-parent "^6.0.0"
+    globby "^11.0.3"
+    normalize-path "^3.0.0"
+    p-limit "^3.1.0"
+    schema-utils "^3.0.0"
+    serialize-javascript "^5.0.1"
+
 core-js-compat@^3.9.0, core-js-compat@^3.9.1:
   version "3.10.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.10.2.tgz#0a675b4e1cde599616322a72c8886bcf696f3ec3"
@@ -6202,7 +6215,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.1.1:
+fast-glob@^3.1.1, fast-glob@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
   integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
@@ -6787,6 +6800,13 @@ glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.0.tgz#f851b59b388e788f3a44d63fab50382b2859c33c"
+  integrity sha512-Hdd4287VEJcZXUwv1l8a+vXC1GjOQqXe+VS30w/ypihpcnu9M1n3xeYeJu5CBpeEQj2nAab2xxz28GuA3vp4Ww==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -6830,7 +6850,7 @@ globals@^13.6.0:
   dependencies:
     type-fest "^0.20.2"
 
-globby@11.0.3, globby@^11.0.1, globby@^11.0.2:
+globby@11.0.3, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3:
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
   integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==