From e567abd5fb937312a028d8e3272416daeab984be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20Pe=C3=B1a?= <devilcius@gmail.com>
Date: Thu, 23 Dec 2021 14:40:54 +0100
Subject: [PATCH] Enhances about page ui (#1619)

Done some css refactoring
---
 front/src/components/About.vue        | 53 ++++++++++-----------------
 front/src/style/components/_card.scss |  6 +--
 front/src/style/pages/_about.scss     | 18 ++++++++-
 front/src/style/pages/_library.scss   |  6 +++
 4 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index bb5489c32..39d5d26fa 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -75,7 +75,7 @@
                     href="https://funkwhale.audio/#get-started"
                   >
                     <translate translate-context="Content/About/Link">Find another pod</translate>
-                    <i class="external alternate icon margin-left" />
+                    &nbsp;<i class="external alternate icon" />
                   </a>
                 </div>
               </div>
@@ -83,18 +83,23 @@
                 v-else
                 class="signup-form content"
               >
-                <div class="ui positive message">
-                  <div class="header">
-                    <translate translate-context="Content/About/Message">
-                      You're already signed in!
-                    </translate>
+                <h3 class="header">
+                  <translate translate-context="*/Signup/Title">
+                    Sign up
+                  </translate>
+                  <div class="ui positive message">
+                    <div class="header">
+                      <translate translate-context="Content/About/Message">
+                        You're already signed in!
+                      </translate>
+                    </div>
+                    <p>
+                      <translate translate-contect="Content/About/Hello">
+                        Hello
+                      </translate> {{ $store.state.auth.username }}
+                    </p>
                   </div>
-                  <p>
-                    <translate translate-contect="Content/About/Hello">
-                      Hello
-                    </translate> {{ $store.state.auth.username }}
-                  </p>
-                </div>
+                </h3>
               </div>
             </div>
             <div class="ui card">
@@ -107,7 +112,7 @@
                   {{ podName }}
                 </h1>
               </section>
-              <div class="content padding-top padding-bottom">
+              <div class="content pod-description">
                 <h3
                   id="description"
                   class="ui header"
@@ -200,7 +205,7 @@
                   class="ui header"
                 >
                   <translate translate-context="Content/About/Header">Find another pod</translate>
-                  <i class="external alternate icon margin-left" />
+                  &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
                   <translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
@@ -218,7 +223,7 @@
                   class="ui header"
                 >
                   <translate translate-context="Content/About/Header">Find an app</translate>
-                  <i class="external alternate icon margin-left" />
+                  &nbsp;<i class="external alternate icon" />
                 </h3>
                 <p>
                   <translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
@@ -342,21 +347,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.margin-left {
-    margin-left: 5px;
-}
-
-.padding-top {
-    padding-top: 20px !important;
-}
-
-.padding-bottom {
-    padding-bottom: 20px !important;
-}
-h3 i {
-    display: inline !important;
-    font-size: 14px !important;
-}
-</style>
diff --git a/front/src/style/components/_card.scss b/front/src/style/components/_card.scss
index d9d9b8137..adc1bc0cb 100644
--- a/front/src/style/components/_card.scss
+++ b/front/src/style/components/_card.scss
@@ -1,11 +1,7 @@
-.ui.cards {
-  align-items: flex-start;
-}
 .ui.cards > .card,
 .ui.card {
   color: var(--card-text-color);
-  background: var(--card-background);
-  min-height: 200px;
+  background: var(--card-background);  
   &:not(.flat) {
     box-shadow: var(--card-box-shadow);
   }
diff --git a/front/src/style/pages/_about.scss b/front/src/style/pages/_about.scss
index fffc86ffa..e7727c19d 100644
--- a/front/src/style/pages/_about.scss
+++ b/front/src/style/pages/_about.scss
@@ -181,5 +181,21 @@
       }
     }
   }
-
+  h3.ui.header i {
+    display: inline;
+    font-size: 14px;
+  }
+  .ui.card {
+    .signup-form.content {
+      flex-grow: initial;
+    }
+    .pod-description {
+      flex-direction: column;
+      display: flex; 
+      p {
+        margin: auto;
+        padding: 1.2em;
+      }       
+    }    
+  }
 }
diff --git a/front/src/style/pages/_library.scss b/front/src/style/pages/_library.scss
index ccea2af4c..ea79b1743 100644
--- a/front/src/style/pages/_library.scss
+++ b/front/src/style/pages/_library.scss
@@ -1,5 +1,11 @@
 
 .page-library {
+  .ui.cards {
+    align-items: flex-start;
+    .ui.card {
+      min-height: 200px;
+    }
+  }   
   .ui.segment.head {
     background-size: cover;
     background-position: center;