Hardware page improvements

src/components/Modal.tsx

@@ -19,10 +19,10 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
         <div className="min-h-screen px-4 text-center">
           <Transition.Child
             as={Fragment}
-            enter="ease-out duration-300"
+            enter="ease-out duration-100"
             enterFrom="opacity-0"
             enterTo="opacity-100"
-            leave="ease-in duration-200"
+            leave="ease-in duration-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
@@ -38,7 +38,7 @@ export const Modal = ({ open, onClose, children }: ModalProps): JSX.Element => {
           </span>
           <Transition.Child
             as={Fragment}
-            enter="ease-out duration-300"
+            enter="ease-out duration-100"
             enterFrom="opacity-0 scale-95"
             enterTo="opacity-100 scale-100"
             leave="ease-in duration-200"

src/components/hardware/HardwareCard.tsx

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 
-import { FiExternalLink } from 'react-icons/fi';
+import { IDevice, Stability } from '@site/src/data/device';
-import { IoEllipsisHorizontalSharp } from 'react-icons/io5';
-
-import { IDevice } from '@site/src/data/device.js';
 
 import { HardwareModal } from './HardwareModal';
 
@@ -22,7 +19,7 @@ export const HardwareCard = ({ device }: HardwareCard): JSX.Element => {
           setOpen(true);
         }}
       >
-        <div className="aspect-w-10 aspect-h-7 block w-full overflow-hidden rounded-lg bg-gray-100">
+        <div className="overflow-hidden rounded-lg">
           <div
             className={`flex aspect-[4/3] overflow-hidden bg-gradient-to-r ${device.misc.Gradient}`}
           >
@@ -33,32 +30,29 @@ export const HardwareCard = ({ device }: HardwareCard): JSX.Element => {
             />
           </div>
           <button type="button" className="absolute inset-0 focus:outline-none">
-            <span className="sr-only">View details for {name}</span>
+            <span className="sr-only">View details for {device.name}</span>
           </button>
         </div>
         <div className="flex">
           <div>
-            <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
+            <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-primaryInv">
               {device.name}
             </p>
-            <p className="pointer-events-none block text-sm font-medium text-gray-500">
+            <p className="pointer-events-none flex gap-1 text-sm font-medium text-mute">
-              {device.specifications.LoRa}
+              <div
+                className={`my-auto h-3 w-3 rounded-full ${
+                  device.misc.Stability === Stability.Broken
+                    ? 'bg-red-500'
+                    : device.misc.Stability === Stability.Unstable
+                    ? 'bg-orange-500'
+                    : device.misc.Stability === Stability.Semi
+                    ? 'bg-cyan-500'
+                    : 'bg-green-500'
+                }`}
+              />
+              <div className="my-auto">{Stability[device.misc.Stability]}</div>
             </p>
           </div>
-          <div className="z-10 ml-auto flex gap-2 p-2 opacity-0 transition-opacity duration-100 ease-in-out group-hover:opacity-100">
-            <a
-              href="#"
-              className="flex rounded-lg border-2 py-1 px-2 hover:border-accent"
-            >
-              <FiExternalLink className="m-auto" />
-            </a>
-            <a
-              href="#"
-              className="flex rounded-lg border-2 py-1 px-2 hover:border-accent"
-            >
-              <IoEllipsisHorizontalSharp className="m-auto" />
-            </a>
-          </div>
         </div>
       </li>
       <HardwareModal

src/components/hardware/HardwareModal.tsx

@@ -63,7 +63,7 @@ export const HardwareModal = ({
           </div>
           <div className="md: w-full">
             <div className="flex shadow-md md:pb-2">
-              <VariantSelectButton options={[]} />
+              <VariantSelectButton options={device.variants} />
             </div>
             <div className="bg-base p-2 md:p-4">
               <Tab.Group as="div" className="rounded-2xl bg-primary p-2">

src/components/hardware/VariantSelectButton.tsx

@@ -4,21 +4,16 @@ import { FiCheck } from 'react-icons/fi';
 import { HiSelector } from 'react-icons/hi';
 
 import { Listbox, Transition } from '@headlessui/react';
-
+import type { Variant } from '@site/src/data/device.js';
-const people = [
-  { id: 1, name: 'T-Beam 1.1' },
-  { id: 2, name: 'T-Beam 1.0' },
-  { id: 3, name: 'T-Beam 0.7' },
-];
 
 export interface VariantSelectButtonProps {
-  options: any[];
+  options: Variant[];
 }
 
 export const VariantSelectButton = ({
   options,
 }: VariantSelectButtonProps): JSX.Element => {
-  const [selected, setSelected] = useState(people[0]);
+  const [selected, setSelected] = useState(options[options.length - 1]);
 
   return (
     <Listbox value={selected} onChange={setSelected}>
@@ -43,15 +38,15 @@ export const VariantSelectButton = ({
               leaveTo="opacity-0"
             >
               <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-primary py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {people.map((person) => (
+                {options.map((variant, index) => (
                   <Listbox.Option
-                    key={person.id}
+                    key={index}
                     className={({ active }) =>
                       `relative cursor-default select-none py-2 pl-3 pr-9 ${
                         active ? 'bg-indigo-600' : ''
                       }`
                     }
-                    value={person}
+                    value={variant.name}
                   >
                     {({ selected, active }) => (
                       <>
@@ -60,7 +55,7 @@ export const VariantSelectButton = ({
                             selected ? 'font-semibold' : 'font-normal'
                           }`}
                         >
-                          {person.name}
+                          {variant.name}
                         </span>
 
                         {selected ? (

src/css/custom.css

@@ -18,6 +18,10 @@
   --primary: #ffffff;
   --secondary: #e5e7eb;
   --tertiary: #d1d5db;
+  --mute: #6b7280;
+  --primaryInv: #242526;
+  --secondaryInv: #18191a;
+  --tertiaryInv: #4C4E50;
 }
 
 [data-theme="dark"] {
@@ -25,6 +29,10 @@
   --primary: #242526;
   --secondary: #18191a;
   --tertiary: #4C4E50;
+  --mute: #9ca3af;
+  --primaryInv: #ffffff;
+  --secondaryInv: #e5e7eb;
+  --tertiaryInv: #d1d5db;
 }
 
 .docusaurus-highlight-code-line {

src/data/device.ts

@@ -26,6 +26,8 @@ export type GNSSModule = 'NEO-6M' | 'NEO-8M';
 
 export type LORAModule = 'SX1276' | 'SX1262';
 
+export type Variant = DeepPartial<Omit<IDevice, 'variants'>> & { name: string };
+
 export enum Stability {
   Stable,
   Semi,
@@ -68,5 +70,5 @@ export interface IDevice {
     PSRAM: number;
     RAM?: number;
   };
-  variants: (DeepPartial<Omit<IDevice, 'variants'>> & { name: string })[];
+  variants: Variant[];
 }

src/data/devices/heltec.ts

@@ -3,7 +3,7 @@ import { IDevice, Stability, UseCase } from '../device';
 export const heltec: IDevice = {
   name: 'Heltec',
   misc: {
-    Stability: Stability.Stable,
+    Stability: Stability.Unstable,
     SuggestedUse: [UseCase.Portable],
     ImagePath: '/img/hardware/heltec-v2.png',
     Gradient: 'from-pink-300 via-purple-300 to-indigo-400',

src/data/devices/techo.ts

@@ -3,7 +3,7 @@ import { IDevice, Stability, UseCase } from '../device';
 export const techo: IDevice = {
   name: 'T-Echo',
   misc: {
-    Stability: Stability.Stable,
+    Stability: Stability.Semi,
     SuggestedUse: [UseCase.Portable],
     ImagePath: '/img/hardware/t-echo-lilygo.jpg',
     Gradient: 'from-gray-700 via-gray-900 to-black',

src/pages/hardware/index.tsx

@@ -20,16 +20,11 @@ const Hardware = (): JSX.Element => {
     rak19003,
     rak19003,
     rak19003,
-    rak19003,
-    rak19003,
-    rak19003,
-    rak19003,
-    rak19003,
   ];
 
   return (
     <PageLayout title="Hardware" description="Supported hardware">
-      <div className="border-b border-gray-200 p-4">
+      <div className="border-b border-tertiary p-4">
         <div className="sm:flex sm:items-baseline">
           <h3 className="text-lg font-medium leading-6 text-gray-900">
             Issues
@@ -62,19 +57,19 @@ const Hardware = (): JSX.Element => {
           {hardware.map((device, index) => (
             <HardwareCard key={index} device={device} />
           ))}
-          <li className="relative">
+          <li className="group relative">
             <a
               href="https://github.com/meshtastic/Meshtastic-device/issues/new?assignees=&labels=enhancement%2Ctriage&template=New+Board.yml&title=%5BBoard%5D%3A+"
-              className="flex aspect-[4/3] rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400"
+              className="flex aspect-[4/3] rounded-lg border-2 border-dashed border-mute group-hover:border-tertiaryInv"
               target="_blank"
               rel="noreferrer"
             >
-              <FiPlus className="m-auto h-12 w-12 text-gray-400" />
+              <FiPlus className="m-auto h-12 w-12 text-mute group-hover:text-tertiaryInv" />
             </a>
-            <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">
+            <p className="pointer-events-none mt-2 block truncate text-sm font-medium text-primaryInv">
               New Board
             </p>
-            <p className="pointer-events-none block text-sm font-medium text-gray-500">
+            <p className="pointer-events-none block text-sm font-medium text-mute">
               Want to support a board?
             </p>
           </li>

tailwind.config.cjs

@@ -9,6 +9,10 @@ module.exports = {
         primary: 'var(--primary)',
         secondary: 'var(--secondary)',
         tertiary: 'var(--tertiary)',
+        mute: 'var(--mute)',
+        primaryInv: 'var(--primaryInv)',
+        secondaryInv: 'var(--secondaryInv)',
+        tertiaryInv: 'var(--tertiaryInv)',
       },
     },
   },