style(deploy-web): fixed styling authorizations (#198)

akash-network · May 15, 2024 · d9a7e40 · d9a7e40
1 parent 517ed5c
commit d9a7e40
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 33 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudmos-api",
-  "version": "2.18.3",
+  "version": "2.18.4",
   "description": "Api providing data to the deploy tool",
   "author": "Cloudmos",
   "license": "Apache-2.0",

diff --git a/deploy-web/src/components/authorizations/AllowanceGrantedRow.tsx b/deploy-web/src/components/authorizations/AllowanceGrantedRow.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export const AllowanceGrantedRow: React.FunctionComponent<Props> = ({ allowance }) => {
   return (
-    <TableRow>
+    <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>{getAllowanceTitleByType(allowance)}</TableCell>
       <TableCell>
         <Address address={allowance.granter} isCopyable />

diff --git a/deploy-web/src/components/authorizations/AllowanceIssuedRow.tsx b/deploy-web/src/components/authorizations/AllowanceIssuedRow.tsx
@@ -19,7 +19,7 @@ type Props = {
 
 export const AllowanceIssuedRow: React.FunctionComponent<Props> = ({ allowance, onEditAllowance, setDeletingAllowance }) => {
   return (
-    <TableRow>
+    <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>{getAllowanceTitleByType(allowance)}</TableCell>
       <TableCell>
         <Address address={allowance.grantee} isCopyable />

diff --git a/deploy-web/src/components/authorizations/Authorizations.tsx b/deploy-web/src/components/authorizations/Authorizations.tsx
@@ -21,6 +21,7 @@ import { AllowanceIssuedRow } from "./AllowanceIssuedRow";
 import { GranteeRow } from "./GranteeRow";
 import { GranterRow } from "./GranterRow";
 import { NextSeo } from "next-seo";
+import { Title } from "../shared/Title";
 
 type Props = {};
 
@@ -128,14 +129,14 @@ export const Authorizations: React.FunctionComponent<Props> = ({}) => {
         page={SettingsTabs.AUTHORIZATIONS}
         headerActions={
           <div className="md:ml-4">
-            <Button onClick={onCreateNewGrant} color="secondary" variant="default" type="button">
+            <Button onClick={onCreateNewGrant} color="secondary" variant="default" type="button" size="sm">
               <Bank />
               &nbsp;Authorize Spend
             </Button>
           </div>
         }
       >
-        <h3 className="mb-4 text-lg text-muted-foreground">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on deployments or deployment deposits using your funds. You can revoke these
           authorizations at any time.
         </h3>
@@ -200,15 +201,15 @@ export const Authorizations: React.FunctionComponent<Props> = ({}) => {
           )}
         </Fieldset>
 
-        <div className="flex flex-wrap items-center pb-6 pt-4">
-          <h1 className="text-3xl font-bold">Tx Fee Authorizations</h1>
-          <Button onClick={onCreateNewAllowance} color="secondary" variant="default" className="md:ml-4" type="button">
+        <div className="flex flex-wrap items-center py-4">
+          <Title>Tx Fee Authorizations</Title>
+          <Button onClick={onCreateNewAllowance} color="secondary" variant="default" className="md:ml-4" type="button" size="sm">
             <Bank />
             &nbsp;Authorize Fee Spend
           </Button>
         </div>
 
-        <h3 className="mb-4 text-lg text-muted-foreground">
+        <h3 className="mb-4 text-muted-foreground">
           These authorizations allow you authorize other addresses to spend on transaction fees using your funds. You can revoke these authorizations at any
           time.
         </h3>

diff --git a/deploy-web/src/components/authorizations/GranteeRow.tsx b/deploy-web/src/components/authorizations/GranteeRow.tsx
@@ -17,7 +17,7 @@ export const GranteeRow: React.FunctionComponent<Props> = ({ grant }) => {
   const denomData = useDenomData(grant.authorization.spend_limit.denom);
 
   return (
-    <TableRow>
+    <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>
         <Address address={grant.granter} isCopyable />
       </TableCell>

diff --git a/deploy-web/src/components/authorizations/GranterRow.tsx b/deploy-web/src/components/authorizations/GranterRow.tsx
@@ -21,7 +21,7 @@ export const GranterRow: React.FunctionComponent<Props> = ({ children, grant, on
   const denomData = useDenomData(grant.authorization.spend_limit.denom);
 
   return (
-    <TableRow>
+    <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>
         <Address address={grant.grantee} isCopyable />
       </TableCell>

diff --git a/deploy-web/src/components/deployments/DeploymentListRow.tsx b/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -181,14 +181,16 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
   return (
     <>
       <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" onClick={() => viewDeployment()}>
-        <TableCell className="text-center">
-          <SpecDetailList
-            cpuAmount={deployment.cpuAmount}
-            gpuAmount={deployment.gpuAmount}
-            memoryAmount={deployment.memoryAmount}
-            storageAmount={deployment.storageAmount}
-            isActive={isActive}
-          />
+        <TableCell>
+          <div className="flex items-center justify-center">
+            <SpecDetailList
+              cpuAmount={deployment.cpuAmount}
+              gpuAmount={deployment.gpuAmount}
+              memoryAmount={deployment.memoryAmount}
+              storageAmount={deployment.storageAmount}
+              isActive={isActive}
+            />
+          </div>
         </TableCell>
         <TableCell className="max-w-[100px] text-center">{deploymentName}</TableCell>
         <TableCell className="text-center">

diff --git a/deploy-web/src/components/settings/SettingsLayout.tsx b/deploy-web/src/components/settings/SettingsLayout.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { ErrorFallback } from "@src/components/shared/ErrorFallback";
 import { Tabs, TabsList, TabsTrigger } from "@src/components/ui/tabs";
 import { cn } from "@src/utils/styleUtils";
+import { Title } from "../shared/Title";
 
 export enum SettingsTabs {
   GENERAL = "GENERAL",
@@ -45,8 +46,8 @@ export const SettingsLayout: React.FunctionComponent<Props> = ({ children, page,
         </TabsTrigger>
       </TabsList>
 
-      <div className="flex flex-wrap items-center pb-2 pt-8 mb-4">
-        <h1 className="text-3xl font-bold">{title}</h1>
+      <div className="flex flex-wrap items-center py-4 mt-4">
+        <Title>{title}</Title>
         {headerActions}
       </div>
 

diff --git a/deploy-web/src/components/shared/Fieldset.tsx b/deploy-web/src/components/shared/Fieldset.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Card, CardContent } from "../ui/card";
+import { Card, CardContent, CardHeader } from "../ui/card";
 
 type Props = {
   label: string;
@@ -11,13 +11,8 @@ type Props = {
 export const Fieldset: React.FunctionComponent<Props> = ({ label, className = "", children }) => {
   return (
     <Card className={className}>
-      <CardContent className="relative rounded-sm">
-        <div className="p-2 text-muted-foreground">
-          <p>{label}</p>
-        </div>
-
-        <div className="p-4">{children}</div>
-      </CardContent>
+      <CardHeader>{label}</CardHeader>
+      <CardContent className="relative rounded-sm">{children}</CardContent>
     </Card>
   );
 };
diff --git a/deploy-web/src/components/shared/TemplateGridButton.tsx b/deploy-web/src/components/shared/TemplateGridButton.tsx
@@ -14,7 +14,7 @@ type Props = {
 export const TemplateGridButton: React.FunctionComponent<Props> = ({ template, onClick }) => {
   return (
     <Link
-      className={cn(cardClasses, "min-h-[100px] cursor-pointer !no-underline hover:bg-primary/10")}
+      className={cn(cardClasses, "min-h-[100px] cursor-pointer !no-underline hover:bg-secondary/60 dark:hover:bg-secondary/30")}
       href={UrlService.template(template.id as string)}
       onClick={onClick}
     >

diff --git a/deploy-web/src/pages/profile/[username]/index.tsx b/deploy-web/src/pages/profile/[username]/index.tsx
@@ -1,9 +1,7 @@
-import { UrlService } from "@src/utils/urlUtils";
-import { Metadata } from "next";
 import { BASE_API_MAINNET_URL } from "@src/utils/constants";
-import { UserProfile } from "../../../components/user/UserProfile";
 import { IUserSetting } from "@src/types/user";
 import axios from "axios";
+import { UserProfile } from "@src/components/user/UserProfile";
 
 type Props = {
   username: string;