From f10546a60fce9439c3f3e6e726b11c2deb7cbdb2 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 31 Jul 2023 14:50:32 +0100
Subject: Tweak UI elements

---
 code/ui/PlayerInfo.razor              | 17 ++++-------------
 code/ui/character/LookingAtInfo.razor |  9 +++------
 code/ui/character/NameInfo.razor      |  1 +
 code/ui/component/Box.razor           | 17 +++++++++++++++++
 code/ui/component/SmallBox.razor      | 17 +++++++++++++++++
 code/ui/health/Health.razor           |  1 +
 code/ui/phase/PhaseTimer.razor        | 18 ++++++++----------
 code/ui/team/TeamInfo.razor           |  1 +
 8 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 code/ui/component/Box.razor
 create mode 100644 code/ui/component/SmallBox.razor

(limited to 'code')

diff --git a/code/ui/PlayerInfo.razor b/code/ui/PlayerInfo.razor
index 9c23586..131b278 100644
--- a/code/ui/PlayerInfo.razor
+++ b/code/ui/PlayerInfo.razor
@@ -11,15 +11,6 @@ playerinfo {
 	width: 100vw;
 	height: 100vh;
 }
-.box {
-	background-color: rgba(0, 0, 0, 0.20);
-	backdrop-filter-blur: 8px;
-	display: flex;
-	align-items: center;
-	flex-direction: row;
-	gap: 10px;
-	padding: 10px;
-}
 .playerinfo {
 	position: absolute;
 	left: 30px;
@@ -32,13 +23,13 @@ playerinfo {
 }
 </style>
 
-<div class="playerinfo box">
+<box class="playerinfo">
 	<Health Colour="@GetCharacterColour()"></Health>
 	<NameInfo Colour="@GetCharacterColour()"></NameInfo>
-</div>
-<div class="teaminfo box">
+</box>
+<box class="teaminfo">
 	<TeamInfo Colour="@GetTeamColour()"></TeamInfo>
-</div>
+</box>
 
 @code
 {
diff --git a/code/ui/character/LookingAtInfo.razor b/code/ui/character/LookingAtInfo.razor
index dceb627..ab43527 100644
--- a/code/ui/character/LookingAtInfo.razor
+++ b/code/ui/character/LookingAtInfo.razor
@@ -18,14 +18,11 @@ lookingatinfo {
 	flex-direction: column;
 }
 .box {
-	backdrop-filter-blur: 8px; 
-	background-color: rgba(0, 0, 0, 0.10);
-	padding: 5px;
-	color: white;
 	font-weight: 700;
 	font-size: 20px;
 	font-family: "Roboto";
 	margin-top: 100px;
+	text-shadow: 1px 1px 0 0 rgba(0,0,0,0.75);
 }
 .text {
 	/* text-shadow: 1px 1px 0px 0px rgba(0,0,0,0.75); */
@@ -34,9 +31,9 @@ lookingatinfo {
 
 @if (GetLookingAtName() != "")
 {
-<div class="box" style="color: @GetLookingAtColour()">
+<smallbox class="box" style="color: @GetLookingAtColour()">
 	<span class="text">@GetLookingAtName()</span>
-</div>
+</smallbox>
 }
 
 @code
diff --git a/code/ui/character/NameInfo.razor b/code/ui/character/NameInfo.razor
index 8b6dce1..f0a7488 100644
--- a/code/ui/character/NameInfo.razor
+++ b/code/ui/character/NameInfo.razor
@@ -9,6 +9,7 @@
     font-size: 30px;
     font-weight: 700;
     font-family: "Roboto";
+	text-shadow: 1px 1px 0 0 rgba(0,0,0,0.75);
 }
 </style>
 
diff --git a/code/ui/component/Box.razor b/code/ui/component/Box.razor
new file mode 100644
index 0000000..a1a88d3
--- /dev/null
+++ b/code/ui/component/Box.razor
@@ -0,0 +1,17 @@
+@using Sandbox.Razor
+@using Sandbox.UI;
+
+@namespace MurderGame
+@inherits Panel
+
+<style>
+box {
+	background-color: rgba(0, 0, 0, 0.40);
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	gap: 10px;
+	padding: 10px;
+	backdrop-filter-blur: 2px;
+}
+</style>
diff --git a/code/ui/component/SmallBox.razor b/code/ui/component/SmallBox.razor
new file mode 100644
index 0000000..f5775aa
--- /dev/null
+++ b/code/ui/component/SmallBox.razor
@@ -0,0 +1,17 @@
+@using Sandbox.Razor
+@using Sandbox.UI;
+
+@namespace MurderGame
+@inherits Panel
+
+<style>
+smallbox {
+	background-color: rgba(0, 0, 0, 0.40);
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	gap: 5px;
+	padding: 5px;
+	backdrop-filter-blur: 2px;
+}
+</style>
diff --git a/code/ui/health/Health.razor b/code/ui/health/Health.razor
index afef6ef..d350756 100644
--- a/code/ui/health/Health.razor
+++ b/code/ui/health/Health.razor
@@ -9,6 +9,7 @@ Health {
     width: 350px;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.90);
+	box-shadow: 1px 1px 0 0 rgba(0,0,0,0.75);
 }
 .colour-bar {
     height: 100%;
diff --git a/code/ui/phase/PhaseTimer.razor b/code/ui/phase/PhaseTimer.razor
index 9293976..73f44e2 100644
--- a/code/ui/phase/PhaseTimer.razor
+++ b/code/ui/phase/PhaseTimer.razor
@@ -16,26 +16,24 @@ phasetimer {
     align-items: center;
 }
 .box {
-    background-color: rgba(0, 0, 0, 0.20);
-    backdrop-filter-blur: 8px;
-    padding: 5px;
     color: white;
     font-weight: 700;
-    font-size: 30px;
+    font-size: 25px;
     font-family: "Roboto";
+	text-shadow: 1px 1px 0 0 rgba(0,0,0,0.75);
 }
 </style>
 
 @if (HasTime())
 {
-<div class="box">
+<smallbox class="box">
     @GetTime()
-</div>
+</smallbox>
 } else
 {
-<div class="box">
+<smallbox class="box">
     @GetPhase()
-</div>
+</smallbox>
 }
 
 @code
@@ -54,8 +52,8 @@ phasetimer {
         return MurderGame.Instance.CurrentPhase.Title;
     }
 
-    protected override int BuildHash()
+    protected override int BuildHash()
     {
-        return HashCode.Combine(MurderGame.Instance.CurrentPhase.TimeLeft.GetHashCode(), MurderGame.Instance.CurrentPhase.Title.GetHashCode());
+        return HashCode.Combine(MurderGame.Instance.CurrentPhase.TimeLeft.GetHashCode(), MurderGame.Instance.CurrentPhase.Title.GetHashCode());
     }
 }
diff --git a/code/ui/team/TeamInfo.razor b/code/ui/team/TeamInfo.razor
index cb2b55d..71a2d66 100644
--- a/code/ui/team/TeamInfo.razor
+++ b/code/ui/team/TeamInfo.razor
@@ -9,6 +9,7 @@
     font-size: 30px;
     font-weight: 700;
     font-family: "Roboto";
+	text-shadow: 1px 1px 0 0 rgba(0,0,0,0.75);
 }
 </style>
 
-- 
cgit v1.2.3-70-g09d2