Merge pull request #110 from IT-Academy-BCN/feature/disable-dark-mode

Feature/disable dark mode

src/components/BackOfficeUserSendCode.tsx

@@ -65,7 +65,7 @@ const BackOfficeUserSendCode = () => {
     setDesactivateInputElements(false)
     setError("");
     setColorInput('input-secondary')
-    setColorButton('bg-[#BA007C]')
+    setColorButton('bg-pink-it')
     setShowAlert(false)
     inputRef.current?.focus();
   }
@@ -97,7 +97,7 @@ const BackOfficeUserSendCode = () => {
           disabled={desactivateInputElements}
           onFocus={() => handleResetEmail('no-reset-email')}
           placeholder={t("backofficePage.usersComponent.emailInput")}
-          className={`flex my-8 input input-bordered ${colorInput} w-2/3 max-w-xs`}
+          className={`flex my-8 input input-bordered ${colorInput} focus:outline-none w-2/3 max-w-xs`}
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />

src/components/Collaborators.tsx

@@ -22,7 +22,7 @@ function Collaborators() {
       </div>
       <div className="flex  justify-center  my-5  w-11/12 m-auto  ">
         <div className="flex justify-center">
-          <div className="flex flex-wrap navbar lg:bg-base-100  drop-shadow-md lg:justify-between justify-start rounded-full">
+          <div className="flex flex-wrap navbar lg:bg-base-100  drop-shadow-md lg:justify-between justify-start rounded-full md:shadow-md">
             <a
               className={active === "AngularCard" ? btnActive : btnInactive}
               onClick={() => {
@@ -62,7 +62,7 @@ function Collaborators() {
         {/* <a className="font-bold text-[#025E7E] active:underline " href="">{VT}</a> */}
         <label
           htmlFor="CollaboratorsModal"
-          className="lg:mr-20 mr-0 font-bold  text-base-content active:underline hover:text-purple-600 hover:cursor-pointer"
+          className="lg:mr-20 mr-0 font-bold  text-pink-it hover:text-pink-hover active:underline  hover:cursor-pointer"
         >
           {VT}
         </label>

src/components/CollaboratorsModal.tsx

@@ -6,7 +6,7 @@ function CollaboratorsModal() {
     <>
       <input type="checkbox" id="CollaboratorsModal" className="modal-toggle" />
       <div className="modal">
-        <div className="modal-box w-11/12 max-w-5xl">
+        <div className="modal-box bg-white  w-11/12 max-w-5xl">
           <label
             htmlFor="CollaboratorsModal"
             className="absolute right-5 top-5 hover:text-purple-600 hover:cursor-pointer"

src/components/SloganComponent.tsx

@@ -11,12 +11,8 @@ import nodejsLogo from "../assets/img/nodejs.png";
 import gitLogo from "../assets/img/git.png";
 import itacademyLogo from "../assets/img/itacademylogo.png";
 import HeaderComponent from "./HeaderComponent";
-import selector from "../assets/img/sel_right.png";
 import { useTranslation } from "react-i18next";
 
-
-
-
 const SloganComponent = () => {
   const [isPopupOpen, setIsPopupOpen] = useState(false); 
   const [t] = useTranslation();

src/components/apps/Apps.tsx

@@ -73,7 +73,7 @@ const Apps = () => {
                     )}
                     <h2 className="text-start ml-6 text-xl font-bold">{app.title}</h2>
                     <p className="flex-grow text-left ml-4 mr-8 my-4 line-clamp-4 leading-7 text-[#7e7e7e]">{app.description}</p>
-                    <a href={app.url} className="flex mb-4 mx-4 btn btn-outline bg-base-100 border-none normal-case" target="_blank">
+                    <a href={app.url} className="flex mb-4 mx-4 btn  bg-white border-none normal-case hover:text-black" target="_blank">
                     {t("backofficePage.appsComponent.appLink")} <FaArrowRight />
                     </a>
               </div>

src/components/apps/appsAdminView/ModalsAddApps.tsx

@@ -14,7 +14,7 @@ export default function ModalsAddApps({
   return (
     <>
       <dialog id="my_modal_2" className="modal">
-        <form method="dialog" className="modal-box flex flex-col text-start h-4/5">
+        <form method="dialog" className="modal-box bg-white flex flex-col text-start h-4/5">
           <button className="cursor-pointer bg-transparent ml-auto border-0 focus:outline-none hover:bg-transparent">
             <img src={Cross} alt="Cross button" />
           </button>
@@ -44,7 +44,7 @@ export default function ModalsAddApps({
                 setNewInfoApps({ ...newInfoApps, url: e.target.value })
               }
               type="text"
-              className="input input-bordered w-full py-2"
+              className="input input-bordered focus:outline-none w-full py-2"
             />
           </div>
 
@@ -56,7 +56,7 @@ export default function ModalsAddApps({
                 setNewInfoApps({ ...newInfoApps, github: e.target.value })
               }
               type="text"
-              className="input input-bordered w-full py-2"
+              className="input input-bordered focus:outline-none w-full py-2"
             />
           </div>
 
@@ -96,7 +96,7 @@ export default function ModalsAddApps({
 
           <div className="flex place-content-center mt-6 gap-12">
             <button className="btn normal-case xl:px-12 text-[#7e7e7e] border border-[#7e7e7e] bg-white">{t("backofficePage.appsComponent.createButton.closeButton")}</button>
-            <button className="btn normal-case xl:px-12 text-white bg-pink-it" onClick={sendInfo}>{t("backofficePage.appsComponent.createButton.saveButton")}</button>
+            <button className="btn normal-case xl:px-12 text-white bg-pink-it hover:bg-pink-hover" onClick={sendInfo}>{t("backofficePage.appsComponent.createButton.saveButton")}</button>
           </div>
         </form>
       </dialog>

src/components/apps/appsAdminView/modalApps.tsx

@@ -40,7 +40,7 @@ export default function ModalApps({
     <>
       <dialog id="my_modal_1" className="modal ">
         {!loadingApps ? (
-          <form method="dialog" className="modal-box text-start flex flex-col h-4/5">
+          <form method="dialog" className="modal-box bg-white text-start flex flex-col h-4/5">
             <button className="cursor-pointer bg-transparent ml-auto border-0 focus:outline-none hover:bg-transparent">
               <img src={Cross} alt="Cross button" />
             </button>
@@ -130,7 +130,7 @@ export default function ModalApps({
 
             <div className="flex place-content-center mt-6 gap-12">
               <button className="btn normal-case xl:px-12 text-[#7e7e7e] border border-[#7e7e7e] bg-white">{t("backofficePage.appsComponent.editButton.closeButton")}</button>
-              <button className="btn normal-case xl:px-12 text-white bg-pink-it"
+              <button className="btn normal-case xl:px-12 text-white bg-pink-it hover:bg-pink-hover"
                 onClick={() =>
                   putApiApps(newInfoApps, acces_token, dispatch, appsInfo.id)
                 }

src/components/faqs/FAQsComponent.tsx

@@ -140,7 +140,7 @@ const FAQs = () => {
           <div className="mx-5" key={faq.id}>
             <div className={`collapse rounded-md mb-5 shadow-xl`}>
               <input type="checkbox" className="peer" id={index.toString()} />
-              <div className="collapse-title relative lg:flex rounded-b-md bg-white text-justify text-black text-4 font-poppins font-bold font-poppins peer-checked:bg-[#BA007C] peer-checked:rounded-b-[0px] peer-checked:text-secondary-content">
+              <div className="collapse-title relative lg:flex rounded-b-md bg-white text-justify text-black text-4 font-poppins font-bold font-poppins peer-checked:bg-[#BA007C] peer-checked:rounded-b-[0px] peer-checked:text-[#fff]">
                 {window.location.pathname == "/backoffice" &&
                 isContentEditing &&
                 index.toString() === positionIndex ? (

src/styles/index.css

@@ -7,9 +7,8 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: #1e1e1e;
+  background-color: white;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -18,15 +17,6 @@
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   display: flex;
@@ -39,35 +29,3 @@ h1 {
   font-size: 3.2em;
   line-height: 1.1;
 }
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

tailwind.config.js

@@ -2,17 +2,21 @@ export default {
   plugins: [require("daisyui")],
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-   
+
     colors: {
       completed: "#bedfc8",
       building: "#f8e9b9",
       soon: "#f7cbc4",
       "projects-title": "#1c1c1e",
       "grey-it": "#7e7e7e",
-      "backOffice-main":"#EBEBEB",
-      'pink-it': '#BA007C'
+      "backOffice-main": "#EBEBEB",
+      'pink-it': '#BA007C',
+      'pink-hover': '#a2156a'
     },
     extend: {},
-  }
-
+  },
+  daisyui: {
+    themes: ["light"],
+  },
+
 };