CSS updates

more updates to style
parrottjrs · Aug 13, 2023 · 18a0664 · 18a0664
1 parent 5a11bab
commit 18a0664
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 85 deletions.
diff --git a/src/components/CreateButton.tsx b/src/components/CreateButton.tsx
@@ -6,7 +6,7 @@ export default function CreateButton() {
     <a
       href={`/think-write/edit/${uuid()}`}
       aria-label="Start a new project"
-      className="self-center bg-green-900 hover:bg-green-600 text-white text-sm md:text-lg py-1 px-2  md:py-2 md:px-4 border border-green-600 rounded"
+      className="self-center bg-green-900 hover:bg-green-600 text-white font-thin tracking-wider text-sm md:text-lg py-1 px-2  md:py-2 md:px-4 border border-green-600 rounded"
     >
       New Project
     </a>

diff --git a/src/components/DeleteButton.tsx b/src/components/DeleteButton.tsx
@@ -1,16 +1,10 @@
-import React, { useRef } from "react";
+import React from "react";
 import { Trash2 } from "lucide-react";
 
 export default function DeleteButton({ onClick }) {
-  const width = useRef(window.innerWidth);
-  const size = width.current < 768 ? 16 : 24;
   return (
-    <button
-      aria-label="Delete this project"
-      className="hover:text-red-400"
-      onClick={onClick}
-    >
-      <Trash2 size={size} strokeWidth={1} />
+    <button aria-label="Delete this project" onClick={onClick}>
+      <Trash2 className="p-0.5 md:p-0 hover:text-red-400" strokeWidth={1} />
     </button>
   );
 }
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
@@ -1,14 +1,11 @@
 import { Pencil } from "lucide-react";
-import React, { useRef } from "react";
+import React from "react";
 
 export default function EditButton({ onClick }) {
-  const width = useRef(window.innerWidth);
-  const size = width.current < 768 ? 16 : 24;
   return (
     <button id="edit" onClick={onClick}>
       <Pencil
-        className="text-slate-300 hover:text-yellow-400"
-        size={size}
+        className="p-0.5 md:p-0 text-slate-300 hover:text-yellow-400"
         strokeWidth={1}
       />
     </button>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,23 +9,23 @@ const LinkList = () => {
       <li>
         <a
           href="/think-write/"
-          className="block py-2 pl-3 pr-4 text-gray-900 font-thin 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"
+          className="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"
         >
           Home
         </a>
       </li>
       <li>
         <a
           href="/think-write/projects"
-          className="block py-2 pl-3 pr-4 text-gray-900 font-thin 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"
+          className="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"
         >
           Projects
         </a>
       </li>
       <li>
         <a
           href="/think-write/about"
-          className="block py-2 pl-3 pr-4 text-gray-900 font-thin 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"
+          className="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"
         >
           About
         </a>
@@ -39,16 +39,16 @@ const Dropdown = () => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button aria-label="Dropdown menu for navigation">
-          <Menu />
+          <Menu className="text-slate-300" strokeWidth={1} />
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content>
-          <div className="mt-5 mr-4 rounded-xl bg-sky-700/75">
+          <div className="mt-5 mr-4 rounded-xl bg-sky-700/95">
             <DropdownMenu.Item>
               <a
                 href="/think-write/"
-                className="block pt-2 pb-1 pl-3 pr-4 text-gray-900 font-thin 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"
+                className="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"
               >
                 Home
               </a>
@@ -57,7 +57,7 @@ const Dropdown = () => {
             <DropdownMenu.Item>
               <a
                 href="/think-write/projects"
-                className="block py-1 pl-3 pr-4 text-gray-900 font-thin 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"
+                className="block py-1 pl-3 pr-4 text-gray-900 font-thin tracking-wider 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"
               >
                 Projects
               </a>
@@ -66,7 +66,7 @@ const Dropdown = () => {
             <DropdownMenu.Item>
               <a
                 href={"/think-write/about"}
-                className="block pt-1 pb-2 pl-3 pr-4 text-gray-900 font-thin 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"
+                className="block pt-1 pb-2 pl-3 pr-4 text-gray-900 font-thin tracking-wider 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"
               >
                 About
               </a>
@@ -82,7 +82,7 @@ export default function Navbar() {
   const width = useRef(window.innerWidth);
 
   return (
-    <header className="z-10  self-center mb-5 md:mb-10 md:h-20 bg-neutral-900 sticky top-0 opacity-95 flex flex-wrap items-center justify-between p-4 border-gray-200 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
+    <header className="z-10  self-center mb-5 md:mb-10 md:h-20 bg-gray-800/95 sticky top-0 opacity-95 flex flex-wrap items-center justify-between p-4 border-gray-200 bg-gray-50 dark:bg-gray-800/95 dark:border-gray-700">
       <img src={words} alt="Think-Write" className="h-4 md: h-5 md:px-7" />
       <div className="flex items-center">
         <nav

diff --git a/src/components/NavigateToEdit.tsx b/src/components/NavigateToEdit.tsx
@@ -1,18 +1,15 @@
-import React, { useRef } from "react";
+import React from "react";
 
 import { Pencil } from "lucide-react";
 
 export default function NavigateToEdit({ id }) {
-  const width = useRef(window.innerWidth);
-  const size = width.current < 768 ? 16 : 24;
   return (
     <a
       href={`/think-write/edit/${id}`}
       aria-label="Open a new session or edit past sessions"
     >
       <Pencil
-        className="mr-5 hover:text-yellow-400"
-        size={size}
+        className="p-0.5 md:p-0 mr-5 hover:text-yellow-400"
         strokeWidth={1}
       />
     </a>

diff --git a/src/components/Pomodoro.tsx b/src/components/Pomodoro.tsx
@@ -12,7 +12,7 @@ const Modal = ({ show, onClick }) => {
     return null;
   }
   return (
-    <div className="absolute -right-7 w-20 py-2 px-1 text-slate-300 fon-thin rounded-xl bg-sky-700/75">
+    <div className="absolute -right-7 w-20 py-2 px-1 text-slate-300 fon-thin tracking-wider rounded-xl bg-sky-700/75">
       <button
         className="mx-4 my-1"
         aria-label="start a pomodoro timer for 4 reps. Each rep is 20 minutes with a 5 minute break."
@@ -110,7 +110,7 @@ export default function Pomodoro() {
   };
 
   return (
-    <div className="mr-3 text-slate-300 font-thin">
+    <div className="mr-3 text-slate-300 font-thin tracking-wider">
       {state.showModal && (
         <div
           className="absolute w-screen h-screen inset-0 opacity-0"
@@ -123,17 +123,14 @@ export default function Pomodoro() {
             id="timerMenu"
             onClick={() => dispatch({ type: ACTIONS.SHOW_MODAL })}
           >
-            <Timer className="pt-1 hover:text-green-300" strokeWidth={1} />
+            <Timer className="hover:text-green-300" strokeWidth={1} />
           </button>
           <Modal show={state.showModal} onClick={startTimer} />
         </div>
       ) : (
         <div className="flex flex-row items-center">
           <button id="stopTimer" onClick={() => stopTimer()}>
-            <TimerOff
-              className="pt-1 mb-1 mr-2 hover:text-red-300"
-              strokeWidth={1}
-            />
+            <TimerOff className="mr-2 hover:text-red-300" strokeWidth={1} />
           </button>
           <div>
             {prependZero(state.minutes)}:{prependZero(state.seconds)}

diff --git a/src/components/ProjectList.tsx b/src/components/ProjectList.tsx
@@ -21,13 +21,13 @@ export default function ProjectList() {
     const { id, title, modified } = project;
     return (
       <React.Fragment key={id}>
-        <div className="flex items-center text-xs md:text-lg text-white font-thin p-2 md:p-4 bg-slate-700 border-gray-500 border-b">
+        <div className="flex items-center text-xs md:text-lg text-white font-thin tracking-wider p-2 md:p-4  border-gray-500 border-b">
           {title ? title : "Untitled Project"}
         </div>
-        <div className="flex items-center text-xs md:text-lg text-white font-thin p-2 md:p-4 bg-slate-700  border-b border-gray-500 ">
+        <div className="flex items-center text-xs md:text-lg text-white font-thin tracking-wider p-2 md:p-4 border-b border-gray-500 ">
           {modified}
         </div>
-        <div className="flex items-center p-2 md:py-4 md:pl-2 border-b text-slate-300 border-gray-500 bg-slate-700">
+        <div className="flex items-center p-2 md:py-4 md:pl-2 border-b text-slate-300 border-gray-500">
           <NavigateToEdit id={id} />
           <DeleteButton onClick={() => deleteProject(id)} />
         </div>

diff --git a/src/components/ProjectsNavButton.tsx b/src/components/ProjectsNavButton.tsx
@@ -5,7 +5,7 @@ export default function ProjectsNavButton() {
     <a
       href="/think-write/projects"
       aria-label="Navigate to projects"
-      className="self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded m-10"
+      className="self-center bg-blue-500 hover:bg-blue-700 text-white font-thin tracking-wider py-2 px-4 border border-blue-700 rounded m-10"
     >
       To Projects
     </a>

diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
@@ -4,7 +4,7 @@ export default function SaveButton({ id }) {
   return (
     <a
       href={`/think-write/edit/${id}/save`}
-      className="self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
+      className="self-center bg-blue-500 hover:bg-blue-700 text-white font-thin tracking-wider py-2 px-4 border border-blue-700 rounded"
     >
       Save
     </a>

diff --git a/src/components/SessionDialog.tsx b/src/components/SessionDialog.tsx
@@ -25,33 +25,40 @@ export default function SessionDialog({ title, passData }) {
           <Dialog.Title className="m-0 text-[17px] text-slate-300 font-medium">
             Project/Session Details
           </Dialog.Title>
-          <Dialog.Description className="mt-[10px] mb-5 text-[15px] text-slate-300 font-thin leading-normal">
+          <Dialog.Description className="mt-[10px] mb-5 text-[15px] text-white font-thin tracking-wider leading-normal">
             Name your project and select a goal for your current writing
             session, or select "no goal". Click submit when you're finished.
+            Press ESC or click away to exit.
           </Dialog.Description>
           <form
             onSubmit={handleSubmit((data) => {
               passData(data);
               setOpen(false);
             })}
           >
-            <label htmlFor="titleInput" className="text-slate-300 font-thin">
+            <label
+              htmlFor="titleInput"
+              className="text-slate-300 font-thin tracking-wider"
+            >
               {"Project Title: "}
             </label>
             <input
-              className="ml-2 my-1 p-1 bg-zinc-900 text-white font-light rounded-md"
+              className="ml-2 my-1 p-1 bg-zinc-900 text-white font-thin tracking-wider rounded-md"
               id="titleInput"
               type="text"
               {...register("currentTitle")}
               defaultValue={title}
-              required={true}
+              required={false}
             />
             <div>
-              <label htmlFor="goal" className="text-slate-300 font-thin">
+              <label
+                htmlFor="goal"
+                className="text-slate-300 font-thin tracking-wider"
+              >
                 {"Today's Goal: "}
               </label>
               <input
-                className="w-12 m-2 p-1 bg-zinc-900 text-white font-light rounded-md"
+                className="w-12 m-2 p-1 bg-zinc-900 text-white font-thin tracking-wider rounded-md"
                 id="goal"
                 type="number"
                 {...register("goalNumber")}
@@ -60,7 +67,7 @@ export default function SessionDialog({ title, passData }) {
                 id="goalType"
                 {...register("goalType")}
                 required={true}
-                className="m-1 px-1 py-1.5 bg-zinc-900 text-white font-light rounded-md"
+                className="m-1 px-1 py-1.5 bg-zinc-900 text-white font-thin tracking-wider rounded-md"
               >
                 <option value="words">words</option>
                 <option value="minutes">minutes</option>
@@ -70,7 +77,7 @@ export default function SessionDialog({ title, passData }) {
             </div>
             <input
               type="submit"
-              className="mt-2 self-right text-slate-300 font-thin hover:text-cyan-300"
+              className="mt-2 self-right text-slate-300 font-thin tracking-wider hover:text-cyan-300"
             />
           </form>
         </Dialog.Content>

diff --git a/src/components/SessionList.tsx b/src/components/SessionList.tsx
@@ -33,7 +33,7 @@ const SessionListItem = ({ session, id, hot, sessions, title }) => {
   return (
     <section className="break-words mt-5 md:mt-8">
       <div className="flex items-center">
-        <p className="text-cyan-300 font-thin text-sm md:text-lg mr-4">
+        <p className="text-cyan-300 font-thin tracking-wider text-md md:text-xl mr-4">
           Session {sessionId}
         </p>
         {lockCheck(unlockDate) ? (
@@ -43,15 +43,15 @@ const SessionListItem = ({ session, id, hot, sessions, title }) => {
             }}
           />
         ) : (
-          <p className="text-slate-400 text-xs md:text-md font-thin">
+          <p className="text-slate-300 text-xs md:text-md font-thin tracking-wider">
             Locked until {unlockDate}
           </p>
         )}
       </div>
-      <div className="my-1 border border-slate-600/25" />
+      <div className="my-2 border border-slate-600/25" />
       {change ? (
         <div
-          className="my-1 text-slate-300 text-sm md:text-lg font-thin "
+          className="my-1 text-slate-300 text-sm md:text-lg font-thin tracking-wider"
           dangerouslySetInnerHTML={{ __html: cold }}
         />
       ) : (
@@ -61,7 +61,6 @@ const SessionListItem = ({ session, id, hot, sessions, title }) => {
           onChange={handleChange}
         />
       )}
-      <div className="my-1 border border-slate-600" />
     </section>
   );
 };
@@ -80,21 +79,15 @@ export default function SessionList({ id, sessions, hot, title }) {
       onOpenChange={setOpen}
     >
       <div className="border border-slate-400 rounded my-[10px] p-[10px] flex justify-between">
-        <span className="text-xs md:text-lg text-slate-300 font-thin">
+        <p className="text-s md:text-lg text-slate-300 font-thin tracking-wider">
           Past Sessions
-        </span>
+        </p>
         <Collapsible.Trigger asChild>
           <button id={open ? "close" : "open"}>
             {open ? (
-              <XCircle
-                className="text-slate-300 hover:text-slate-600"
-                size={size}
-              />
+              <XCircle className="p-0.5 text-slate-300  hover:text-slate-600" />
             ) : (
-              <ArrowDownFromLine
-                className="text-slate-300 hover:text-slate-600"
-                size={size}
-              />
+              <ArrowDownFromLine className="p-0.5 text-slate-300 hover:text-slate-600" />
             )}
           </button>
         </Collapsible.Trigger>