Merge pull request #58 from brown-ccv/refactor-download-modal-button

Update button styling
brown-ccv · Jun 28, 2024 · b2e272d · b2e272d
2 parents 81aff0e + 2673d06
commit b2e272d
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check": "astro check"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.3",

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react"
+
+interface ButtonProps
+  extends React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> {
+  icon?: ReactNode
+}
+
+export default function Button({ icon, children, ...delegated }: ButtonProps) {
+  return (
+    <button className="bg-primary-500" {...delegated}>
+      {icon}
+      <span>{children}</span>
+    </button>
+  )
+}
diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
@@ -25,7 +25,14 @@ export const CustomInput = React.forwardRef<
   <Form.Field name={name} className="flex flex-col gap-2">
     <Form.Label>{label}</Form.Label>
     <Form.Control asChild>
-      <input name={name} onChange={onChange} onBlur={onBlur} placeholder={placeholder} required />
+      <input
+        name={name}
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        ref={ref}
+        required
+      />
     </Form.Control>
     <Form.Message className="text-red-600 text-lg" match="valueMissing">
       Please enter your {label}

diff --git a/src/components/DataForm.tsx b/src/components/DataForm.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { set } from "react-hook-form"
 import DataTable from "../components/DataTable"
 import DownloadModal from "../components/DownloadModal"
 
@@ -41,9 +40,9 @@ const DataForm: React.FC<DataFormProps> = ({ allFiles }) => {
   }
 
   return (
-    <div className="flex flex-col">
-      <DataTable allFiles={files} updateFileList={updateFileList} />
+    <div className="flex flex-col gap-4">
       <DownloadModal filesToDownload={files.map((file) => file.file)} />
+      <DataTable allFiles={files} updateFileList={updateFileList} />
     </div>
   )
 }

diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
@@ -5,6 +5,7 @@ import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
 import { useForm, Controller, type SubmitHandler } from "react-hook-form"
 import { CustomInput } from "./CustomInput.tsx"
 import { CustomTextarea } from "./CustomTextarea.tsx"
+import Button from "./Button.tsx"
 
 export interface Inputs {
   name: string
@@ -33,22 +34,21 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="sm:inline-flex w-fit items-center rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
+        <Button icon={<DownloadIcon />}>
           <span>Download data</span>
-          <DownloadIcon />
-        </button>
+        </Button>
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay
-          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          className="fixed top-0 left-0 right-0 bottom-0 bg-neutral-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
           onClick={() => setIsOpen(false)}
         />
         <Dialog.Overlay className="grid place-items-center fixed top-0 left-0 right-0 bottom-0 z-10 w-screen overflow-y-auto p-12">
           <Dialog.Content className="flex flex-col gap-8 rounded-lg shadow-xl bg-neutral-50 p-9">
             <div>
               <div className="flex justify-end">
-                <Dialog.Close className="text-gray-400 bg-transparent rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
-                  <Cross2Icon />
+                <Dialog.Close className="text-neutral-900 p-0 inline-flex justify-center items-center hover:bg-neutral-50 hover:shadow-none">
+                  <Cross2Icon width={28} height={28} />
                   <span className="sr-only">Close</span>
                 </Dialog.Close>
               </div>
@@ -104,30 +104,29 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
                 )}
               />
 
-              <Form.Submit
-                className={`flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 disabled:bg-gray-400`}
-              >
-                <PlusIcon />
-                <span className="pt-1">Validate Email</span>
+              <Form.Submit asChild>
+                <Button icon={<PlusIcon />}>
+                  <span>Validate Email</span>
+                </Button>
               </Form.Submit>
-              <Form.Field name="download">
+              {/* <Form.Field name="download">
                 <Form.Control asChild>
-                  <button
-                    disabled
+                  <Button
                     className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 disabled:bg-gray-400"
-                  ></button>
+                    disabled
+                  ></Button>
                 </Form.Control>
-              </Form.Field>
+              </Form.Field> */}
             </Form.Root>
-            {filesToDownload.map((file) => {
+            {/* {filesToDownload.map((file) => {
               const name = file.replace(/.+?(?=[^_]+$)/, "").replace(/\.[^.]*$/, "")
 
               return (
                 <a className="p-2" key={file} href={file} download={file}>
                   {name.toUpperCase()}
                 </a>
               )
-            })}
+            })} */}
           </Dialog.Content>
         </Dialog.Overlay>
       </Dialog.Portal>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,7 +4,6 @@ import { SITE_TITLE, LINKS } from "../consts"
 
 const { isHidden = true } = Astro.props
 const pathname = Astro.url.pathname
-const path = pathname.match(/^\/$/) ? pathname : pathname.slice(0, -1)
 ---
 <script>
   class NavbarHamburger extends HTMLElement {
@@ -30,20 +29,19 @@ const path = pathname.match(/^\/$/) ? pathname : pathname.slice(0, -1)
 </script>
 
 <header>
-  <h2><a class={pathname !== "/" ? `hover:text-gray-600 decoration-0` : "hidden"} href="/">{SITE_TITLE}</a></h2>
+  <h2><a class={`no-underline ${pathname !== "/" ? `hover:text-gray-600` : "hidden"}`} href="/">{SITE_TITLE}</a></h2>
   <nav>
     <div class="hidden lg:flex lg:gap-8">
       {
         LINKS.map((data) =>
           <HeaderLink href=`/${data}`
-                      class="text-base text-neutral-500 hover:text-gray-600 active:text-neutral-900 "
+                      class="text-base text-neutral-500 active:text-neutral-900"
           >{data.toUpperCase()}</HeaderLink>)
       }
     </div>
     <!--hamburger-->
     <navbar-hamburger class="lg:hidden max-w-screen-xl flex flex-wrap items-center justify-between p-2">
-      <button type="button"
-              class="inline-flex items-center justify-center p-2 w-10 h-10 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200">
+      <button class="items-center justify-center p-2 w-10 h-10 text-sm text-neutral-900 rounded-lg focus:outline-none hover:bg-opacity-0 hover:shadow-none">
         <span class="sr-only">Open main menu</span>
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

diff --git a/src/components/svg/FootPrint.tsx b/src/components/svg/FootPrint.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 const FootPrint = () => {
   return (
     <svg

diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import HoverCardItem from "../HoverCard.tsx"
 
 const MiniMapSvg = () => {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ interface Props {
   lede?: string
 }
 
-const { title, description, lede } = Astro.props
+const { title, description } = Astro.props
 ---
 
 <html lang="en">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -2,6 +2,8 @@
 
 @tailwind base;
 @tailwind components;
+@tailwind utilities;
+
 @layer base {
     :root {
         @apply font-body;
@@ -120,12 +122,20 @@
         @apply p-16;
     }
 
+    button {
+        @apply flex gap-2 items-center py-2 px-3 w-max rounded-full text-neutral-50 transition-all;
+    }
+
+    button:hover {
+        @apply bg-primary-700 shadow-md;
+    }
+
     button[role="checkbox"] {
         @apply bg-neutral-50;
-        @apply flex;
-        @apply items-center;
         @apply justify-center;
         @apply shadow-md;
+        @apply rounded-md;
+        @apply text-neutral-900;
     }
 
     th {