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

@@ -36,31 +36,27 @@ export class Instances extends Component<any, any> {
           <br />
           <p>{i18n.t("choose_and_join")}</p>
 
-          <div class="row">
           {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">
+              />
+              <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>
-                    </h4>
                 </div>
-                </header>
-                <div class="is-center">
-                  <img
-                    class="join-banner"
-                    src={i.icon || "/static/assets/images/lemmy.svg"}
-                  />
-                </div>
-                <br />
                 <p class="join-desc">{i.description}</p>
-                <footer>
+              </div>
               {i.require_application ? (
-                    <a class="button primary" href={`https://${i.domain}`}>
+                <a
+                  class="button primary button-yellow"
+                  href={`https://${i.domain}`}
+                >
                   {i18n.t("apply_to_join")}
                 </a>
               ) : (
@@ -68,12 +64,10 @@ export class Instances extends Component<any, any> {
                   {i18n.t("join")}
                 </a>
               )}
-                </footer>
             </div>
           ))}
         </div>
       </div>
-      </div>
     );
   }
 }