Tweak Your Charts Page Design

tone-row · Jul 9, 2023 · 25ab425 · 25ab425
1 parent 63b4e08
commit 25ab425
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 15 deletions.
diff --git a/app/src/components/InfoHeader.tsx b/app/src/components/InfoHeader.tsx
@@ -17,7 +17,7 @@ export function InfoHeader({
         <OnlyInEnglish />
       </div>
       {description && (
-        <p className="text-blue-400 dark:text-blue-300 text-lg font-bold">
+        <p className="text-center text-neutral-500 dark:text-neutral-400">
           {description}
         </p>
       )}

diff --git a/app/src/index.css b/app/src/index.css
@@ -158,11 +158,6 @@ div[data-reach-tooltip] {
   letter-spacing: -0.025em;
 }
 
-.chart-link:hover .chart-link-buttons,
-.chart-link:focus-within .chart-link-buttons {
-  opacity: 1;
-}
-
 /** Completely Hide Editor Actions */
 .monaco-editor .monaco-hover .hover-row.status-bar .actions {
   display: none;

diff --git a/app/src/pages/Charts.tsx b/app/src/pages/Charts.tsx
@@ -32,7 +32,7 @@ import { Button2, Page } from "../ui/Shared";
 import { Description, PageTitle, SectionTitle } from "../ui/Typography";
 // Keep these in sync (55px)
 const leftColumnGrid = "grid-cols-[55px_minmax(0,1fr)]";
-const leftMargin = "sm:mx-[55px]";
+const leftMargin = "sm:ml-[55px]";
 
 export default function Charts() {
   const isCustomer = useIsValidCustomer();
@@ -123,7 +123,7 @@ export default function Charts() {
               <Loading />
             </div>
           ) : isCustomer ? (
-            <div>
+            <div className="grid gap-1">
               {persistentCharts?.map((chart) => (
                 <ChartLink
                   key={chart.id}
@@ -159,7 +159,7 @@ export default function Charts() {
             </Trans>
           }
         >
-          <div>
+          <div className="grid gap-1">
             {temporaryCharts.map((chart) => (
               <ChartLink
                 key={chart}
@@ -194,7 +194,7 @@ const LargeFolder = memo(function LargeFolder({
   const [isOpen, setIsOpen] = useState(true);
   return (
     <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
-      <section className="grid gap-4">
+      <section className="grid gap-4 md:-ml-[55px]">
         <Collapsible.Trigger asChild>
           <button
             className={`grid grid-auto-cols items-start text-left w-full ${leftColumnGrid} focus:shadow-none`}
@@ -254,10 +254,8 @@ const ChartLink = memo(function ChartLink({
 }) {
   return (
     <div
-      className={`chart-link rounded grid grid-flow-col grid-cols-[minmax(0,1fr)_auto] items-center ${
-        isCurrent
-          ? "bg-blue-50 hover:bg-blue-100 dark:bg-blue-900 dark:hover:bg-blue-800"
-          : "hover:bg-neutral-200 dark:hover:bg-neutral-900"
+      className={`chart-link border rounded grid grid-flow-col grid-cols-[minmax(0,1fr)_auto] items-center ${
+        isCurrent ? "bg-blue-50 dark:bg-blue-900" : ""
       }`}
     >
       <Link to={href} className="py-3 px-4">
@@ -272,7 +270,7 @@ const ChartLink = memo(function ChartLink({
           {children}
         </div>
       </Link>
-      <div className="p-2 pr-2 flex items-center chart-link-buttons sm:opacity-0">
+      <div className="p-2 pr-2 flex items-center">
         <button
           className="opacity-25 sm:opacity-50 hover:opacity-100 rounded transition-opacity p-1 focus:shadow-none focus:bg-neutral-300/25"
           aria-label={`Copy flowchart: ${title}`}