From bed47d764d0341a994f91eeb90dfb649a44fd5e0 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Thu, 13 Apr 2023 11:06:23 +0200
Subject: [PATCH] Add a plus button for adding spaces

---
 src/app/connect/connect.css  |  8 +++++-
 src/app/connect/connect.html | 50 ++++++++++++++++++++++++++----------
 src/app/services/spaces.ts   |  2 ++
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/app/connect/connect.css b/src/app/connect/connect.css
index e858ffc..75083f9 100644
--- a/src/app/connect/connect.css
+++ b/src/app/connect/connect.css
@@ -58,6 +58,12 @@
   border-radius: 15px;
 }
 
+.spaces-add {
+  max-width: 274px;
+  border-radius: 15px;
+  box-sizing: border-box;
+}
+
 .spaces-container {
   display: flex;
   flex-direction: row;
@@ -66,7 +72,7 @@
 }
 
 .spaces-header-image {
-  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+  background-image: url("https://material.angular.io/assets/img/examples/shiba1.jpg");
   background-size: cover;
 }
 
diff --git a/src/app/connect/connect.html b/src/app/connect/connect.html
index 230d6d9..4304c6a 100644
--- a/src/app/connect/connect.html
+++ b/src/app/connect/connect.html
@@ -22,6 +22,20 @@
     </div>
   </div>
   <div class="connect-content">
+
+    <mat-card class="card first-card">
+      <mat-card-content>
+        <h1 class="centered">New ways to connect with humanity</h1>
+        <p class="centered" *ngIf="consent">
+          <button class="start-button" color="accent" routerLink="/connect/create" mat-flat-button>Create new profile</button><br /><br />
+          <button class="start-button" color="accent" routerLink="/connect/login" mat-flat-button>Log in</button><br /><br />
+        </p>
+        <p class="centered" *ngIf="!consent">
+          <button class="start-button" (click)="giveConsent()" mat-flat-button color="accent">Give consent</button>
+        </p>
+      </mat-card-content>
+    </mat-card>
+
     <mat-card class="spaces">
       <mat-card-content>
         <h1 class="centered">Spaces</h1>
@@ -45,7 +59,7 @@
             <img mat-card-image [src]="space.banner" />
             <mat-card-content>
               <p>
-                <strong>Space: {{space.comment}}</strong><br><br>
+                <strong>Space: {{space.comment}}</strong><br /><br />
                 Relays: {{ space.relayCount }}<br />
                 Relay Sync <span *ngIf="space.relaySync">Enabled</span><span *ngIf="!space.relaySync">Disabled</span>
               </p>
@@ -55,21 +69,31 @@
               <button mat-button>REMOVE</button>
             </mat-card-actions>
           </mat-card>
+
+          <div class="spaces-add">
+            <!-- <mat-card-header>
+              <mat-card-title>Spaces</mat-card-title>
+              <mat-card-subtitle>Organize multiple identities and relays</mat-card-subtitle>
+            </mat-card-header> -->
+              <p>
+                Using Spaces, you can organize multiple identities and relays, isolating them from each other. It allows you to reuse your same identity across multiple relays, but with different profiles and content, including private and
+                authenticated relays.
+              </p>
+              <p class="centered">
+                <button mat-fab color="primary">
+                  <mat-icon>add</mat-icon>
+                </button>
+
+                <!-- <button mat-fab color="primary">
+                  <mat-icon>add</mat-icon>
+                  Create new space
+                </button> -->
+              </p>
+          </div>
         </div>
       </mat-card-content>
     </mat-card>
-    <mat-card class="card first-card">
-      <mat-card-content>
-        <h1 class="centered">New ways to connect with humanity</h1>
-        <p class="centered" *ngIf="consent">
-          <button class="start-button" color="accent" routerLink="/connect/create" mat-flat-button>Create new profile</button><br /><br />
-          <button class="start-button" color="accent" routerLink="/connect/login" mat-flat-button>Log in</button><br /><br />
-        </p>
-        <p class="centered" *ngIf="!consent">
-          <button class="start-button" (click)="giveConsent()" mat-flat-button color="accent">Give consent</button>
-        </p>
-      </mat-card-content>
-    </mat-card>
+
 
     <mat-card class="card card-image">
       <img loading="lazy" width="1079" height="776" src="/assets/blockcore-notes-screenshot.png" />
diff --git a/src/app/services/spaces.ts b/src/app/services/spaces.ts
index 19588af..7870024 100644
--- a/src/app/services/spaces.ts
+++ b/src/app/services/spaces.ts
@@ -56,6 +56,8 @@ export class SpacesService {
           relaySync: false,
         },
       ];
+
+      this.spaces = [];
     }
   }
 }