Small improvements

README.md

@@ -56,7 +56,7 @@
   - The website is built before running in production
   - Performances are great, and possibility to deploy the app on a CDN
   - On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted
-  - UI localizations are downloaded separetely into the `public/local-data` to avoid fetching the same static props for every page. 
+  - UI localizations are downloaded separetely into the `public/local-data` to avoid fetching the same static props for every page.
 - SEO
   - Good defaults for the metadata and OpenGraph properties
   - Each page can provide a custom thumbnail, title, description to be used
@@ -66,6 +66,7 @@
   - Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it
   - Check for completeness, conformity, and integrity
 - Code quality and style
+
   - React Strict Mode
   - [Eslint](https://www.npmjs.com/package/eslint) with [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import), [typescript-eslint](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)
   - [Prettier](https://www.npmjs.com/package/prettier) with [prettier-plugin-tailwindcss](https://www.npmjs.com/package/prettier-plugin-tailwindcss)

src/components/Containers/UpPressable.tsx

@@ -23,8 +23,8 @@ export const UpPressable = ({
       href={href}
       onFocusChanged={setFocused}
       className={cJoin(
-        `overflow-hidden rounded-md drop-shadow-lg transition-all duration-300 shadow-shade`,
-        cIf(!noBackground, "bg-highlight"),
+        `drop-shadow-lg transition-all duration-300 shadow-shade`,
+        cIf(!noBackground, "overflow-hidden rounded-md bg-highlight"),
         cIf(
           disabled,
           "cursor-not-allowed opacity-50 grayscale",

src/components/PanelComponents/NavOption.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { MouseEventHandler, useCallback, useMemo, useState } from "react";
+import { MouseEventHandler, useCallback, useMemo } from "react";
 import { Ico, Icon } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import { cIf, cJoin } from "helpers/className";
@@ -43,7 +43,6 @@ export const NavOption = ({
     () => active || router.asPath.startsWith(url),
     [active, router.asPath, url]
   );
-  const [isFocused, setFocused] = useState(false);
 
   return (
     <ToolTip
@@ -65,11 +64,8 @@ export const NavOption = ({
         border={border}
         onClick={onClick}
         active={isActive}
-        disabled={disabled}
-        onFocusChanged={setFocused}>
-        {icon && (
-          <Ico icon={icon} className="mt-[-.1em] !text-2xl" isFilled={isActive || isFocused} />
-        )}
+        disabled={disabled}>
+        {icon && <Ico icon={icon} className="mt-[-.1em] !text-2xl" isFilled={isActive} />}
         {!reduced && (
           <div>
             <h3 className="text-2xl">{title}</h3>

src/pages/dev/showcase/design-system.tsx

@@ -936,13 +936,8 @@ const LightThemeSection = ({ className, children }: ThemedSectionProps) => (
 );
 
 const WhiteSection = ({ className, children }: ThemedSectionProps) => (
-  <div
-    className={cJoin(
-      `mb-12 rounded-xl bg-[white] py-10 px-14 text-black drop-shadow-lg shadow-shade
-      set-theme-light`,
-      className
-    )}>
-    {children}
+  <div className="mb-12 rounded-xl bg-[white] py-10 px-14 drop-shadow-lg shadow-shade">
+    <div className={cJoin("text-black set-theme-light", className)}>{children}</div>
   </div>
 );