Merge pull request #560 from acelaya-forks/feature/logo-alignment

Feature/logo alignment

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#555](https://github.com/shlinkio/shlink-web-client/issues/555) Fixed vertical alignment in welcome screen logo.
+
+
 ## [3.5.0] - 2022-01-01
 ### Added
 * [#407](https://github.com/shlinkio/shlink-web-client/pull/407) Improved how visits (short URLs, tags and orphan) are loaded, to avoid ending up in a page with "There are no visits matching current filter".

src/common/Home.scss

@@ -12,8 +12,16 @@
   }
 }
 
+.home__logo-wrapper {
+  padding: 1.5rem !important;
+  height: 100% !important;
+  min-height: 300px;
+}
+
 .home__logo {
   @include vertical-align();
+
+  width: calc(100% - 3rem);
 }
 
 .home__main-card {
@@ -25,6 +33,11 @@
   }
 }
 
+.home__title-wrapper {
+  padding: 1.5rem !important;
+  border-bottom: 1px solid var(--border-color);
+}
+
 .home__title {
   text-align: center;
   font-size: 1.75rem;

src/common/Home.tsx

@@ -30,12 +30,14 @@ const Home = ({ servers, history }: HomeProps) => {
       <Card className="home__main-card">
         <Row noGutters>
           <div className="col-md-5 d-none d-md-block">
-            <div className="p-4">
+            <div className="home__logo-wrapper">
+              <div className="home__logo">
                 <ShlinkLogo />
               </div>
             </div>
+          </div>
           <div className="col-md-7 home__servers-container">
-            <div className="p-4">
+            <div className="home__title-wrapper">
               <h1 className="home__title">Welcome!</h1>
             </div>
             <ServersListGroup embedded servers={serversList}>