Fixed Finance Page

COS301-SE-2023 · Oct 22, 2023 · 0fa00e7 · 0fa00e7
1 parent 80e0b62
commit 0fa00e7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/src/apps/blazor-app/Components/Advanced/Finanace.razor b/src/apps/blazor-app/Components/Advanced/Finanace.razor
@@ -10,18 +10,21 @@
     <Subscript><p class="text-center">All calculations are derived from the monthly bill. Please keep in mind that these calculations are approximate, and costs may vary among different solar installers."</p></Subscript>
 </Heading>
 
-<div class="w-full flex">
-    <div class="flex flex-col gap-2 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
-        <p class="text-center text-white font-semibold">Select your monthly bill:</p>
-        <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
+<div class="w-full flex px-20">
+    <div class="flex flex-col gap-4 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
+        <div class="flex justify-center items-center">
+            <div class="flex flex-col gap-2 items-center justify-center">
+                <p class="text-center text-white font-semibold">Select your monthly bill:</p>
+                <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
+            </div>
+            <p class="text-2xl text-center text-primary-900 font-black self-center mx-4">OR</p>
+            <div class="flex flex-col gap-2 items-center justify-center">
+                <p class="text-center text-white font-semibold">Select your monthly electricity usage:</p>
+                <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">@monthlyUsage kWh</h1>
+            </div>
+        </div>
         <input type="range" class="accent-primary-800  cursor-pointer w-3/4" min="1000" max="7000" step="100" @bind="monthlyBill" @oninput="HandleBillSliderChange" />
     </div>
-    <p class="text-2xl text-center text-primary-900 font-black self-center mx-4">OR</p>
-    <div  class="flex flex-col gap-2 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
-        <p class="text-center text-white font-semibold">Select your monthly electricity usage:</p>
-        <h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">@monthlyUsage kWh</h1>
-        <input type="range" class="accent-primary-800  cursor-pointer w-3/4" min="400" max="2800" step="20" @bind="monthlyUsage" @oninput="HandleUsageSliderChange" />
-    </div>  
 </div>
 
 <div class="flex gap-5 justify-center items-center mt-10">
@@ -136,6 +139,7 @@
 
     private void HandleBillSliderChange(ChangeEventArgs e)
     {
+
         if (int.TryParse(e.Value!.ToString(), out int newValue))
         {
             monthlyBill = newValue;

diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
@@ -2033,12 +2033,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-\[\] {
-  --tw-scale-x: ;
-  --tw-scale-y: ;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-scale-x-100 {
   --tw-scale-x: -1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2553,16 +2547,6 @@ video {
   background-color: rgb(255 193 8 / var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2779,6 +2763,11 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -4634,6 +4623,10 @@ html {
     width: 66.666667%;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:w-\[30\%\] {
     width: 30%;
   }
@@ -4643,10 +4636,6 @@ html {
     width: fit-content;
   }
 
-  .lg\:w-80 {
-    width: 20rem;
-  }
-
   .lg\:flex-1 {
     flex: 1 1 0%;
   }