fix: update gpu pricing page styles

akash-network · Aug 28, 2024 · e22dc05 · e22dc05
1 parent 0feacf3
commit e22dc05
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 21 deletions.
diff --git a/src/components/pricing-page/gpus/gpu-table.tsx b/src/components/pricing-page/gpus/gpu-table.tsx
@@ -440,10 +440,10 @@ export const Tables = ({
               : filteredData?.map((model, index) => (
                 <tr
                   key={index}
-                  className="border overflow-hidden rounded-lg  bg-background2 shadow-sm"
+                  className="overflow-hidden bg-background2 rounded-lg outline-none border-none shadow-sm"
                 >
                   <td
-                    className=" rounded-l-lg  text-base font-semibold  xl:text-lg w-[24%]"
+                    className="rounded-l-lg border-l border-y text-base font-semibold xl:text-lg w-[24%]"
                   >
                     <div className="flex items-center gap-3">
                       <div className="p-[11px_5px] ml-6 border rounded-md">
@@ -459,10 +459,10 @@ export const Tables = ({
                       </div>
                     </div>
                   </td>
-                  <td className="w-[27.2%] px-2 xl:px-8">
+                  <td className="w-[27.2%] border-y px-2 xl:px-8">
                     <AvailabilityBar available={model?.availability?.available} total={model?.availability?.total} />
                   </td>
-                  <td className="w-[27.2%] px-2 xl:px-8">
+                  <td className="w-[27.2%] border-y px-2 xl:px-8">
                     <div className="flex justify-between border-b text-lg">
                       <span className="font-semibold">
                         Average price:
@@ -515,12 +515,12 @@ export const Tables = ({
                       </HoverCardContent>
                     </HoverCard>
                   </td>
-                  <td className="text-center px-2 xl:px-8 rounded-r-lg">
+                  <td className="rounded-r-lg border-r border-y text-center px-2 xl:px-8">
                     <a
                       id={`${model?.model}-(gpu-rent)`}
                       href={`https://console.akash.network/rent-gpu?vendor=${model?.vendor}&gpu=${model?.model}&interface=${model?.interface}&vram=${model?.ram}`}
                       target="_blank"
-                      className=" rounded-md bg-foreground py-2 px-4 inline-flex gap-1.5 hover:bg-primary text-white dark:text-black dark:hover:text-inherit"
+                      className="rounded-md bg-foreground py-2 px-4 inline-flex gap-1.5 hover:bg-primary text-white dark:text-black dark:hover:text-inherit"
                     >
                       <p className="text-xs font-medium text-inherit">Rent Now</p>
                       <ArrowUpRightIcon className="w-[15px]" />

diff --git a/src/components/pricing-page/pricing.tsx b/src/components/pricing-page/pricing.tsx
@@ -101,7 +101,10 @@ function Pricing() {
                     <h2 className="text-center text-2xl font-bold md:hidden">
                         Provider Earnings
                     </h2>
-                    <p className="text-center mt-3 leading-normal">
+                    <p className="text-center mt-3 leading-normal hidden md:block">
+                        Calculate your potential earnings by providing resources to the Akash Network.
+                    </p>
+                    <p className="text-center mt-3 leading-normal md:hidden">
                         Calculate your potential earnings by<br />providing resources to the Akash Network.
                     </p>
                 </div>

diff --git a/src/components/pricing-page/provider/pricing-unit.tsx b/src/components/pricing-page/provider/pricing-unit.tsx
@@ -22,15 +22,20 @@ function PricingUnit({ title, content, position, progress, setProgress, max, suf
     }, [progress])
 
     return (
-        <div className="flex flex-col justify-between gap-4 md:gap-5 w-full">
+        <div className={`flex flex-col justify-between md:gap-6 w-full ${flag ? 'gap-0' : 'gap-4'}`}>
             <div className={`lg:flex lg:justify-between ${position ? position : 'items-start'} ${flag ? 'flex justify-between items-baseline' : ''}`}>
                 <div className={flag ? 'mb-4' : ''}>
                     <p className="font-semibold text-foreground whitespace-nowrap md:whitespace-normal">
                         {title}
                     </p>
-                    {flag ? <p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal">
-                        Usage %<br />(Leases in your provider)
-                    </p> : <p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal">
+                    {flag ? (<>
+                        <p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal sm:hidden">
+                            Usage %<br />(Leases in your provider)
+                        </p>
+                        <p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal hidden sm:block">
+                            Usage % (Leases in your provider)
+                        </p>
+                    </>) : <p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal">
                         {content}
                     </p>}
                 </div>

diff --git a/src/components/pricing-page/provider/provider-table.tsx b/src/components/pricing-page/provider/provider-table.tsx
@@ -351,7 +351,7 @@ export const Tables = ({
             <div className="flex flex-col gap-2 w-full">
                 <p className="font-semibold  hidden md:block">Estimated Earnings</p>
                 <div className="md:rounded-md md:border md:p-6 md:shadow-sm md:bg-background2">
-                    <div className="pb-6 border rounded-md md:border-none p-4">
+                    <div className="border rounded-md md:border-b md:border-l-0 md:border-t-0 md:border-r-0 p-4 md:pb-7">
                         <PricingUnit
                             title="Provider Utilization"
                             content="Usage % (Leases in your provider)"
@@ -364,15 +364,15 @@ export const Tables = ({
                             flag={true}
                         />
                     </div>
-                    <div className="mt-8 md:mt-0 border rounded-md md:border-none p-4 md:p-0">
+                    <div className="mt-8 md:mt-0 border rounded-md md:border-none p-4 md:pt-4">
                         <p className="font-semibold text-black dark:text-white">
                             Resources pricing
                         </p>
                         <p className="font-medium">
                             Usage % (Leases in your provider)
                         </p>
-                        <div className="flex flex-col gap-7 pt-4 md:pt-0">
-                            <div className="flex items-start gap-6 md:gap-8 xl:gap-10 justify-between pb-7 border-b">
+                        <div className="flex flex-col gap-7">
+                            <div className="flex items-start gap-6 md:gap-8 xl:gap-10 justify-between py-7 border-b">
                                 <img src={CpuBrand.src} alt="CPU" className="hidden lg:block" />
                                 <PricingUnit
                                     title="CPU"

diff --git a/src/components/pricing-page/usage/disclaimer.tsx b/src/components/pricing-page/usage/disclaimer.tsx
@@ -1,13 +1,37 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { Info } from "lucide-react";
 
 function Disclaimer() {
     return (
         <div className="flex gap-1 items-center">
-            <p className="text-sm font-medium text-[#7E868C]">Disclaimer</p>
-            <Info
-                size={14}
-                className="text-[#9D9C9C] dark:text-[#3E3E3E]"
-            />
+
+            <HoverCard openDelay={2} closeDelay={2}>
+                <HoverCardTrigger className="pt-1.5 flex justify-between items-center">
+                    <p className="text-sm font-medium text-[#7E868C] mr-2">Disclaimer</p>
+                    <Info
+                        size={14}
+                        className="text-[#9D9C9C] dark:text-[#3E3E3E]"
+                    />
+                </HoverCardTrigger>
+                <HoverCardContent className="r-0" side="left" sideOffset={-85} align="start" alignOffset={40}>
+                    <div className="flex flex-col px-4 py-3 text-xs text-linkText max-w-[250px] sm:max-w-[500px] md:max-w-[700px]">
+                        <p>
+                            These prices may vary. We strongly suggest that you do your own research as we may have miscalculated some of the providers' pricing. To calculate the pricing for Akash, we use the same calculations from the provider bidding engine in the helm-charts repo from Akash. For the other cloud providers, we use the same logic of price per GB of ram/storage and price per thread.
+                        </p>
+                        <ul className="ml-6 mt-4 list-disc">
+                            <li>
+                                Amazon Web Service pricing calculator
+                            </li>
+                            <li>
+                                Google cloud platform pricing
+                            </li>
+                            <li>
+                                Calculator Microsoft Azure pricing calculator
+                            </li>
+                        </ul>
+                    </div>
+                </HoverCardContent>
+            </HoverCard>
         </div>
     );
 }

diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -1 +1 @@
-export const gpus = "https://api.cloudmos.io/internal/gpu-prices";
+export const gpus = "http://65.109.84.205:4322/internal/gpu-prices";