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}`}