Redesign instance list

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 {
+.join-icon {
-  width: 100%;
+  width: 80px; 
-  height: 100px;
+  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;
+}

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>
+        <Helmet title={title}>
-        <div class="row">
+          <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">
+            <div class="card">
-              <header>
+              <img
-                <div class="row">
+                class="join-icon"
-                  <h4 class="col">{i.domain}</h4>
+                src={i.icon || "/static/assets/images/lemmy.svg"}
-                  <h4 class="col text-right">
+              />
-                    <i>
+              <div class="join-text">
-                      {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
+                <div class="join-header">
-                      {i18n.t("month")}
+                  <h4 class="join-title">{i.name}</h4>
-                    </i>
+                  <i>
-                  </h4>
+                    {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
+                    {i18n.t("month")}
+                  </i>
                 </div>
-              </header>
+                <p class="join-desc">{i.description}</p>
-              <div class="is-center">
-                <img
-                  class="join-banner"
-                  src={i.icon || "/static/assets/images/lemmy.svg"}
-                />
               </div>
-              <br />
+              {i.require_application ? (
-              <p class="join-desc">{i.description}</p>
+                <a
-              <footer>
+                  class="button primary button-yellow"
-                {i.require_application ? (
+                  href={`https://${i.domain}`}
-                  <a class="button primary" href={`https://${i.domain}`}>
+                >
-                    {i18n.t("apply_to_join")}
+                  {i18n.t("apply_to_join")}
-                  </a>
+                </a>
-                ) : (
+              ) : (
-                  <a class="button primary" href={`https://${i.domain}`}>
+                <a class="button primary" href={`https://${i.domain}`}>
-                    {i18n.t("join")}
+                  {i18n.t("join")}
-                  </a>
+                </a>
-                )}
+              )}
-              </footer>
             </div>
           ))}
         </div>