From 08bf1e8dbbc5ac908c49f48d39d414dcbd01b389 Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Tue, 8 Jun 2021 11:13:38 +0200
Subject: [PATCH] Improve app layout

---
 public/index.css                    | 15 ++++++++++++++-
 src/App.svelte                      | 10 ++++++----
 src/Header.svelte                   |  2 +-
 src/Modal.svelte                    |  2 +-
 src/base/home/Index.svelte          | 12 +++++++-----
 src/base/orgs/Index.svelte          | 12 +++++++++---
 src/base/orgs/View.svelte           |  3 +++
 src/base/registrations/Index.svelte |  6 +-----
 src/base/registrations/View.svelte  |  3 +++
 src/base/vesting/Index.svelte       |  2 +-
 10 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/public/index.css b/public/index.css
index 627d184bc..d8aeb90eb 100644
--- a/public/index.css
+++ b/public/index.css
@@ -55,14 +55,18 @@
 	--font-family-monospace: monospace;
 	--border-radius: 50px;
 	--box-shadow-color: var(--color-secondary-2);
+	--content-max-width: 1920px;
+	--content-min-width: 480px;
 }
 
-
 body {
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.5;
 	min-width: 580px;
+	height: 100%;
+	margin: 0;
+	padding: 0;
 	color: white;
 	text-align: left;
 	background-color: var(--color-background);
@@ -271,6 +275,15 @@ input.wide {
 	background: var(--color-yellow-background);
 }
 
+.centered {
+	height: 100%;
+	padding-top: 5rem;
+	padding-bottom: 24vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
 span.small {
 	font-size: 0.75rem;
 }
diff --git a/src/App.svelte b/src/App.svelte
index 8b5858ba6..a28cd282b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -23,14 +23,16 @@
 </script>
 
 <style>
+  .app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
   .wrapper {
     display: flex;
     align-items: center;
     flex-direction: column;
-    justify-content: center;
-    min-height: 24rem;
-    padding-top: 6rem;
-    padding-bottom: 6rem;
+    height: 100%;
   }
 </style>
 
diff --git a/src/Header.svelte b/src/Header.svelte
index 5980cc0ca..c7acb5843 100644
--- a/src/Header.svelte
+++ b/src/Header.svelte
@@ -25,7 +25,7 @@
     justify-content: space-between;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 1.5rem;
   }
   header .nav {
     display: inline-block;
diff --git a/src/Modal.svelte b/src/Modal.svelte
index 682740d01..e870f6830 100644
--- a/src/Modal.svelte
+++ b/src/Modal.svelte
@@ -81,7 +81,7 @@
   <div class="modal-overlay"></div>
 {/if}
 
-<div class:modal-floating={floating}>
+<div class:modal-floating={floating} class="centered">
   <div class="modal" class:error class:modal-subtle={subtle} class:modal-small={small}>
     <div class="modal-title">
       <slot name="title"></slot>
diff --git a/src/base/home/Index.svelte b/src/base/home/Index.svelte
index ed0474e97..ac2f1a0eb 100644
--- a/src/base/home/Index.svelte
+++ b/src/base/home/Index.svelte
@@ -9,9 +9,11 @@
   };
 </script>
 
-<main>
-  <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
-  <button class="primary" on:click={search} disabled={!input}>
-    Search
-  </button>
+<main class="centered">
+  <div>
+    <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
+    <button class="primary" on:click={search} disabled={!input}>
+      Search
+    </button>
+  </div>
 </main>
diff --git a/src/base/orgs/Index.svelte b/src/base/orgs/Index.svelte
index cf9925697..3b10afee5 100644
--- a/src/base/orgs/Index.svelte
+++ b/src/base/orgs/Index.svelte
@@ -20,7 +20,7 @@
 <style>
   main {
     width: 100%;
-    padding: 0 3rem;
+    padding: 5rem 3rem;
     display: block;
     align-items: space-between;
     justify-content: space-between;
@@ -43,14 +43,20 @@
     margin: 3rem;
     display: inline-block;
   }
+
+  .loading {
+    padding: 3rem 0;
+  }
 </style>
 
 <main>
   {#await Org.getAll(config)}
-    <Loading center />
+    <div class="loading">
+      <Loading center />
+    </div>
   {:then orgs}
     <header>
-      <span><strong>Orgs</strong> on the Radicle network.</span>
+      <span><strong>Orgs</strong> of the Radicle network.</span>
       <button class="create small secondary" on:click={onCreate} disabled={!account}>
         Create
       </button>
diff --git a/src/base/orgs/View.svelte b/src/base/orgs/View.svelte
index e87e9301e..4afa39508 100644
--- a/src/base/orgs/View.svelte
+++ b/src/base/orgs/View.svelte
@@ -50,6 +50,9 @@
 </script>
 
 <style>
+  main {
+    padding: 5rem 0;
+  }
   main > header {
     display: flex;
     align-items: center;
diff --git a/src/base/registrations/Index.svelte b/src/base/registrations/Index.svelte
index 2eac05a04..c4df004a4 100644
--- a/src/base/registrations/Index.svelte
+++ b/src/base/registrations/Index.svelte
@@ -14,10 +14,6 @@
 </script>
 
 <style>
-  main {
-    padding-top: 2rem;
-    align-self: center;
-  }
   div.input-caption {
     font-size: 1.25rem;
     text-align: left;
@@ -37,7 +33,7 @@
   }
 </style>
 
-<main>
+<main class="centered">
   <div class="input-caption">
     Register a <strong>{config.registrar.domain}</strong> name
   </div>
diff --git a/src/base/registrations/View.svelte b/src/base/registrations/View.svelte
index 6d8d15599..45307f497 100644
--- a/src/base/registrations/View.svelte
+++ b/src/base/registrations/View.svelte
@@ -83,6 +83,9 @@
 </script>
 
 <style>
+  main {
+    padding: 5rem 0;
+  }
   main > header {
     display: flex;
     align-items: center;
diff --git a/src/base/vesting/Index.svelte b/src/base/vesting/Index.svelte
index bf0d6edd1..d370df3b5 100644
--- a/src/base/vesting/Index.svelte
+++ b/src/base/vesting/Index.svelte
@@ -52,7 +52,7 @@
   }
 </style>
 
-<main>
+<main class="centered">
   {#if info}
     <Modal>
       <span slot="title">