kj
/
kxip-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

UI Made thematic

master
kj1352 4 years ago
parent
f4bc8b04ab
commit
c7c4c4544c
22 changed files with 248 additions and 368 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -0
      src/app/_colors.scss
  2. +1
    -1
      src/app/add-party/add-party.page.html
  3. +1
    -6
      src/app/add-party/add-party.page.scss
  4. +2
    -2
      src/app/booking-details/booking-details.page.html
  5. +3
    -81
      src/app/booking-details/booking-details.page.scss
  6. +22
    -1
      src/app/booking-details/booking-details.page.ts
  7. +1
    -1
      src/app/booking/booking.page.html
  8. +9
    -15
      src/app/booking/booking.page.scss
  9. +1
    -1
      src/app/chat/chat.page.html
  10. +6
    -68
      src/app/chat/chat.page.scss
  11. +2
    -2
      src/app/chat/chat.page.ts
  12. +5
    -4
      src/app/collections/collections.page.html
  13. +8
    -13
      src/app/collections/collections.page.scss
  14. +12
    -2
      src/app/collections/collections.page.ts
  15. +6
    -7
      src/app/home/home.page.scss
  16. +1
    -1
      src/app/live/live.page.html
  17. +20
    -23
      src/app/live/live.page.scss
  18. +2
    -2
      src/app/match-details/match-details.page.html
  19. +29
    -115
      src/app/match-details/match-details.page.scss
  20. +9
    -20
      src/app/tabs/tabs.page.scss
  21. +90
    -3
      src/global.scss
  22. +2
    -0
      src/theme/variables.scss

+ 16
- 0
src/app/_colors.scss View File

@@ -0,0 +1,16 @@
$brand-black: #272727;
$brand-red: #ED1C24;
$brand-red-rgb: 237, 28, 36;
$light-grey: #666666;
$light-grey-rgb: 102, 102, 102;
$dark-blue: #161e2d;
$blue-grey: #949599;
$lumous-blue: #1a2389;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;
$green: #01b868;
$pink: #d73e53;
$voilet: #424264;
$dark-voilet: #09092b;
$luminous-blue: #2ea9f5;
$sea-blue: #2ea9f5;

+ 1
- 1
src/app/add-party/add-party.page.html View File

@@ -1,5 +1,5 @@
<ion-content>
<section class="action-buttons">
<section class="header-with-action-buttons">
<div class="nav">
<button (click)="back()">
<ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span>


+ 1
- 6
src/app/add-party/add-party.page.scss View File

@@ -1,9 +1,4 @@
$dark-blue: #161e2d;
$blue-grey: #949599;
$green: #01b868;
$pink: #d73e53;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;
@import '../colors';

ion-content {
--background: white;


+ 2
- 2
src/app/booking-details/booking-details.page.html View File

@@ -1,6 +1,6 @@
<ion-content>

<section class="action-buttons">
<section class="header-with-action-buttons">
<div class="nav">
<button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
@@ -61,7 +61,7 @@

<section class="checkout-data" *ngIf="selectedSeats.length > 0">
<p> <span> Total: </span> &#8377; {{ getTotalAmount() }} </p>
<button class="checkout-button"> Proceed to Payment </button>
<button class="checkout-button" (click)="confirmPayment()"> Proceed to Payment </button>
</section>

</ion-content>

+ 3
- 81
src/app/booking-details/booking-details.page.scss View File

@@ -1,92 +1,14 @@
$dark-blue: #161e2d;
$blue-grey: #949599;
$sea-blue: #2ea9f5;
$green: #01b868;

ion-content {
--background: transparent;
background-color: $dark-blue;
}
@import '../colors';


.push-bottom {
margin-bottom: 50px;
}

.action-buttons {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 3% 0 0%;
height: 70px;
.header-with-action-buttons {
position: fixed;
left: 0;
top: 0;
background-color: lighten($blue-grey, 35%);
z-index: 2;
width: 100%;
align-items: center;
box-shadow: 0px 0px 5px $dark-blue;
button {
background-color: transparent;
border: none;
}
.nav button {
color: $blue-grey;
display: flex;
align-items: center;
justify-content: flex-start;

ion-icon {
font-size: 24px;
}
span {
font-size: 14px;
}
}

header {
flex-grow: 1;
padding: 0 10px;
font-size: 14px;
color: darken($blue-grey, 30%);
font-weight: 500;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

span {
font-weight: 500;
color: $blue-grey;
font-size: 12px;
}
}

.action {
display: flex;
justify-content: flex-end;
}

.action button {
width: 35px;
height: 35px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;

ion-icon {
color: $blue-grey;
font-size: 17px;
}
}

}

.upfold {


+ 22
- 1
src/app/booking-details/booking-details.page.ts View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import * as moment from 'moment';
import { AlertController } from '@ionic/angular';

@Component({
selector: 'app-booking-details',
@@ -18,9 +19,29 @@ export class BookingDetailsPage implements OnInit {

constructor(
private route: ActivatedRoute,
private location: Location
private location: Location,
public alertController: AlertController
) { }

async confirmPayment() {
const alert = await this.alertController.create({
header: 'Purchase Complete',
message: 'Your ticket details will be sent over E-Mail and SMS, Enjoy the game!',
mode: 'ios',
buttons: [{
text: 'Okay!',
role: 'confirm',
handler: () => {
setTimeout(() => {
this.back();
}, 100);
}
}]
});
await alert.present();
}

ngOnInit() {
this.matchDay = JSON.parse(this.route.snapshot.paramMap.get('matchData'));
console.log(this.matchDay);


+ 1
- 1
src/app/booking/booking.page.html View File

@@ -1,7 +1,7 @@
<ion-content>
<div class="content-container">
<div class="heading-holder">
<h2 class="main-header"> Booking </h2>
<h2 class="main-header"> # Booking </h2>
<section class="segments">
<button [ngClass]="{'active' : selectedDate === bookingDate.dateTime}"


+ 9
- 15
src/app/booking/booking.page.scss View File

@@ -1,20 +1,14 @@
$lumous-blue: #1a2389;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;
$green: #01b868;
$pink: #d73e53;

ion-content {
--background: transparent;
background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);
}
@import '../colors';

.heading-holder {
margin-bottom: 2.3rem;
}

.main-header {
color: white;
background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 1px;
@@ -32,7 +26,7 @@ ion-content {

button {
display: inline-block;
background-color: rgba(#ffff, 0.4);
background-color: rgba($blue-grey, 0.4);
padding: 10px 15px;
color: white;
font-size: 1rem;
@@ -45,7 +39,7 @@ ion-content {
&.active {
font-weight: 500;
background-color: white;
color: $lumous-blue;
color: lighten($brand-red, 10%);
}
}
}
@@ -65,7 +59,7 @@ ion-slides {
display: block;
overflow: visible;
text-align: left;
height: 80%;
height: 90%;
position: relative;
transform: scale(0.9);
background-color: transparent;
@@ -81,7 +75,7 @@ ion-slides {
height: 100%;
overflow: hidden;
border-radius: 7px;
box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%);
box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);

figure {
margin: 0;


+ 1
- 1
src/app/chat/chat.page.html View File

@@ -1,5 +1,5 @@
<ion-content>
<section class="action-buttons">
<section class="header-with-action-buttons">
<div class="nav">
<button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>


+ 6
- 68
src/app/chat/chat.page.scss View File

@@ -1,69 +1,8 @@
$dark-blue: #161e2d;
$blue-grey: #949599;
$green: #01b868;
$pink: #d73e53;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;

ion-content {
--background: transparent;
background-color: $dark-blue;
}

.action-buttons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5% 15px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background-color: #161e2d;
box-shadow: 0px 0px 5px black;
button {
background-color: transparent;
border: none;
}
.nav button {
color: $blue-grey;
display: flex;
align-items: center;
@import '../colors';

ion-icon {
font-size: 24px;
}
span {
margin-left: 5px;
font-size: 0.9rem;
font-size: 14px;
}
}

.action {
display: flex;
}

.header-with-action-buttons {
.action button {
width: 35px;
height: 35px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;

ion-icon {
color: $blue-grey;
font-size: 17px;
}

&.toggle {
width: auto;
padding: 0 10px;
@@ -71,15 +10,15 @@ ion-content {
color: $blue-grey;
font-weight: 500;
letter-spacing: 0.5px;
ion-checkbox {
pointer-events: none;
margin: 0;
margin-right: 10px;
--border-color: #949599a6;
--border-color-checked: #d73e53;
--border-color-checked: #01b868;
--background: #94959970;
--background-checked: #d73e53;
--background-checked: #01b868;
}
}
}
@@ -88,7 +27,6 @@ ion-content {


.chat {
margin-top: 65px;
padding: 10px 5%;
height: calc(100vh - 65px);
color: white;
@@ -217,7 +155,7 @@ ion-content {
background-color: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px -2px black;
box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
margin: 40px 0;
overflow: hidden;
background-color: rgba($blue-grey, 0.3);


+ 2
- 2
src/app/chat/chat.page.ts View File

@@ -82,7 +82,7 @@ export class ChatPage implements OnInit {
this.myAccount = this.members[myAccountIndex];

for (let i = 0; i < 5; i += 1) {
for (let i = 0; i < 2; i += 1) {
let options = [];
for (let j = 0; j < 4; j += 1) {
@@ -99,7 +99,7 @@ export class ChatPage implements OnInit {
let chat = [];

for (let k = 0; k < randomNumber; k += 1) {
let randomMemberIndex = Math.floor(Math.random() * 19);
let randomMemberIndex = Math.floor(Math.random() * 3);
chat.push({
user: this.members[randomMemberIndex],
text: faker.lorem.sentence(),


+ 5
- 4
src/app/collections/collections.page.html View File

@@ -2,15 +2,16 @@

<ion-button (click)="showGrid = !showGrid"
class="grid-button">
<ion-icon *ngIf="!showGrid" name="grid"></ion-icon>
<ion-icon *ngIf="showGrid" name="logo-buffer"></ion-icon>
<ion-icon *ngIf="!showGrid" name="apps-outline"></ion-icon>
<ion-icon *ngIf="showGrid" name="layers-outline"></ion-icon>
</ion-button>
<section class="collections">

<ng-container *ngIf="showGrid">
<ul class="collection-grid">
<li *ngFor="let collection of collections">
<li *ngFor="let collection of collections; let i = index"
(click)="goToCollection(i)">
<img [src]="collection.image">
<label> {{ collection.name }} </label>
</li>
@@ -20,7 +21,7 @@
<ng-container *ngIf="!showGrid">
<img class="glass-box" src="assets/collections/glassbox.png" alt="">

<ion-slides [options]="slideOpts">
<ion-slides #slides [options]="slideOpts">
<ion-slide *ngFor="let collection of collections">
<img [ngClass]="{'bat' : collection.type === 'BAT' || collection.type === 'INVERTED BAT',
'ball' : collection.type === 'BALL',


+ 8
- 13
src/app/collections/collections.page.scss View File

@@ -1,10 +1,4 @@
$lumous-blue: #1a2389;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;
$green: #01b868;
$pink: #d73e53;
$dark-blue: #161e2d;
$blue-grey: #949599;
@import '../colors';

.collections {
height: calc(100vh - 56px);
@@ -15,11 +9,11 @@ $blue-grey: #949599;

.grid-button {
position: fixed;
right: 10px;
top: 10px;
--border-radius: 10px;
width: 40px;
height: 40px;
right: calc(50% - 35px);
bottom: 20px;
--border-radius: 50%;
width: 70px;
height: 70px;
z-index: 3;
margin: 0;
--padding-start: 0;
@@ -28,9 +22,10 @@ $blue-grey: #949599;
--padding-bottom: 0;
--background: white;
--color: #d73e53;
--box-shadow: 2px 2px 5px -2px var(--dark-blue);
ion-icon {
font-size: 24px;
font-size: 28px;
}
}



+ 12
- 2
src/app/collections/collections.page.ts View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
selector: 'app-collections',
@@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./collections.page.scss'],
})
export class CollectionsPage implements OnInit {
@ViewChild('slides') slides: IonSlides;

selectedIndex: number = 0;

slideOpts = {
slidesPerView: 1,
@@ -14,7 +18,6 @@ export class CollectionsPage implements OnInit {
centeredSlides: true,
simulateTouch: false,
followFinger: false,
loop: true,
};

collections: Array<{
@@ -47,4 +50,11 @@ export class CollectionsPage implements OnInit {
}];
}

goToCollection(index: number) {
this.showGrid = false;
setTimeout(() => {
this.slides.slideTo(index);
}, 200);
}

}

+ 6
- 7
src/app/home/home.page.scss View File

@@ -1,12 +1,11 @@
$dark-blue: #076a93;
$dark-voilet: #8c6ee5;
@import '../colors';

.heading-holder {
margin-bottom: 2.7rem;
}

.main-header {
background: -webkit-linear-gradient(180deg, $dark-blue 50%, $dark-voilet);
background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@@ -26,7 +25,7 @@ $dark-voilet: #8c6ee5;

button {
background-color: transparent;
color: $dark-blue;
color: $blue-grey;
font-size: 1.1rem;
font-weight: 400;
margin-right: 5%;
@@ -36,7 +35,7 @@ $dark-voilet: #8c6ee5;
&.active {
font-weight: 500;
opacity: 1;
color: var(--brand-black);
color: $blue-grey;

&::before {
content: '';
@@ -46,7 +45,7 @@ $dark-voilet: #8c6ee5;
position: absolute;
bottom: -18px;
left: calc(50% - 4px);
background-color: var(--brand-red);
background-color: $blue-grey;
}
}
}
@@ -69,7 +68,7 @@ ion-slides {
text-align: left;
height: 100%;
position: relative;
box-shadow: 0px 10px 25px -7px rgba(var(--light-grey-rgb), 0.5);
box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
transition: transform 0.3s;
transform: scale(0.9);



+ 1
- 1
src/app/live/live.page.html View File

@@ -4,7 +4,7 @@

<div class="heading-holder">
<h2 class="main-header">
Matches
#Live
</h2>

<p>


+ 20
- 23
src/app/live/live.page.scss View File

@@ -1,13 +1,4 @@
$lumous-blue: #1a2389;
$dark-blue-shade1: #24367c;
$dark-blue-shade2: #263982;
$green: #01b868;
$pink: #d73e53;

ion-content {
--background: transparent;
background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);
}
@import '../colors';

.content-container {
padding-bottom: 50px;
@@ -18,15 +9,18 @@ ion-content {
padding: 0px 7%;

.main-header {
background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.3rem;
font-weight: 700;
letter-spacing: 1px;
margin: 5% 0%;
color: white;
}

p {
color: white;
color: $blue-grey;
font-size: 1.2rem;
font-weight: 500;
}
@@ -39,12 +33,13 @@ ion-content {
padding: 15px 5%;
overflow: visible;
position: relative;
background: linear-gradient(45deg, $pink 30%, $dark-blue-shade1);
background: linear-gradient(45deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 10%) 80%);
box-shadow: 2px 2px 10px -2px darken($dark-blue, 5%);

.format {
background-color: $green;
background-color: darken($green, 5%);
border-radius: 5px;
padding: 7px;
padding: 7px 15px;
color: white;
font-size: 0.9rem;
font-weight: 500;
@@ -138,8 +133,8 @@ ion-content {
margin: 30px auto;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2);
box-shadow: 0px 0px 5px darken($dark-blue-shade2, 30%);
background: linear-gradient(45deg, lighten($dark-blue, 10%) 20%, lighten($dark-blue, 15%));
box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%);
height: 50px;

-webkit-perspective: 1200px;
@@ -173,11 +168,12 @@ ion-content {
button {
border-radius: 50%;
background-color: $green;
background-color: darken($green, 5%);
box-shadow: 2px 2px 7px -2px darken($dark-blue, 10%);
height: 30px;
width: 30px;
font-size: 24px;
color: white;
color: white;
}
}

@@ -185,11 +181,12 @@ ion-content {
display: block;
width: 100%;
border-radius: 7px;
background-color: $pink;
background-color: lighten($brand-red, 10%);
font-weight: 500;
color: white;
font-size: 1rem;
height: 40px;
box-shadow: 0px 0px 5px 2px darken($dark-blue-shade2, 10%);
box-shadow: 2px 2px 7px -3px darken($dark-blue, 10%);
}
.card {
@@ -238,7 +235,7 @@ ion-content {
}

ion-slides {
padding: 30px 0 20px 0;
padding: 15px 0 20px 0;
position: relative;
left: 0;
top: 0;
@@ -267,7 +264,7 @@ ion-slides {
height: 100%;
overflow: hidden;
border-radius: 7px;
box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%);
box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);

figure {
margin: 0;


+ 2
- 2
src/app/match-details/match-details.page.html View File

@@ -1,13 +1,13 @@
<ion-content *ngIf="matchStats" [scrollEvents]="true">

<section class="action-buttons">
<section class="header-with-action-buttons">
<div class="nav">
<button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
<header> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br>
<span> Live from {{ matchStats.stadium }} Stadium </span> </header>
<div class="action">
<button> <ion-icon name="share-social-outline"></ion-icon> </button>
<button> <ion-icon name="share-social"></ion-icon> </button>
</div>
</section>


+ 29
- 115
src/app/match-details/match-details.page.scss View File

@@ -1,100 +1,14 @@
$dark-blue: #161e2d;
$blue-grey: #949599;
$luminous-blue: #2ea9f5;
$voilet: #424264;
$dark-voilet: #09092b;
$green: #01b868;
$pink: #d73e53;

ion-content {
--background: white;
}

.action-buttons {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 3% 0 0%;
height: 70px;
position: sticky;
position: -webkit-sticky;
left: 0;
top: 0;
background-color: lighten($blue-grey, 35%);
z-index: 2;
width: 100%;
align-items: center;
box-shadow: 0px 0px 5px $blue-grey;
button {
background-color: transparent;
border: none;
}
.nav button {
color: $blue-grey;
display: flex;
align-items: center;
justify-content: flex-start;
@import '../colors';

ion-icon {
font-size: 24px;
}
span {
font-size: 14px;
}
}

header {
flex-grow: 1;
padding: 0 10px;
font-size: 14px;
color: darken($blue-grey, 30%);
font-weight: 500;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

span {
font-weight: 500;
color: $blue-grey;
font-size: 12px;
}
}

.action {
display: flex;
justify-content: flex-end;
}

.action button {
width: 35px;
height: 35px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;

ion-icon {
color: $blue-grey;
font-size: 17px;
}
}

}

.field-container {
position: sticky;
position: -webkit-sticky;
top: 70px;
top: 0px;
height: calc(100vh - 70px);
width: 100%;
z-index: 0;
margin-top: -80px;
}

.field-image {
@@ -249,8 +163,8 @@ ion-content {
}

&:nth-child(12) {
left: 45%;
top: 53%;
left: 50%;
top: 52%;
animation: runUp 1s forwards linear;
animation-delay: 2.8s;
}
@@ -275,17 +189,17 @@ ion-content {
0% {
transform: translate(0,0);
} 100% {
transform: translate(-5vw, 15vh);
transform: translate(7vw, 15vh);
}
}

&:nth-child(14) {
left: 37%;
left: 39%;
top: 82%;

img {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}

&::after {
@@ -358,7 +272,7 @@ ion-content {
display: flex;
justify-content: center;
overflow: hidden;
background-color: rgba(white, 0.5);
background-color: rgba($blue-grey, 0.5);

&.change-bg {
background-color: rgba($blue-grey, 0.3);
@@ -374,7 +288,7 @@ ion-content {
}

button:nth-child(3) {
color: #4eb54b;
color: darken($green, 10%);
}

button:nth-child(1) {
@@ -412,7 +326,7 @@ ion-content {
border-radius: 30px;
border-radius: 30px;
transition: color 0.3s;
color: #4eb54b;
color: darken($green, 10%);
height: 100%;
background-color: transparent;
font-weight: 700;
@@ -428,7 +342,7 @@ ion-content {
span {
width: 12px;
height: 12px;
background-color: #4eb54b;
background-color: darken($green, 10%);
display: block;
border-radius: 50%;

@@ -440,7 +354,7 @@ ion-content {
width: 16px;
position: absolute;
border-radius: 50%;
border: 12px solid rgba(#4eb54b, 0.5);
border: 12px solid rgba(darken($green, 10%), 0.5);
opacity: 0.7;
animation: rippleBorder 1.5s infinite;
}
@@ -468,16 +382,19 @@ ion-content {
}

.segment-holder {
position: fixed;
position: sticky;
left: 0;
top: 70px;
z-index: 2;
z-index: 1;
width: 100%;
padding: 20px 0;
background-color: lighten($voilet, 10%);
background-color: $dark-blue;
box-shadow: 0px 0px 10px -2px darken($dark-blue, 10%);
transition: background-color 0.3s, box-shadow 0.3s;

&.no-bg {
background-color: transparent;
box-shadow: 0px 0px 0px $dark-blue;
}
}

@@ -490,11 +407,12 @@ ion-content {
display: flex;
justify-content: center;
overflow: hidden;
background-color: rgba($blue-grey, 0.5);
background-color: lighten($dark-blue, 15%);
box-shadow: 0px 0px 5px inset $dark-blue;

&.active {
&::before {
transform: translateX(100%);
transform: translateX(98%);
}

button:nth-child(2) {
@@ -512,10 +430,12 @@ ion-content {
left: 0;
top: 0;
width: 50%;
height: 100%;
height: 90%;
top: 5%;
border-radius: 30px;
background-color: $luminous-blue;
background-color: darken($green, 5%);
transition: transform 0.3s;
transform: translateX(2%);
}

button {
@@ -537,17 +457,14 @@ ion-content {
}
}

.score-container {
margin-top: 100px;
}

.score-card {
background-color: white;
box-shadow: 0px 0px 10px $blue-grey;
box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%);
border-radius: 7px;
overflow: hidden;
width: 90%;
margin: 20px auto;
margin: 30px auto;

.container {
width: 90%;
@@ -636,8 +553,6 @@ ion-content {
}

.player-list {
background: linear-gradient(0deg, $voilet 50%, $dark-voilet);
margin-top: 78px;
position: sticky;
top: 0px;
z-index: 0;
@@ -653,7 +568,6 @@ ion-content {
display: flex;
width: 100%;
align-items: center;
background-color: rgba(#ffff, 0.1);
border-bottom: 1px solid rgba(white, 0.1);
padding: 15px 5%;
}


+ 9
- 20
src/app/tabs/tabs.page.scss View File

@@ -1,28 +1,17 @@
@import '../colors';

ion-tab-bar {
--background: white;
--background: transparent;
background-color: $dark-blue;
--border: none;
margin-top: -1px;
box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.5);
--color: var(--light-grey);
--color-selected: var(--brand-black);

&.live {
--background: #24367c;
--color: white;
--color-selected: #01b868;
box-shadow: none;
}

&.dark {
--background: #161e2d;
--color: white;
--color-selected: #01b868;
box-shadow: none;
}
margin-top: -2px;
box-shadow: 0px 0px 15px -2px darken($dark-blue, 10%);
--color: var(--blue-grey);
--color-selected: #01b868;

ion-tab-button {
ion-icon {
font-size: 20px;
font-size: 25px;

&:nth-child(1) {
display: block;


+ 90
- 3
src/global.scss View File

@@ -25,6 +25,8 @@
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import './app/colors';

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
@@ -34,6 +36,89 @@
letter-spacing: 0.5px;
}

ion-content {
--background: transparent;
background: linear-gradient(0deg, lighten($dark-blue, 10%), $dark-blue 80%);
}

.header-with-action-buttons {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 3% 0 0%;
height: 70px;
position: sticky;
position: -webkit-sticky;
left: 0;
top: 0;
background-color: lighten($dark-blue, 5%);
z-index: 2;
width: 100%;
align-items: center;
box-shadow: 0px 0px 5px $dark-blue;
button {
background-color: transparent;
border: none;
}
.nav button {
color: lighten($blue-grey, 10%);
display: flex;
align-items: center;
justify-content: flex-start;

ion-icon {
font-size: 24px;
}
span {
font-size: 14px;
}
}

header {
flex-grow: 1;
padding: 0 15px;
font-size: 14px;
color: lighten($blue-grey, 50%);
font-weight: 500;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

span {
font-weight: 500;
color: lighten($blue-grey, 10%);
font-size: 12px;
}
}

.action {
display: flex;
justify-content: flex-end;
}

.action button {
width: 40px;
height: 40px;
border: 2px solid darken($green, 10%);
background-color: rgba($green, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;

ion-icon {
color: darken($green, 10%);
font-size: 20px;
}
}

}

figure {
margin: 0;
}
@@ -55,7 +140,9 @@ figure {
}

.chat-button {
--background: #d73e53;
--background: transparent;
background-color: lighten($brand-red, 10%);
border-radius: 50%;
position: relative;
overflow: visible;
width: 60px;
@@ -67,8 +154,8 @@ figure {

ion-badge {
position: absolute;
right: 10px;
top: 10px;
right: 7px;
top: 7px;
font-size: 10px;
}
}

+ 2
- 0
src/theme/variables.scss View File

@@ -82,6 +82,8 @@
--brand-red-rgb: 237, 28, 36;
--light-grey: #666666;
--light-grey-rgb: 102, 102, 102;
--dark-blue: #161e2d;
--blue-grey: #949599;

}



Write Preview
Loading…
Cancel
Save