Update logo around the website

updated the favicon with a webpack plugin, as will as on the MainLayout
Plus some other tweaks to the main layout while I was there

resolves #107

.vscode/settings.json

@@ -19,6 +19,7 @@
   "cSpell.words": [
     "Initialised",
     "Uploader",
+    "describedby",
     "initialise",
     "redwoodjs"
   ]

web/config/webpack.config.js

@@ -1,5 +1,12 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
-module.exports = {
+module.exports = (config, { env }) => {
-  plugins: [new MonacoWebpackPlugin()],
+  config.plugins.forEach((plugin) => {
+    if (plugin.constructor.name === 'HtmlWebpackPlugin') {
+      plugin.options.favicon = './src/favicon.svg'
+    }
+  })
+  config.plugins.push(new MonacoWebpackPlugin())
+
+  return config
 }

web/package.json

@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "autoprefixer": "9.8.6",
+    "html-webpack-plugin": "^4.5.0",
     "postcss-loader": "4.0.2",
     "tailwindcss": "^1.9.1"
   }

web/src/index.html

@@ -4,9 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="icon" type="image/png" href="/favi2.jpg" />
+    <title>CadHub</title> <!-- to be replaced by react helmet -->
-    <title><%= htmlWebpackPlugin.options.title %></title>
-
     <script>
       // Install Cascade Studio as a Progressive Web App for Offline Access
       // This needs to be put before ANY HTTP Requests are made, so it can cache them.

web/src/layouts/MainLayout/MainLayout.js

@@ -19,7 +19,6 @@ export const QUERY = gql`
 `
 import Svg from 'src/components/Svg'
 import ImageUploader from 'src/components/ImageUploader'
-import logo from 'src/layouts/MainLayout/Logo_2.jpg'
 
 const MainLayout = ({ children }) => {
   const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
@@ -56,8 +55,8 @@ const MainLayout = ({ children }) => {
           <ul className="flex items-center">
             <li>
               <Link to={routes.home()}>
-                <div className="rounded-full overflow-hidden ml-12">
+                <div className="rounded-full overflow-hidden ml-8">
-                  <img src={logo} />
+                  <Svg className="w-16" name="favicon" />
                 </div>
               </Link>
             </li>
@@ -99,19 +98,34 @@ const MainLayout = ({ children }) => {
                 <Svg name="plus" className="text-gray-700 w-full h-full" />
               )}
             </li>
-            <li className="h-10 w-10 border-1 rounded-full border-indigo-300 text-indigo-200">
+            {isAuthenticated ? (
-              <div aria-describedby={popoverId} onMouseOver={togglePopover}>
+              <li
-                {!loading && (
+                className="h-10 w-10 border-2 rounded-full border-indigo-300 text-indigo-200"
-                  <ImageUploader
+                aria-describedby={popoverId}
-                    className="rounded-full object-cover"
+              >
-                    onImageUpload={() => {}}
+                <button className="w-full h-full" onClick={togglePopover}>
-                    aspectRatio={1}
+                  {!loading && (
-                    imageUrl={data?.user?.image}
+                    <ImageUploader
-                    width={80}
+                      className="rounded-full object-cover"
-                  />
+                      onImageUpload={() => {}}
-                )}
+                      aspectRatio={1}
-              </div>
+                      imageUrl={data?.user?.image}
-            </li>
+                      width={80}
+                    />
+                  )}
+                </button>
+              </li>
+            ) : (
+              <li>
+                <a
+                  href="#"
+                  className="text-indigo-200 font-semibold underline"
+                  onClick={logIn}
+                >
+                  Sign in/up
+                </a>
+              </li>
+            )}
           </ul>
           <Popover
             id={popoverId}

yarn.lock

@@ -8908,6 +8908,21 @@ html-webpack-plugin@^4.0.0-beta.2, html-webpack-plugin@^4.0.2:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
+html-webpack-plugin@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
+  integrity sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==
+  dependencies:
+    "@types/html-minifier-terser" "^5.0.0"
+    "@types/tapable" "^1.0.5"
+    "@types/webpack" "^4.41.8"
+    html-minifier-terser "^5.0.1"
+    loader-utils "^1.2.3"
+    lodash "^4.17.15"
+    pretty-error "^2.1.1"
+    tapable "^1.1.3"
+    util.promisify "1.0.0"
+
 htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -11912,24 +11927,16 @@ open@^7.0.0:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
-opencascade.js@0.1.15:
+opencascade.js@^0.1.15:
-  version "0.1.15"
+  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/opencascade.js/-/opencascade.js-0.1.15.tgz#2898494707472c53b99bc6e3b5f99ff24c33b4e0"
+  resolved "https://registry.yarnpkg.com/opencascade.js/-/opencascade.js-0.1.19.tgz#32d545ca4add213d168eb6e6973dceba1bcab35b"
-  integrity sha512-Xg3Po97wkNaBGjDR88+xI6vJPrxrAnF0eYZ1+jhIjy9p/GYp3fVi4zO4mL9H+F1aagd977XY5kHdScOlWiQfhQ==
+  integrity sha512-7q8LNihtU7BzsIXXoqTHq2/7ASfDdK5OycuI1oscc/9Opmew8OXjcv/oTSF+w5U+0dwUt8LewdG/xYSIkkf8Ig==
 
 opener@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
   integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
 
-opentype.js@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-1.3.3.tgz#65b8645b090a1ad444065b784d442fa19d1061f6"
-  integrity sha512-/qIY/+WnKGlPIIPhbeNjynfD2PO15G9lA/xqlX2bDH+4lc3Xz5GCQ68mqxj3DdUv6AJqCeaPvuAoH8mVL0zcuA==
-  dependencies:
-    string.prototype.codepointat "^0.2.1"
-    tiny-inflate "^1.0.3"
-
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -14594,11 +14601,6 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.codepointat@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
-  integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
-
 "string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
@@ -15099,11 +15101,6 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tiny-inflate@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
-  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
-
 tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"