From 49d247aec24bf4aaff8ae604c970f4f99f16d6c3 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Wed, 29 Dec 2021 19:31:28 +0000
Subject: [PATCH] [COMPONENTS][Feed] Styling for the empty feed page added

---
 components/Feed/templates/feed/feed.html.twig        |  6 +++++-
 public/assets/default_theme/css/base.css             |  6 +-----
 public/assets/default_theme/css/pages/feeds.css      | 12 ++++++++++++
 public/assets/default_theme/css/widgets/sections.css |  9 +++++++++
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/components/Feed/templates/feed/feed.html.twig b/components/Feed/templates/feed/feed.html.twig
index 2354a750d9..f4acd6020d 100644
--- a/components/Feed/templates/feed/feed.html.twig
+++ b/components/Feed/templates/feed/feed.html.twig
@@ -9,6 +9,7 @@
 {% endblock stylesheets %}
 
 {% block body %}
+    {% if notes is defined and notes is not empty %}
     <header class="feed-header">
         {% if page_title is defined %}
             <h1>{{ page_title | trans }}</h1>
@@ -19,6 +20,7 @@
             {% endfor %}
         </nav>
     </header>
+    {% endif %}
 
     {# Backwards compatibility with hAtom 0.1 #}
     <main class="feed" tabindex="0" role="feed">
@@ -35,7 +37,9 @@
                     {% endblock current_note %}
                 {% endfor %}
             {% else %}
-                <div id="empty-notes"><h1>{% trans %}No notes here.{% endtrans %}</h1></div>
+                <div class="feed-empty">
+                    {{ icon('logo', 'icon feed-background') | raw }}
+                </div>
             {% endif %}
         </div>
     </main>
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 290f09d010..8690ce0490 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -148,11 +148,7 @@ html {
     display: flex;
     justify-content: space-evenly;
 }
-.footer ul {
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-evenly;
-}
+
 /* < 720p */
 @media only screen and (max-width:1280px) {
     .page-header {
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 6d1cbc1cb1..994654c5b0 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -284,6 +284,18 @@ embed header {
     color: var(--foreground);
     border-radius: 0 0 var(--s) 0;
 }
+.feed-empty {
+    display: flex;
+    flex-direction: column;
+}
+.feed-empty .feed-background {
+    opacity: 3%;
+    width: 40%;
+    height: auto;
+    margin-top: var(--xxl);
+    margin-left: auto;
+    margin-right: auto;
+}
 
 /* < 720p */
 @media only screen and (max-width:1280px) {
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 0dcf3cee9b..2261473155 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -44,6 +44,7 @@
 }
 .section-title {
     font-weight: 700;
+    margin-bottom: unset;
 }
 .section-widget {
     display: flex;
@@ -171,4 +172,12 @@ textarea.form-row-widget {
     padding: 2px 6px;
     margin-top: 6px;
     margin-bottom: 6px;
+}
+.footer ul {
+    display: inline-flex;
+    width: 100%;
+    justify-content: flex-start;
+}
+.footer ul li {
+    margin-right: 5px;
 }
\ No newline at end of file