Merge pull request #34 from chingu-x/updateStyles

Update styles
chingu-x · Sep 26, 2023 · 78bb84b · 78bb84b
2 parents 1a38d56 + 26a41e8
commit 78bb84b
Show file tree

Hide file tree

Showing 17 changed files with 59 additions and 60 deletions.
diff --git a/src/app/directory/components/TeamRow.tsx b/src/app/directory/components/TeamRow.tsx
@@ -1,6 +1,6 @@
 import { PencilSquareIcon } from "@heroicons/react/24/solid";
 import { TeamMember } from ".";
-import { Button } from "@/components";
+
 
 interface TeamRowProps {
   teamMember: TeamMember;
@@ -10,18 +10,17 @@ interface TeamRowProps {
 function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
   return (
     <tr>
-      <td className="text-black">{teamMember.name}</td>
+      <td>{teamMember.name}</td>
       <td>{teamMember.discordId}</td>
       <td>
-        <div className="flex items-center justify-between h-[35px] bg-white rounded-md pl-4">
+        <div className="flex items-center justify-between h-[35px] bg-base-100 hover:bg-secondary hover:cursor-pointer rounded-md pl-4">
           {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour}
           {teamMember.id === currentUserId && (
-            <Button
-              title={"edit"}
-              customClassName="pl-2 pr-1 h-full rounded-l-none rounded-r-md p-0 min-h-0 text-sm font-semibold text-black bg-white border-transparent hover:bg-white hover:border-transparent"
+            <div
+              className="flex items-center justify-between pr-4 text-sm font-semibold "
             >
-              <PencilSquareIcon className="w-4 h-4 text-black" />
-            </Button>
+              <PencilSquareIcon className="w-4 h-4 text-base-300 bg-transparent" />
+            </div>
           )}
         </div>
       </td>

diff --git a/src/app/directory/components/TeamTable.tsx b/src/app/directory/components/TeamTable.tsx
@@ -8,10 +8,10 @@ function TeamTable() {
   return (
     <div className="w-full">
       <table
-        className={`table px-6 pb-10 border-separate border-none bg-primary-content pt-7 ${styles["table"]}`}
+        className={`table px-6 pb-10 border-separate border-none bg-secondary-content pt-7 ${styles["table"]}`}
       >
         {/* head */}
-        <thead className="mb-10 text-xl font-semibold text-black">
+        <thead className="mb-10 text-xl font-semibold text-base-300">
           <tr>
             <th>Name</th>
             <th>Discord ID</th>
@@ -22,7 +22,7 @@ function TeamTable() {
             <th>Position</th>
           </tr>
         </thead>
-        <tbody className="text-base font-medium text-neutral">
+        <tbody className="text-base font-medium text-base-300">
           {/* rows */}
           {teamMembers.map((teamMember) => (
             <TeamRow

diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx
@@ -10,19 +10,19 @@ interface ContributionCardProps {
 
 function ContributionCard({ own_idea, contributed_by }: ContributionCardProps) {
   return (
-    <div className="card w-1/3 h-fit bg-accent-focus rounded-lg">
+    <div className="card w-1/3 h-fit bg-secondary-content rounded-lg">
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h1 className="text-base font-medium text-neutral-focus">
+        <h1 className="text-base font-medium text-base-300">
           Contributed By
         </h1>
         <Avatar width={64} height={64} image={contributed_by.avatar} />
-        <h2 className="text-xl font-semibold text-neutral-focus">
+        <h2 className="text-xl font-semibold text-base-300">
           {contributed_by.name}
         </h2>
         {own_idea ? (
           <Button
             title="Vote"
-            customClassName="w-full bg-base-content text-neutral-focus border-primary"
+            customClassName="w-full btn-secondary text-base-300 "
           >
             Edit Project
           </Button>

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -3,21 +3,21 @@ import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-full h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+    <div className="card w-full h-[190px] bg-base-100 flex flex-row items-center px-10">
       <VoteDescriptionCard />
       <section className="card-body gap-y-7 px-20">
-        <h2 className="text-xl font-semibold text-neutral-focus">
+        <h2 className="text-xl font-semibold text-base-300">
           What is your Voyage project idea & vision?
         </h2>
-        <p className="text-base font-medium text-neutral">
+        <p className="text-base font-medium text-neutral-focus">
           We value your ideas! Share your ideas on what our project should be.
           Describe your vision to capture what it does and the benefit it will
           bring to users.
         </p>
       </section>
       <Button
         title="Create Project"
-        customClassName="w-1/7 btn-primary text-base-content normal-case"
+        customClassName="w-1/7 btn-primary text-base-300 normal-case"
       >
         Create Project
       </Button>

diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
@@ -10,20 +10,20 @@ function IdeationContainer({
   contributed_by,
 }: Ideation) {
   return (
-    <div className="card w-full h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
+    <div className="card w-full h-[457px] bg-base-200 flex flex-row items-start p-10 gap-x-20">
       <VoteCard users={users} voted={voted} />
       <section className="card-body gap-y-7 p-0 w-[1000px] h-[377px] overflow-y-auto pr-5">
-        <h2 className="text-xl font-semibold text-neutral-focus">{title}</h2>
+        <h2 className="text-xl font-semibold text-base-300">{title}</h2>
         <h3 className="text-base text-neutral-focus font-semibold">
           Project Idea
         </h3>
-        <p className="text-base text-neutral-focus font-medium">
+        <p className="text-base text-base-300 font-medium">
           {project_idea}
         </p>
         <h3 className="text-base text-neutral-focus font-semibold">
           Vision Statement
         </h3>
-        <p className="text-base text-neutral-focus font-medium">
+        <p className="text-base text-base-300 font-medium">
           {vision_statement}
         </p>
       </section>

diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
@@ -7,12 +7,12 @@ interface VoteCardProps {
 
 function VoteCard({ users, voted }: VoteCardProps) {
   return (
-    <div className="card w-1/3 h-fit bg-base-content rounded-lg">
+    <div className="card w-1/3 h-fit bg-primary-content rounded-lg">
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h1 className="text-3xl font-semibold text-neutral-focus">
+        <h1 className="text-3xl font-semibold text-base-300">
           {users.length}
         </h1>
-        <h2 className="text-xl font-semibold text-neutral-focus">{`Vote${
+        <h2 className="text-xl font-semibold text-base-300">{`Vote${
           users.length > 1 ? "s" : ""
         }`}</h2>
         <div className="avatar-group -space-x-2 w-full">
@@ -22,7 +22,7 @@ function VoteCard({ users, voted }: VoteCardProps) {
         </div>
         <Button
           title="Vote"
-          customClassName="w-full bg-primary hover:bg-primary-focus disabled:bg-primary-focus disabled:text-base-content"
+          customClassName="w-full btn-primary text-base-300 disabled:bg-primary-focus disabled:text-base-200"
           disabled={voted}
         >
           {voted ? "Voted" : "Vote"}

diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -1,9 +1,9 @@
 function VoteDescriptionCard() {
   return (
-    <div className="card w-1/3 h-32 bg-base-content rounded-lg">
+    <div className="card w-1/3 h-32 bg-primary-content rounded-lg">
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
-        <p className="text-base font-medium text-neutral text-left">
+        <h2 className="text-xl font-semibold text-base-300">Votes</h2>
+        <p className="text-base font-medium text-base-300 text-left">
           Vote for the projects you are interested in.
         </p>
       </section>

diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
@@ -9,21 +9,21 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-72 sm:w-96 text-black bg-white rounded-lg">
+    <div className="card w-72 sm:w-96 text-base-300 bg-base-200 rounded-lg">
       <div className="flex flex-row justify-between">
-        <h3 className="text-xl font-semibold text-black mt-5 ml-5 self-center">
+        <h3 className="text-xl font-semibold text-base-300 mt-5 ml-5 self-center">
           {title}
         </h3>
         <Button
           title={`edit ${title}`}
-          customClassName="mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent"
+          customClassName="mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-base-300 bg-secondary border-transparent"
         >
-          <PencilSquareIcon className="h-4 w-4 text-black" />
+          <PencilSquareIcon className="h-4 w-4 text-base-300" />
           Edit
         </Button>
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5 pt-1">
-        <ul className="text-black">
+        <ul className="text-base-300">
           {data.map((element) => (
             <li
               className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"

diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -11,7 +11,7 @@ export default function TechStackContainer() {
     }
   }
   return (
-    <div className="card bg-primary-content p-10 w-full">
+    <div className="card bg-secondary-content p-10 w-full">
       <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -9,11 +9,11 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
+    <div className="card w-full max-h-[320px] bg-primary-content flex flex-row px-20 py-10 box-border">
       <Image src={image} alt={alt} width={454} height={200} priority={false} />
       <div className="flex flex-col justify-center pl-24 gap-y-3.5">
-        <h3 className="text-3xl font-bold text-black">{title}</h3>
-        <p className="text-lg font-medium text-black">{description}</p>
+        <h3 className="text-3xl font-bold text-base-300">{title}</h3>
+        <p className="text-lg font-medium text-base-300">{description}</p>
       </div>
     </div>
   );

diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
@@ -21,15 +21,15 @@ export default function ModeToggle() {
   };
 
   return (
-    <label className="swap swap-rotate">
+    <label className="swap swap-rotate ">
       <input
         data-testid="mode-toggle"
         type="checkbox"
         onChange={toggleTheme}
         checked={theme === "light"}
       />
-      <MoonIcon className="w-6 h-6 duration-200 fill-current swap-on" />
-      <SunIcon className="w-6 h-6 duration-200 fill-current swap-off" />
+      <MoonIcon className="w-6 h-6 duration-200 fill-current swap-on text-base-300" />
+      <SunIcon className="w-6 h-6 duration-200 fill-current swap-off text-base-300" />
     </label>
   );
 }
diff --git a/src/components/navbar/Bell.tsx b/src/components/navbar/Bell.tsx
@@ -10,7 +10,7 @@ export default function Bell({
       <span className="indicator-item badge badge-error px-1 rounded-full text-white">
         {notificationCount}
       </span>
-      <BellIcon className="h-6 w-6 hover:text-base-100 duration-200 self-center cursor-pointer" />
+      <BellIcon className="h-6 w-6 text-base-300 duration-200 self-center cursor-pointer" />
     </div>
   );
 }
diff --git a/src/components/navbar/ChinguMenu.tsx b/src/components/navbar/ChinguMenu.tsx
@@ -10,7 +10,7 @@ export default function ChinguMenu() {
         alt="Chingu Logo"
         priority={false}
       />
-      <h2 className=" font-semibold text-lg">Chingu</h2>
+      <h2 className=" font-semibold text-lg text-base-300">Chingu</h2>
     </div>
   );
 }
diff --git a/src/components/navbar/DropDown.tsx b/src/components/navbar/DropDown.tsx
@@ -6,13 +6,13 @@ export default function DropDown({ name }: { name: string }) {
     <div className="dropdown py-0 mx-2 dropdown-bottom">
       <label
         tabIndex={0}
-        className="btn m-0 p-0 bg-transparent border-none hover:border-none hover:bg-transparent"
+        className="btn m-0 p-0 bg-transparent border-none hover:border-none hover:bg-transparent text-base-300"
       >
-        {name} <ChevronDownIcon className="w-4" />
+        {name} <ChevronDownIcon className="w-4 text-base-300" />
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box right-0"
+        className="dropdown-content z-[1] menu p-2 mt-2 shadow bg-base-100 right-0 border border-neutral rounded-2xl"
       >
         <DropDownLink title="Link 1" />
         <DropDownLink title="404???" href="/hello404" />

diff --git a/src/components/navbar/DropDownLink.tsx b/src/components/navbar/DropDownLink.tsx
@@ -10,7 +10,7 @@ export default function DropDownLink({ title, href = "#" }: DropDownLinkProps) {
     <li>
       <Link
         href={href}
-        className="text-neutral hover:text-neutral-focus font-semibold  duration-200"
+        className="font-semibold text-base-300 hover:text-base-300 duration-200 hover:bg-neutral-content"
       >
         {title}
       </Link>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -5,7 +5,7 @@ const notificationCount = 4;
 
 export default function Navbar() {
   return (
-    <nav className="navbar bg-primary">
+    <nav className="navbar bg-base-100">
       <div className="flex-1 pl-2">
         <ChinguMenu />
       </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,9 +15,9 @@ module.exports = {
           secondary: "#A3CEE9",
           "secondary-focus": "#B1C6D4",
           "secondary-content": "#DAEAF2",
-          accent: "#6EE7B7",
-          "accent-focus": "#98DDBD",
-          "accent-content": "#D7EDE3",
+          accent: "#868079",
+          "accent-focus": "#A6998D",
+          "accent-content": "#D9D5D0",
           neutral: "#6B7280",
           "neutral-focus": "#4C515B",
           "neutral-content": "#9CA1AA",
@@ -38,14 +38,14 @@ module.exports = {
       {
         dark: {
           primary: "#40936D",
-          "primary-focus": "#82D9B1",
-          "primary-content": "#7FB79D",
-          secondary: "#8FB4CC",
-          "secondary-focus": "#A6D1ED",
-          "secondary-content": "#697F8C",
-          accent: "#61CCA2",
-          "accent-focus": "#6EE7B7",
-          "accent-content": "#6B9984",
+          "primary-focus": "#5F8E6C",
+          "primary-content": "#394741",
+          secondary: "#44728D",
+          "secondary-focus": "#5E7387",
+          "secondary-content": "#36444D",
+          accent: "#494C4D",
+          "accent-focus": "#595655",
+          "accent-content": "#404040",
           neutral: "#6B7280",
           "neutral-focus": "#A0A5AE",
           "neutral-content": "#3B3F46",