Home page UI

src/app/home/home.page.html

@@ -3,7 +3,7 @@
     
     <section class="segments">
         <button [ngClass]="{'active' : selectedTab === 'news'}"
-        (click)="selectedTab = 'news'"> News </button>
+        (click)="selectedTab = 'news'"> News ({{ newsData.length }}) </button>
         <button [ngClass]="{'active' : selectedTab === 'videos'}"
         (click)="selectedTab = 'videos'"> Videos </button>
     </section>
@@ -15,20 +15,45 @@
                 <figure>
                     <img [src]="news.image">
                 </figure>
-            </div>
 
-            <h4> {{ news.heading }} </h4>
+                <button *ngIf="news.type === 'VIDEO'">
+                    <ion-icon name="play"></ion-icon>
+                </button>
 
-            <p>
-                {{ news.description }}
-            </p>
-            
-            <div class="action-buttons">
-                <button>
-                    <ion-icon name="heart-outline"></ion-icon>
+                <button *ngIf="news.type === 'ARTICLE'">
+                    <ion-icon name="newspaper"></ion-icon>
                 </button>
             </div>
 
+            <section class="content">
+                <h4> {{ news.heading }} </h4>
+
+                <p>
+                    {{ news.description }}
+                </p>                
+            </section>
+            
+            
+            <section class="action-buttons">
+                <section class="shortcuts">
+                    <button>
+                        <ion-icon name="share-social-outline"></ion-icon>
+                    </button>
+
+                    <button (click)="news.isLiked = !news.isLiked"
+                    [ngClass]="{'active' : news.isLiked}">
+                        <ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
+                        <ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
+                        <span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
+                    </button>                    
+                </section>
+
+                <button class="read-more"> 
+                    <span *ngIf="news.type === 'ARTICLE'"> Read More </span> 
+                    <span *ngIf="news.type === 'VIDEO'"> Watch </span>
+                    <ion-icon name="chevron-forward-outline"></ion-icon> </button>
+            </section>
+
         </ion-slide>
     </ion-slides>
 

src/app/home/home.page.scss

@@ -5,26 +5,28 @@ ion-content {
 .main-header {
     background: -webkit-linear-gradient(180deg, rgba(var(--brand-red-rgb), 0.6) 50%, rgba(var(--brand-red-rgb), 1));
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-size: 40px;
+    font-size: 2.5rem;
     font-weight: 700;
     letter-spacing: 1px;
-    padding: 0px 30px;
-    margin: 30px 0px;
+    padding: 0px 7%;
+    margin: 5% 0%;
 }
 
 .segments {
     display: flex;
     align-items: stretch;
     width: 100%;
-    padding: 0px 30px;
+    padding: 0px 7%;
+    margin: 5% 0%;
 
     button {
         background-color: transparent;
         color: white;
-        font-size: 18px;
+        font-size: 1.2rem;
         font-weight: 400;
-        margin-right: 15px;
+        margin-right: 5%;
         position: relative;
         opacity: 0.5;
 
@@ -47,25 +49,136 @@ ion-content {
 }
 
 ion-slides {
-    margin:  40px 0px;
+    margin: 12% 0%;
+    height: calc(100vh - 40%);
 
     ion-slide {
-        display: block;
-        background-color: white;        
+        display: block;        
+        overflow: hidden;
+        border-radius: 7px;
+        text-align: left;
+        align-self: start;
+        height: 100%;
     }
 
     .image-holder {
         position: relative;
+        height: 40%;
+        overflow: hidden;
+
+        button {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(#ffff, 0.5);
+            border-radius: 50%;
+
+            ion-icon {
+                color: white;
+                font-size: 20px;
+            }
+        }
 
         figure {
             margin: 0;
             display: block;
             width: 100%;
+            height: 100%;
+            filter: brightness(60%);
 
             img {
+                height: 100%;
+                object-fit: cover;
                 display: block;
                 width: 100%;
             }
         }
     }
+
+    .content {
+        background-color: white;
+        padding: 5%;
+        height: calc(60% - 50px);        
+        overflow: hidden;
+        margin-top: -1px;
+        border-bottom: 1px solid rgba(var(--light-grey-rgb), 0.8);
+    }
+
+    h4 {
+        font-size: 1.2rem;
+        margin: 0px;
+        line-height: 1.5;
+        font-weight: 500;
+        color: var(--brand-black);        
+    }
+    
+    p {
+        margin: 5px 0px 0px 0px;
+        font-size: 0.9rem;
+        line-height: 1.5;
+        font-weight: 400;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        color: var(--light-grey);
+        overflow: hidden;
+    }
+
+    .action-buttons {
+        background-color: white;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;        
+        height: 50px;
+        margin-top: -1px;
+        padding: 0 3%;        
+
+        .shortcuts {
+            display: flex;
+            align-items: stretch;
+            height: 100%;
+
+            button {
+                background-color: transparent;
+                margin-right: 5px;
+
+                &.active {
+                    ion-icon, span {
+                        color: var(--brand-red);
+                    }
+                }
+
+                span {
+                    vertical-align: middle;
+                    color: var(--light-grey);
+                }
+                
+                ion-icon {
+                    vertical-align: middle;
+                    color: var(--brand-black);
+                    font-size: 1.2rem;
+                }
+            }
+        }
+
+        .read-more {
+            background-color: transparent;
+            font-size: 0.9rem;
+            color: var(--brand-red);
+            font-weight: 400;
+
+            ion-icon {
+                color: var(--brand-black);
+                font-size: 1.2rem;
+                vertical-align: middle;
+                color: var(--brand-red);
+            }
+        }
+    }
+
 }

src/app/tabs/tabs.page.scss

@@ -1,10 +1,12 @@
 ion-tab-bar {
     --background: var(--brand-black);
     --border: none;
+    margin-top: -1px;
 
     ion-tab-button {
         ion-icon {
             color: white;
+            font-size: 20px;
 
             &:nth-child(1) {
                 display: block;
@@ -31,7 +33,7 @@ ion-tab-bar {
 
         &:nth-child(2) {
             ion-icon {
-                font-size: 35px;               
+                font-size: 30px;               
                 border-radius: 50%;
                 overflow: hidden;
                 // animation: rippleButton 3s infinite;

src/theme/variables.scss

@@ -80,6 +80,8 @@
   --brand-black: #272727;
   --brand-red: #ED1C24;
   --brand-red-rgb: 237, 28, 36;
+  --light-grey: #666666;
+  --light-grey-rgb: 102, 102, 102;
 
 }