family start

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

@@ -14,32 +14,61 @@
   </ion-card>
   <p></p>
   <div *ngIf="connectStart==0;">
-    <ion-card class="connect-card" *ngIf="show_connect == true;">
+    <div class="bg_white connect-card"  (click)="startfamilyConnect()">
-      <ion-card-header>
+      <div class="list">
-        <ion-card-title>Family Connect</ion-card-title>
+          <!-- code to render a large video block-->
-      </ion-card-header>
 
-      <ion-card-content>
+<!--          <div-->
-        Share, play games, or create challenges with rewards
+<!--                  class="bg_image back_image banner_image"-->
-        <ion-button
+<!--                  [style.backgroundImage]="'url(' + item_banner + ')'"-->
-                (click)="startfamilyConnect()"
+<!--          ></div>-->
-                expand="block"
+
-                size="small"
+<!--        <div *ngIf="item.banner_location === 'LOCAL'">-->
-                fill="outline">
+<!--          <div-->
-          Start Connect
+<!--                  class="bg_image back_image banner_image"-->
-        </ion-button>
+<!--                  [style.backgroundImage]="'url(assets/images/' + item.banner + ')'"-->
-      </ion-card-content>
+<!--          ></div>-->
-    </ion-card>
+<!--        </div>-->
+
+        <div class="detail">
+          <ion-label class="name">Family Connect</ion-label>
+          <ion-label class="bg_text ovf" style="background-color: white">
+            Share, play games, or create challenges with rewards
+            </ion-label>
+        </div>
+      </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="background-color: aliceblue; border-radius: 10px; padding: 10px; height: 200px;">
-
+    <div>
+      <ion-label>
+        <ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" size="large" style="font-size: 22px; margin: 5px 5px 0px 0px; color: red;"></ion-icon>
+        <span style="font-size: 18px; font-weight: bolder; color: darkblue;">Select to Invite</span></ion-label>
+    </div>
     <ion-list [inset]="true" style="padding: 0px; margin: 0px 0px 10px 0px;">
       <ion-list-header>
 
-        <ion-label>
+
-          <ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" size="large" style="font-size: 32px; margin: 5px 5px 0px 0px; color: red;"></ion-icon>
-          <span style="font-size: 20px; font-weight: bolder; color: darkblue;">Select to Invite</span></ion-label>
       </ion-list-header>
       <ion-item [button]="true" detail="false"  *ngFor="let item of familyData; let i = index"  (click)="startInvite(item)">
 <!--        <div class="unread-indicator-wrapper" slot="start">-->
@@ -62,6 +91,18 @@
         </div>
       </ion-item>
     </ion-list>
+
+<!--    <ion-list>-->
+<!--      <ion-item *ngFor="let item of items; let index">-->
+<!--        <ion-avatar slot="start">-->
+<!--          <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />-->
+<!--        </ion-avatar>-->
+<!--        <ion-label>{{ item }}</ion-label>-->
+<!--      </ion-item>-->
+<!--    </ion-list>-->
+<!--    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">-->
+<!--      <ion-infinite-scroll-content></ion-infinite-scroll-content>-->
+<!--    </ion-infinite-scroll>-->
   </div>
 
   <div *ngIf="connectStart == 200" >

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

@@ -8,3 +8,79 @@
   background: rgb(240,248,255);
   background: linear-gradient(90deg, rgba(240,248,255,1) 0%, rgba(255,240,248,1) 35%, rgba(255,240,248,1) 100%);
 }
+.bg_white {
+  display: flex;
+  align-items: flex-start;
+  background-color: white;
+  padding: 5px;
+  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  margin-bottom: 20px;
+
+  .list {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .back_image {
+      height: 95px;
+      width: 95px;
+      border-radius: 10px;
+    }
+
+    .banner_image {
+      min-width: 90px;
+    }
+
+    .detail {
+      width: 100%;
+      margin-left: 10px;
+
+      .bg_text {
+        color: var(--ion-color-primary);
+        background-color: rgba(246, 246, 248, 0.9);
+        font-size: 12px;
+        padding: 2px 5px;
+        border-radius: 5px;
+        //width: 80px;
+        text-align: center;
+        height: 38px;
+        width: 100%;
+        overflow: hidden;
+
+        .ovf {
+          overflow: hidden;
+        }
+      }
+
+      .name {
+        font-family: 'bold';
+        margin-top: 5px;
+        padding: 5px;
+      }
+
+      .price {
+        margin-top: 3px;
+        color: var(--ion-color-primary);
+        font-family: 'semi-bold';
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        margin-top: 3px;
+
+        ion-icon {
+          font-size: 18px;
+        }
+
+        .small {
+          margin-left: 8px;
+          color: grey;
+          font-size: 14px;
+        }
+      }
+    }
+
+  }
+}