CSS

Fixed some more style issues
parrottjrs · Aug 17, 2023 · afa8140 · afa8140
1 parent 5c401dc
commit afa8140
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ import { STYLES } from "../utils/constants";
 
 const LinkList = () => {
   return (
-    <ul className="flex flex-col font-medium mt-4 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
+    <ul className="hidden md:flex flex-col font-medium mt-4 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700 ">
       <li>
         <a href="#/" className={STYLES.NAV_ANCHOR}>
           Home
@@ -46,7 +46,10 @@ const Dropdown = () => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button aria-label="Dropdown menu for navigation">
-          <Menu className="text-slate-300" strokeWidth={1} />
+          <Menu
+            className="inline-block md:hidden text-slate-300"
+            strokeWidth={1}
+          />
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
@@ -57,19 +60,19 @@ const Dropdown = () => {
                 Home
               </a>
             </DropdownMenu.Item>
-            <DropdownMenu.Separator className="h-px bg-gray-900 my-1 mx-2 opacity-50" />
+            <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
             <DropdownMenu.Item>
               <a href="#/projects" className={STYLES.DROPDOWN_NAV_ANCHOR}>
                 Projects
               </a>
             </DropdownMenu.Item>
-            <DropdownMenu.Separator className="h-px bg-gray-900 my-1 mx-2 opacity-50" />
+            <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
             <DropdownMenu.Item>
               <a href="#/about" className={STYLES.DROPDOWN_NAV_ANCHOR}>
                 About
               </a>
             </DropdownMenu.Item>
-            <DropdownMenu.Separator className="h-px bg-gray-900 my-1 mx-2 opacity-50" />
+            <DropdownMenu.Separator className={STYLES.DROPDOWN_NAV_SPACER} />
             <div className="flex flex-row justify-left pt-1 pb-2 pl-3">
               <DropdownMenu.Item>
                 <a href="https://ca.linkedin.com/in/parrottjrs">
@@ -114,8 +117,8 @@ export default function Navbar() {
           className="z-20 w-full contents md:block md:w-auto px-7"
           id="navbar-solid-bg"
         >
-          {width.current < 767 && <Dropdown />}
-          {width.current > 767 && <LinkList />}
+          <Dropdown />
+          <LinkList />
         </nav>
       </div>
     </header>

diff --git a/src/components/Pomodoro.tsx b/src/components/Pomodoro.tsx
@@ -16,7 +16,7 @@ const Modal = ({ show, onClick }) => {
     return null;
   }
   return (
-    <div className=" absolute -right-7 w-20 py-2 px-1 text-slate-300 font-thin tracking-wider rounded-xl bg-sky-700/75">
+    <div className=" absolute -right-7 z-20 w-20 py-2 px-1 text-slate-300 font-thin tracking-wider rounded-xl bg-sky-700/75">
       <button
         className="mx-4 my-1 hover:text-cyan-300"
         aria-label="Pomodoro timer. 4 reps of 20 minute work periods and 5 minute break periods."

diff --git a/src/components/SessionDialog.tsx b/src/components/SessionDialog.tsx
@@ -26,7 +26,7 @@ export default function SessionDialog({ title, onSubmit }) {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0" />
-        <Dialog.Content className="z-20 data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[600px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-slate-800 p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
+        <Dialog.Content className={STYLES.DIALOG_CONTENT}>
           <Dialog.Title className="m-0 text-[17px] text-slate-300 font-medium tracking-wider">
             Project/Session Details
           </Dialog.Title>
@@ -84,7 +84,7 @@ export default function SessionDialog({ title, onSubmit }) {
                 id="goalType"
                 {...register("goalType")}
                 required={true}
-                className="ml-2 px-1 py-1.5 bg-zinc-900 text-white font-thin tracking-wider rounded-md"
+                className="ml-2 px-1 py-1.5 bg-zinc-900 text-s md:text-lg text-white font-thin tracking-wider rounded-md"
               >
                 <option value="words">words</option>
                 <option value="minutes">minutes</option>

diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
@@ -39,7 +39,7 @@ export default function NotFound() {
           What you got your eye on there? Oh no. No no no. Wait just a gut dag
           minute. Don't advise going there one bit, nope. Whispers are there's a
           strange old fellow livin' in them trees who{" "}
-          <a className={STYLES.IN_WRITING_ANCHOR} href="#/">
+          <a className={STYLES.IN_WRITING_ANCHOR} href="#/about">
             won't stop talking about 'isself
           </a>
           . Some reckon e's a warlock. Myself I'm inclined to thinkin' those

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -9,7 +9,7 @@ export const STYLES = {
     "py-4 px-2 md:p-4 bg-gray-800/25 text-white font-thin tracking-wider",
   PROJECT_GRID_DIV:
     "flex items-center text-xs md:text-lg text-white font-thin tracking-wider p-2 md:p-4  border-gray-500 border-b",
-
+  DROPDOWN_NAV_SPACER: "h-px bg-gray-900 my-1 mx-2 opacity-50",
   //TEXT
   STANDARD_TEXT: "text-s md:text-lg text-slate-300 font-thin tracking-wider",
   RED_TEXT: "text-red-300",
@@ -26,7 +26,7 @@ export const STYLES = {
   NAV_ANCHOR:
     "block py-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",
   DROPDOWN_NAV_ANCHOR:
-    "block pt-2 pb-1 pl-3 pr-4 text-gray-900 font-thin tracking-wider md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",
+    "block pt-2 pb-1 pl-3 pr-4 text-white font-thin tracking-wider  md:p-0  hover:text-blue-500 hover:bg-gray-700  md:dark:hover:bg-transparent",
   DROPDOWN_NAV_SOCIALS: "p-0.5 mr-1 text-white",
 
   //IMGS