diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index a6eaa3e..4580933 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -1,9 +1,16 @@ - - - match-details - - - +
+ +
+ +
+
+ +
+ +
+
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index e69de29..fdbc58f 100644 --- a/src/app/match-details/match-details.page.scss +++ b/src/app/match-details/match-details.page.scss @@ -0,0 +1,64 @@ +$dark-blue: #161e2d; +$blue-grey: #949599; + +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; + + ion-icon { + font-size: 24px; + } + + span { + margin-left: 5px; + font-size: 0.9rem; + font-size: 14px; + } + } + + .action { + display: flex; + } + + .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; + } + } + +} \ No newline at end of file diff --git a/src/app/player-stats/player-stats.page.html b/src/app/player-stats/player-stats.page.html index b0b350b..59a5b72 100644 --- a/src/app/player-stats/player-stats.page.html +++ b/src/app/player-stats/player-stats.page.html @@ -1,16 +1,16 @@ + +
+ +
+ + +
+
-
- -
- - -
-
-
diff --git a/src/app/player-stats/player-stats.page.scss b/src/app/player-stats/player-stats.page.scss index 13df6ad..34d821e 100644 --- a/src/app/player-stats/player-stats.page.scss +++ b/src/app/player-stats/player-stats.page.scss @@ -9,9 +9,15 @@ ion-content { .action-buttons { display: flex; justify-content: space-between; - align-items: flex-start; - padding: 20px 5% 10px 3%; - margin-bottom: 20px; + 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; @@ -63,6 +69,7 @@ ion-content { width: 95%; padding-left: 5%; position: relative; + margin-top: 90px; &::before { content: '';