CHORE: updated styles to match tailwind's expectation for opacity mod…

…ifiers
penumbra-zone · Aug 15, 2024 · d334bc4 · d334bc4
1 parent 2cf3b3e
commit d334bc4
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 42 deletions.
diff --git a/apps/web/src/app/block/[ht]/page.tsx b/apps/web/src/app/block/[ht]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary rounded-sm shadow-md">
+    <div className="bg-primary/60 rounded-sm shadow-md">
       <div className="flex flex-col gap-5 pt-5 items-center">
         <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
         <HydrationBoundary state={dehydrate(queryClient)}>

diff --git a/apps/web/src/app/blocks/page.tsx b/apps/web/src/app/blocks/page.tsx
@@ -27,7 +27,7 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5">
       <h1 className="sm:text-2xl font-bold self-center">Recent Blocks</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <BlocksTable

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -11,65 +11,70 @@
 */
 @layer base {
   :root {
-    --background: 0 0% 100% / 1.0;
-    --foreground: 0 0% 4% / 1.0;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 4%;
 
-    --card: 0 0% 100% / 0.6;
-    --card-foreground: 0 0% 4% / 1.0;
+    --card: 0 0% 100%;
+    /* --card-bg-alpha: 0.6; */
+    --card-foreground: 0 0% 4%;
 
-    --popover: 0 0% 100% / 1.0;
-    --popover-foreground: 0 0% 4% / 1.0;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 4%;
 
-    --primary: 0 0% 100% / 0.6;
-    --primary-foreground: 0 0% 9%  / 1.0;
+    --primary: 0 0% 100%;
+    /* --primary-bg-alpha: 0.6; */
+    --primary-foreground: 0 0% 9%;
 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 0 0% 96% / 0.9;
-    --muted-foreground: 0 0% 45% / 1.0;
+    --muted: 0 0% 96%;
+    /* --muted-bg-alpha: 0.9; */
+    --muted-foreground: 0 0% 45%;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --link: 179 49% 26% / 1.0;
+    --link: 179 49% 26%;
 
-    --border: 0 0% 90% / 1.0;
+    --border: 0 0% 90%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 0 0% 0% / 1.0;
-    --foreground: 0 0% 98% / 1.0;
+    --background: 0 0% 0%;
+    --foreground: 0 0% 98%;
 
-    --card: 0 0% 0% / 0.6;  
-    --card-foreground: 0 0% 98% / 1.0;
+    --card: 0 0% 0%;
+    /* --card-bg-alpha: 0.6; */
+    --card-foreground: 0 0% 98%;
 
-    --popover: 0 0% 0% / 1.0;
-    --popover-foreground: 0 0% 98% / 1.0;
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 98%;
 
-    --primary: 0 0% 0% / 0.6;
-    --primary-foreground: 0 0% 96% / 1.0;
+    --primary: 0 0% 0%;
+    /* --primary-bg-alpha: 0.6; */
+    --primary-foreground: 0 0% 96%;
 
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
 
-    --muted: 0 0% 9% / 1.0;
-    --muted-foreground: 0 0% 45% / 1.0;
+    --muted: 0 0% 9%;
+    --muted-foreground: 0 0% 45%;
 
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --link: 176 36% 50% / 1.0;
+    --link: 176 36% 50%;
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;

diff --git a/apps/web/src/app/ibc/channel/[id]/page.tsx b/apps/web/src/app/ibc/channel/[id]/page.tsx
@@ -26,7 +26,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center ">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
       <h1 className="font-medium">IBC Channel</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="sm:w-11/12 w-full">

diff --git a/apps/web/src/app/ibc/channels/page.tsx b/apps/web/src/app/ibc/channels/page.tsx
@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
       <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ChannelsTable

diff --git a/apps/web/src/app/ibc/client/[id]/page.tsx b/apps/web/src/app/ibc/client/[id]/page.tsx
@@ -26,7 +26,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center ">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
       <h1 className="font-medium">IBC Client</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="sm:w-11/12 w-full">

diff --git a/apps/web/src/app/ibc/clients/page.tsx b/apps/web/src/app/ibc/clients/page.tsx
@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
       <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ClientsTable

diff --git a/apps/web/src/app/ibc/connection/[id]/page.tsx b/apps/web/src/app/ibc/connection/[id]/page.tsx
@@ -27,7 +27,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center ">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
       <h1 className="font-medium">IBC Connection</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="sm:w-11/12 w-full">

diff --git a/apps/web/src/app/ibc/connections/page.tsx b/apps/web/src/app/ibc/connections/page.tsx
@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 items-center pt-5">
+    <div className="bg-primary/60 flex flex-col gap-5 items-center pt-5">
       <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ConnectionsTable

diff --git a/apps/web/src/app/ibc/page.tsx b/apps/web/src/app/ibc/page.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Page = () => {
   return (
-    <div className="flex flex-col gap-5 items-center pt-5 bg-primary">
+    <div className="flex flex-col gap-5 items-center pt-5 bg-primary/60">
       <h1 className="text-lg font-bold">Available IBC data to explore</h1>
       <div className="flex w-full justify-around">
         <p className="font-bold underline">

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -10,7 +10,7 @@ import {
 
 import { Button } from "@/components/ui/button";
 import { FC } from "react";
-import { getQueryClient } from "@/lib/utils";
+import { cn, getQueryClient } from "@/lib/utils";
 
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { PreviewTable } from "@/components/PreviewTable";
@@ -30,7 +30,7 @@ interface CardProps {
 const LandingCard: FC<CardProps> = ({ heading, children, className, buttonText, buttonLink, disabled = false }) => {
   console.log(heading, disabled);
   return (
-    <Card className={className}>
+    <Card className={cn("bg-card/60", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-medium">{heading}</CardTitle>
       </CardHeader>

diff --git a/apps/web/src/app/search/[query]/page.tsx b/apps/web/src/app/search/[query]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 sm:p-8">
+    <div className="bg-primary/60 flex flex-col gap-5 sm:p-8">
       <h1 className="sm:text-2xl font-bold">Search results</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <SearchResultsTable className="w-full" query={query}/>

diff --git a/apps/web/src/app/transaction/[hash]/page.tsx b/apps/web/src/app/transaction/[hash]/page.tsx
@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center ">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
       <h1 className="font-medium">Transaction Summary</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="sm:w-11/12 w-full">

diff --git a/apps/web/src/app/transactions/page.tsx b/apps/web/src/app/transactions/page.tsx
@@ -28,7 +28,7 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary flex flex-col gap-5 pt-5 items-center">
+    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
       <h1 className="sm:text-2xl font-bold">Recent Transactions</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <TransactionsTable

diff --git a/apps/web/src/components/ui/attribute-table.tsx b/apps/web/src/components/ui/attribute-table.tsx
@@ -45,7 +45,7 @@ export function AttributeTable<TData, TValue>({
     <div className={`${className ?? ""}`}>
       <div className="rounded-md border">
         <Table>
-          <TableHeader className="">
+          <TableHeader>
             {table.getHeaderGroups()[0].headers.map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {
@@ -66,7 +66,6 @@ export function AttributeTable<TData, TValue>({
               table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
-                  className="hover:bg-muted"
                   data-state={row.getIsSelected() && "selected"}
                 >
                   {row.getVisibleCells().map((cell) => (

diff --git a/apps/web/src/components/ui/paginated-data-table.tsx b/apps/web/src/components/ui/paginated-data-table.tsx
@@ -35,6 +35,7 @@ export function PaginatedDataTable<TData, TValue> ({ table, columns } : Paginate
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
               <TableRow
+                className="hover:bg-muted/80"
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
               >

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
@@ -30,7 +30,7 @@ module.exports = {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
@@ -42,7 +42,7 @@ module.exports = {
           foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
           foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
@@ -54,7 +54,7 @@ module.exports = {
           foreground: "hsl(var(--popover-foreground))",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
           foreground: "hsl(var(--card-foreground))",
         },
       },