Updating splash screen sizing for image and content (#1399)

* Updating splash screen sizing for image and content

mattermost-plugin/Makefile

@@ -136,6 +136,7 @@ endif
 ifneq ($(HAS_WEBAPP),)
 	mkdir -p dist/$(PLUGIN_ID)/webapp
 	cp -r webapp/dist dist/$(PLUGIN_ID)/webapp/
+	cp -r webapp/dist/static/* dist/$(PLUGIN_ID)/pack/static/
 endif
 	cd dist && tar -cvzf $(BUNDLE_NAME) $(PLUGIN_ID)
 

mattermost-plugin/webapp/webpack.config.js

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

webapp/src/pages/welcome/welcomePage.scss

@@ -8,7 +8,13 @@
     text-align: center;
 
     > div {
-        max-width: 640px;
+        max-width: 808px;
+        width: 100%;
+        padding: 0;
+
+        @media (min-width: 2000px) {
+            max-width: 1120px;
+        }
     }
 
     .Button {
@@ -17,6 +23,35 @@
 }
 
 .WelcomePage__image {
-    margin: 32px 0;
+    max-width: 100%;
-    text-align: center;
+    width: 808px;
+    display: none;
+
+    &--small {
+        margin: 24px auto 32px;
+        display: block;
+    }
+
+    @media (min-width: 2000px) {
+        width: 1120px;
+
+        &--small {
+            display: none;
+        }
+
+        &--large {
+            margin: 48px auto;
+            display: block;
+        }
+    }
+}
+
+.WelcomePage__subtitle {
+    font-size: 16px;
+    line-height: 1.6;
+    margin: 24px 0 0;
+
+    @media (min-width: 2000px) {
+        font-size: 20px;
+    }
 }

webapp/src/pages/welcome/welcomePage.tsx

@@ -6,6 +6,7 @@ import {FormattedMessage} from 'react-intl'
 import {useLocation, useHistory} from 'react-router-dom'
 
 import BoardWelcomePNG from '../../../static/boards-welcome.png'
+import BoardWelcomeSmallPNG from '../../../static/boards-welcome-small.png'
 
 import CompassIcon from '../../widgets/icons/compassIcon'
 import {UserSettings} from '../../userSettings'
@@ -35,25 +36,32 @@ const WelcomePage = React.memo(() => {
     return (
         <div className='WelcomePage'>
             <div>
-                <h1 className='text-heading6'>
+                <h1 className='text-heading9'>
                     <FormattedMessage
                         id='WelcomePage.Heading'
                         defaultMessage='Welcome To Boards'
                     />
                 </h1>
-                <div className='text-base'>
+                <div className='WelcomePage__subtitle'>
                     <FormattedMessage
                         id='WelcomePage.Description'
                         defaultMessage='Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view'
                     />
                 </div>
 
-                <div className='WelcomePage__image'>
+                {/* This image will be rendered on large screens over 2000px */}
                 <img
                     src={BoardWelcomePNG}
+                    className='WelcomePage__image WelcomePage__image--large'
+                    alt='Boards Welcome Image'
+                />
+
+                {/* This image will be rendered on small screens below 2000px */}
+                <img
+                    src={BoardWelcomeSmallPNG}
+                    className='WelcomePage__image WelcomePage__image--small'
                     alt='Boards Welcome Image'
                 />
-                </div>
 
                 <button
                     onClick={goForward}