Fixing focalboard personal server icon (#921)

mattermost-plugin/webapp/webpack.config.js

@@ -110,7 +110,7 @@ module.exports = {
                         options: {
                             name: '[name].[ext]',
                             outputPath: path.join(__dirname, '/dist'),
-                            publicPath: 'plugins/focalboard/static/',
+                            publicPath: '/plugins/focalboard/static/',
                         },
                     },
                     {

webapp/src/components/sidebar/sidebarUserMenu.scss

@@ -15,8 +15,9 @@
                 font-size: 24px;
             }
 
-            .LogoIcon {
+            .LogoIcon, .FocalboardLogoIcon {
                 fill: rgba(var(--sidebar-text-rgb), 1);
+                color: rgba(var(--sidebar-text-rgb), 1);
                 height: 24px;
                 width: 22px;
                 margin-right: 3px;

webapp/src/components/sidebar/sidebarUserMenu.tsx

@@ -9,6 +9,7 @@ import {Constants} from '../../constants'
 import octoClient from '../../octoClient'
 import {IUser} from '../../user'
 import LogoIcon from '../../widgets/icons/logo'
+import FocalboardLogoIcon from '../../widgets/icons/focalboard_logo'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import {getMe} from '../../store/users'
@@ -35,9 +36,16 @@ const SidebarUserMenu = React.memo(() => {
                 <MenuWrapper>
                     <div className='logo'>
                         <div className='logo-title'>
-                            <LogoIcon/>
-                            {focalboardTitle && <span>{'Focalboard'}</span>}
-                            {!focalboardTitle && <span>{'Boards'}</span>}
+                            {focalboardTitle &&
+                                <>
+                                    <FocalboardLogoIcon/>
+                                    <span>{'Focalboard'}</span>
+                                </>}
+                            {!focalboardTitle &&
+                                <>
+                                    <LogoIcon/>
+                                    <span>{'Boards'}</span>
+                                </>}
                             <div className='versionFrame'>
                                 <div className='version'>
                                     {`v${Constants.versionString}`}

webapp/src/widgets/icons/focalboard_logo.scss

@@ -0,0 +1,6 @@
+.focalboard-body .FocalboardLogoIcon {
+    width: 32px;
+    height: 32px;
+    fill: rgba(var(--main-fg), 0.7);
+}
+

webapp/src/widgets/icons/focalboard_logo.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './focalboard_logo.scss'
+
+export default function FocalboardLogoIcon(): JSX.Element {
+    return (
+        <svg
+            className='FocalboardLogoIcon Icon'
+            version='1.1'
+            x='0px'
+            y='0px'
+            viewBox='0 0 52.589677 64'
+        >
+            <path
+                d='m 33.071077,12.069805 c -12.663,-3.4670001 -27.0530002,3.289 -31.6760002,16.943 -4.655,13.75 2.719,28.67 16.4690002,33.325 13.75,4.655 28.67,-2.719 33.326,-16.469 3.804,-11.235 -0.462,-22.701 -8.976,-29.249 l -0.46,4.871 h -0.001 c 4.631,4.896 6.709,11.941 4.325,18.985 -3.362,9.931 -14.447,15.151 -24.76,11.66 -10.313,-3.49 -15.9480002,-14.37 -12.5870002,-24.301 2.9750002,-8.788 11.9980002,-13.715 20.7430002,-12.625 v -10e-4 z m -6.175,16.488 c 3.456,-0.665 6.986,2.754 5.762,6.37 -0.854,2.522 -3.67,3.85 -6.291,2.962 -2.62,-0.887 -4.052,-3.651 -3.197,-6.174 0.573,-1.697 2.034,-2.852 3.726,-3.158 z m -1.285,-4.944 c -1.786,0.323 -3.45,1.104 -4.812,2.258 -1.299,1.101 -2.319,2.545 -2.898,4.258 -0.879,2.597 -0.579,5.323 0.617,7.632 1.206,2.329 3.325,4.234 6.07,5.164 2.744,0.929 5.584,0.701 7.959,-0.417 2.352,-1.107 4.246,-3.091 5.125,-5.688 0.555,-1.639 0.633,-3.254 0.344,-4.761 -0.21,-1.093 -0.615,-2.134 -1.174,-3.091 l 1.019,-5.107 c 0.189,0.187 0.374,0.378 0.552,0.574 1.75,1.919 3.008,4.283 3.508,6.877 0.415,2.154 0.304,4.457 -0.484,6.784 -1.239,3.661 -3.898,6.453 -7.193,8.005 -3.273,1.541 -7.175,1.858 -10.93,0.588 -3.754,-1.271 -6.661,-3.895 -8.326,-7.108 -1.674,-3.233 -2.09,-7.065 -0.851,-10.728 0.819,-2.419 2.26,-4.46 4.097,-6.016 1.88,-1.593 4.181,-2.673 6.656,-3.125 l -0.001,-0.004 c 1.759,-0.339 3.522,-0.313 5.213,0.016 l -3.583,3.761 c -0.294,0.028 -0.588,0.071 -0.883,0.127 h -0.025 z'
+            />
+            <polygon
+                points='26.057,32.594 37.495,11.658 36.79,8.44 41.066,0.207 43.683,4.611 48.803,4.434 44.185,12.48 40.902,13.697 29.542,34.491 '
+                transform='translate(7.6780426e-5,-0.21919512)'
+            />
+        </svg>
+    )
+}

webapp/src/widgets/icons/logo.scss

@@ -1,5 +1,5 @@
 .focalboard-body .LogoIcon {
     width: 32px;
     height: 32px;
-    fill: rgba(var(--main-fg), 0.7);
+    color: rgba(var(--main-fg), 0.7);
 }