From 702d1651b6ba57367ae1b4cb9e6f664339668419 Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Wed, 2 Mar 2022 13:34:37 +0100
Subject: [PATCH] Redesign instance list

---
 src/assets/css/main.css             | 34 +++++++++++++--
 src/shared/components/instances.tsx | 66 +++++++++++++++--------------
 2 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index e84e0a3..9d5b530 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -14,6 +14,12 @@
   webkit-box-shadow: unset;
   box-shadow: unset;
   border: 1px solid var(--color-darkGrey) !important;
+  padding: 10px;
+  margin: 10px 0 10px 0;
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .stylized {
   font-family: "CaviarDreams", Fallback, sans-serif;
@@ -32,11 +38,29 @@
 p {
   font: 1.2em/1.62 sans-serif;
 }
-.join-banner {
-  width: 100%;
-  height: 100px;
+.join-icon {
+  width: 80px; 
+  height: 80px; 
   object-fit: scale-down;
 }
+.join-text {
+  display: inline-block; 
+  margin: 0 10px 0 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.join-header {
+  display: flex;
+  flex-direction: row;
+}
+.join-title {
+  margin: 0px;
+  flex: 1;
+}
+.join-desc {
+  font-size: 0.9em;
+}
 .app-banner {
   width: 100%;
   height: 300px;
@@ -65,3 +89,7 @@ img {
   margin-top: 7px;
   background-color: #333;
 }
+
+.button-yellow {
+  background-color: #b5932e !important;
+}
\ No newline at end of file
diff --git a/src/shared/components/instances.tsx b/src/shared/components/instances.tsx
index fe2db28..24e3adc 100644
--- a/src/shared/components/instances.tsx
+++ b/src/shared/components/instances.tsx
@@ -48,40 +48,44 @@ export class Instances extends Component<any, any> {
   renderList(header: string, instances: any[]) {
     return (
       <div>
-        <h2>{header}</h2>
-        <div class="row">
+        <Helmet title={title}>
+          <meta property={"title"} content={title} />
+        </Helmet>
+        <div class="container">
+          <h1 class="is-marginless">{i18n.t("lemmy_servers")}</h1>
+          {this.header()}
+          <br />
+          <br />
+          <p>{i18n.t("choose_and_join")}</p>
+
           {instances.map(i => (
-            <div class="card col-6">
-              <header>
-                <div class="row">
-                  <h4 class="col">{i.domain}</h4>
-                  <h4 class="col text-right">
-                    <i>
-                      {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
-                      {i18n.t("month")}
-                    </i>
-                  </h4>
+            <div class="card">
+              <img
+                class="join-icon"
+                src={i.icon || "/static/assets/images/lemmy.svg"}
+              />
+              <div class="join-text">
+                <div class="join-header">
+                  <h4 class="join-title">{i.name}</h4>
+                  <i>
+                    {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
+                    {i18n.t("month")}
+                  </i>
                 </div>
-              </header>
-              <div class="is-center">
-                <img
-                  class="join-banner"
-                  src={i.icon || "/static/assets/images/lemmy.svg"}
-                />
+                <p class="join-desc">{i.description}</p>
               </div>
-              <br />
-              <p class="join-desc">{i.description}</p>
-              <footer>
-                {i.require_application ? (
-                  <a class="button primary" href={`https://${i.domain}`}>
-                    {i18n.t("apply_to_join")}
-                  </a>
-                ) : (
-                  <a class="button primary" href={`https://${i.domain}`}>
-                    {i18n.t("join")}
-                  </a>
-                )}
-              </footer>
+              {i.require_application ? (
+                <a
+                  class="button primary button-yellow"
+                  href={`https://${i.domain}`}
+                >
+                  {i18n.t("apply_to_join")}
+                </a>
+              ) : (
+                <a class="button primary" href={`https://${i.domain}`}>
+                  {i18n.t("join")}
+                </a>
+              )}
             </div>
           ))}
         </div>