fix: Improve login page appearance

client/src/components/common/Login/Content.jsx

@@ -19,6 +19,8 @@ import { isUsername } from '../../../utils/validator';
 import AccessTokenSteps from '../../../constants/AccessTokenSteps';
 import TermsModal from './TermsModal';
 
+import logo from '../../../assets/images/logo.png';
+
 import styles from './Content.module.scss';
 
 const createMessage = (error) => {
@@ -175,19 +177,27 @@ const Content = React.memo(() => {
 
   return (
     <div className={classNames(styles.wrapper, styles.fullHeight)}>
-      <Grid verticalAlign="middle" className={classNames(styles.grid, styles.fullHeight)}>
+      <Grid verticalAlign="middle" className={styles.grid}>
-        <Grid.Column computer={6} tablet={16} mobile={16}>
+        <Grid.Column computer={6} tablet={16} mobile={16} className={styles.gridItem}>
-          <div className={styles.loginWrapper}>
+          <div className={styles.login}>
-            <Header as="h1" textAlign="center" content="PLANKA" className={styles.formTitle} />
+            <div className={styles.form}>
-            <Header
+              <div className={styles.logoWrapper}>
-              as="h2"
+                <img src={logo} alt="" className={styles.logo} />
-              textAlign="center"
+              </div>
-              content={t('common.logIn', {
+              <Header
-                context: 'title',
+                as="h1"
-              })}
+                textAlign="center"
-              className={styles.formSubtitle}
+                content={bootstrap.instanceName || 'PLANKA'}
-            />
+                className={styles.formTitle}
-            <div className={styles.formWrapper}>
+              />
+              <Header
+                as="h2"
+                textAlign="center"
+                content={t('common.logIn', {
+                  context: 'title',
+                })}
+                className={styles.formSubtitle}
+              />
               {message && (
                 <Message
                   {...{
@@ -255,20 +265,22 @@ const Content = React.memo(() => {
                 />
               )}
             </div>
-            <p className={styles.formFooter}>
+            <div className={styles.poweredBy}>
-              <Trans i18nKey="common.poweredByPlanka">
+              <p className={styles.poweredByText}>
-                {'Powered by '}
+                <Trans i18nKey="common.poweredByPlanka">
-                <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
+                  {'Powered by '}
-                  PLANKA
+                  <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
-                </a>
+                    PLANKA
-              </Trans>
+                  </a>
-            </p>
+                </Trans>
+              </p>
+            </div>
           </div>
         </Grid.Column>
         <Grid.Column
           computer={10}
           only="computer"
-          className={classNames(styles.cover, styles.fullHeight)}
+          className={classNames(styles.gridItem, styles.cover)}
         >
           <div className={styles.coverOverlay} />
         </Grid.Column>

client/src/components/common/Login/Content.module.scss

@@ -5,7 +5,7 @@
 
 :global(#app) {
   .cover {
-    background: url("../../../assets/images/cover.jpg") left / cover;
+    background: url("../../../assets/images/login-cover.jpg") left / cover;
   }
 
   .coverOverlay {
@@ -23,16 +23,16 @@
     font-weight: normal;
   }
 
-  .formFooter {
+  .form {
-    color: #6b808c;
+    display: flex;
-    font-weight: lighter;
+    flex: 1;
-    text-align: center;
+    flex-direction: column;
+    justify-content: center;
   }
 
   .formTitle {
     font-size: 36px;
     font-weight: bold;
-    margin-bottom: 36px;
   }
 
   .formSubtitle {
@@ -41,18 +41,16 @@
     margin-bottom: 32px;
   }
 
-  .formWrapper {
-    margin-bottom: 36px;
-  }
-
-  .fullHeight {
-    height: 100%;
-  }
-
   .grid {
+    height: 100%;
     margin: 0;
   }
 
+  .gridItem {
+    height: 100%;
+    padding: 0;
+  }
+
   .inputLabel {
     font-size: 16px;
     line-height: 20px;
@@ -63,10 +61,40 @@
     margin-bottom: 16px;
   }
 
-  .loginWrapper {
+  .login {
+    display: flex;
+    flex-direction: column;
     margin: 0 auto;
     max-width: 440px;
-    padding: 0 20px;
+    min-height: 100vh;
+    padding: 40px;
+    row-gap: 40px;
+  }
+
+  .logo {
+    max-height: 144px;
+    max-width: 80%;
+  }
+
+  .logoWrapper {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+  }
+
+  .poweredBy {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: center;
+    margin-top: auto;
+  }
+
+  .poweredByText {
+    color: #6b808c;
+    font-weight: lighter;
+    text-align: center;
   }
 
   .wrapper {

client/src/components/users/UserSettingsModal/AboutPane.jsx

@@ -8,14 +8,14 @@ import { Image, Tab } from 'semantic-ui-react';
 
 import version from '../../../version';
 
-import logo from '../../../assets/images/logo.png';
+import aboutLogo from '../../../assets/images/about-logo.png';
 
 import styles from './AboutPane.module.scss';
 
 const AboutPane = React.memo(() => (
   <Tab.Pane attached={false} className={styles.wrapper}>
     <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
-      <Image centered src={logo} size="large" />
+      <Image centered src={aboutLogo} size="large" />
     </a>
     <div className={styles.version}>{version}</div>
   </Tab.Pane>

client/src/reducers/core.js

@@ -129,13 +129,6 @@ export default (state = initialState, { type, payload }) => {
         },
       };
     case ActionTypes.CONFIG_UPDATE__SUCCESS:
-      return {
-        ...state,
-        config: {
-          ...state.config,
-          ...payload.config,
-        },
-      };
     case ActionTypes.CONFIG_UPDATE_HANDLE:
       return {
         ...state,

server/api/models/BackgroundImage.js

@@ -40,7 +40,7 @@
  *         url:
  *           type: string
  *           format: uri
- *           description: URL to access the full-size background image
+ *           description: URL to the full-size background image
  *           example: https://storage.example.com/background-images/1357158568008091264/original.jpg
  *         thumbnailUrls:
  *           type: object

server/api/models/User.js

@@ -77,7 +77,7 @@
  *                 cover180:
  *                   type: string
  *                   format: uri
- *                   description: URL for 180px cover thumbnail
+ *                   description: URL for 180px thumbnail version
  *                   example: https://storage.example.com/user-avatars/1357158568008091264/cover-180.jpg
  *         gravatarUrl:
  *           type: string