connect page format

src/app/components/family-connect/family-connect.component.html

@@ -39,43 +39,28 @@
       </div>
       <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
     </div>
-
-
-<!--    <ion-card class="connect-card" *ngIf="show_connect == true;">-->
-<!--      <ion-card-header>-->
-<!--        <ion-card-title>Family Connect</ion-card-title>-->
-<!--      </ion-card-header>-->
-
-<!--      <ion-card-content>-->
-<!--        Share, play games, or create challenges with rewards-->
-<!--        <ion-button-->
-<!--                (click)="startfamilyConnect()"-->
-<!--                expand="block"-->
-<!--                size="small"-->
-<!--                fill="outline">-->
-<!--          Start Connect-->
-<!--        </ion-button>-->
-<!--      </ion-card-content>-->
-<!--    </ion-card>-->
   </div>
 
-  <div *ngIf="connectStart== 100"  style="background-color: aliceblue; border-radius: 10px; padding: 10px; ">
+  <div *ngIf="connectStart== 100"  style="border-radius: 10px; padding: 0px; ">
 
-    <ion-list>
+    <ion-list  class="connect-card" style="border-radius: 10px">
       <ion-list-header>
         <ion-button size="medium" (click)="cancelInvite()" > Return </ion-button>
 <!--        <ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" ></ion-icon>-->
         <ion-label>Select to Invite</ion-label>
       </ion-list-header>
-      <ion-item *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)" style="background-color: transparent;">
-        <ion-avatar aria-hidden="true" slot="start">
-          <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-        </ion-avatar>
-        <ion-label>{{ item.firstname }} {{ item.lastname }}</ion-label>
-        <div class="metadata-end-wrapper" slot="end">
-          <ion-icon color="medium" name="chevron-forward"></ion-icon>
-        </div>
-      </ion-item>
+      <div style="padding: 5px;">
+        <ion-item *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)" style="background-color: transparent;">
+          <ion-avatar aria-hidden="true" slot="start">
+            <img alt="" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+          </ion-avatar>
+          <ion-label>{{ item.firstname }} {{ item.lastname }}</ion-label>
+          <div class="metadata-end-wrapper" slot="end">
+            <ion-icon color="medium" name="chevron-forward"></ion-icon>
+          </div>
+        </ion-item>
+      </div>
+
     </ion-list>
 
 <!--    <div>-->