From c7c4c4544c9dca1ea2b285ba3fa0225830e8fb4a Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 12 Jan 2021 21:43:10 +0530 Subject: [PATCH] UI Made thematic --- src/app/_colors.scss | 16 ++ src/app/add-party/add-party.page.html | 2 +- src/app/add-party/add-party.page.scss | 7 +- .../booking-details/booking-details.page.html | 4 +- .../booking-details/booking-details.page.scss | 84 +--------- .../booking-details/booking-details.page.ts | 23 ++- src/app/booking/booking.page.html | 2 +- src/app/booking/booking.page.scss | 24 ++- src/app/chat/chat.page.html | 2 +- src/app/chat/chat.page.scss | 74 +-------- src/app/chat/chat.page.ts | 4 +- src/app/collections/collections.page.html | 9 +- src/app/collections/collections.page.scss | 21 +-- src/app/collections/collections.page.ts | 14 +- src/app/home/home.page.scss | 13 +- src/app/live/live.page.html | 2 +- src/app/live/live.page.scss | 43 +++--- src/app/match-details/match-details.page.html | 4 +- src/app/match-details/match-details.page.scss | 144 ++++-------------- src/app/tabs/tabs.page.scss | 29 ++-- src/global.scss | 93 ++++++++++- src/theme/variables.scss | 2 + 22 files changed, 248 insertions(+), 368 deletions(-) create mode 100644 src/app/_colors.scss diff --git a/src/app/_colors.scss b/src/app/_colors.scss new file mode 100644 index 0000000..f45539e --- /dev/null +++ b/src/app/_colors.scss @@ -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; \ No newline at end of file diff --git a/src/app/add-party/add-party.page.html b/src/app/add-party/add-party.page.html index 8346a8d..351dbec 100644 --- a/src/app/add-party/add-party.page.html +++ b/src/app/add-party/add-party.page.html @@ -1,5 +1,5 @@ -
+
@@ -61,7 +61,7 @@

Total: ₹ {{ getTotalAmount() }}

- +
diff --git a/src/app/booking-details/booking-details.page.scss b/src/app/booking-details/booking-details.page.scss index d675fee..7a82eea 100644 --- a/src/app/booking-details/booking-details.page.scss +++ b/src/app/booking-details/booking-details.page.scss @@ -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 { diff --git a/src/app/booking-details/booking-details.page.ts b/src/app/booking-details/booking-details.page.ts index f342e8e..6d9f1bd 100644 --- a/src/app/booking-details/booking-details.page.ts +++ b/src/app/booking-details/booking-details.page.ts @@ -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); diff --git a/src/app/booking/booking.page.html b/src/app/booking/booking.page.html index 1cc8778..50702ac 100644 --- a/src/app/booking/booking.page.html +++ b/src/app/booking/booking.page.html @@ -1,7 +1,7 @@
-

Booking

+

# Booking

diff --git a/src/app/chat/chat.page.scss b/src/app/chat/chat.page.scss index fd8116c..bca8e56 100644 --- a/src/app/chat/chat.page.scss +++ b/src/app/chat/chat.page.scss @@ -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); diff --git a/src/app/chat/chat.page.ts b/src/app/chat/chat.page.ts index c509196..5d1eab9 100644 --- a/src/app/chat/chat.page.ts +++ b/src/app/chat/chat.page.ts @@ -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(), diff --git a/src/app/collections/collections.page.html b/src/app/collections/collections.page.html index 6ed78a6..5eebf02 100644 --- a/src/app/collections/collections.page.html +++ b/src/app/collections/collections.page.html @@ -2,15 +2,16 @@ - - + +
    -
  • +
    • @@ -20,7 +21,7 @@ - +

    - Matches + #Live

    diff --git a/src/app/live/live.page.scss b/src/app/live/live.page.scss index 3d866b5..42906eb 100644 --- a/src/app/live/live.page.scss +++ b/src/app/live/live.page.scss @@ -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; diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index a563f86..ef02c69 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -1,13 +1,13 @@ -

    +
    {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}
    Live from {{ matchStats.stadium }} Stadium
    - +
    diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index 11086ee..a53a278 100644 --- a/src/app/match-details/match-details.page.scss +++ b/src/app/match-details/match-details.page.scss @@ -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%; } diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss index d2f5935..485dfbc 100644 --- a/src/app/tabs/tabs.page.scss +++ b/src/app/tabs/tabs.page.scss @@ -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; diff --git a/src/global.scss b/src/global.scss index bf35d06..5ce40ff 100644 --- a/src/global.scss +++ b/src/global.scss @@ -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; } } \ No newline at end of file diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 81abc88..654baab 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -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; }