Skip to content

Commit

Permalink
feature: fixing colors using global css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wallewdev
Wallewdev committed Jul 22, 2024
1 parent 11cceaa commit 705dcf5
Showing 1 changed file with 18 additions and 17 deletions.
35 changes: 18 additions & 17 deletions app/routes/help-center.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { MetaFunction } from "@remix-run/node";
import { redirect } from "@remix-run/react";
import { useNavigate } from "@remix-run/react";
import React, { useEffect, useRef, useState } from "react";

import { Button } from "~/components/ui/button";
Expand Down Expand Up @@ -73,6 +73,7 @@ export default function HelpCenter() {
}>({});
const [showDropdown, setShowDropdown] = useState(false);
const dropdownReference = useRef<HTMLDivElement>(null);
const navigate = useNavigate();

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setQuery(event.target.value);
Expand Down Expand Up @@ -148,19 +149,19 @@ export default function HelpCenter() {

return (
<div className="max-w-[1440px] bg-background">
<section className="w-full bg-[#F973161A] p-6 text-center md:px-0 md:py-[100px]">
<h1 className="text-xl font-medium leading-[24.2px] text-[#0A0A0A] md:text-[#525252]">
<section className="w-full bg-[#F9731617] p-6 text-center md:px-0 md:py-[100px]">
<h1 className="text-xl font-medium leading-[24.2px] text-neutral-2 md:text-neutral-1">
Help Center
</h1>
<h2 className="my-5 text-[32px] font-bold leading-[38.73px] text-[#0A0A0A] md:text-6xl md:leading-[72.61px]">
<h2 className="my-5 text-[32px] font-bold leading-[38.73px] text-neutral-2 md:text-6xl md:leading-[72.61px]">
How can we help You?
</h2>
<p className="text-[16px] leading-[21.78px] text-[#0A0A0A] md:text-lg md:text-[#525252]">
<p className="text-[16px] leading-[21.78px] text-neutral-2 md:text-lg md:text-neutral-1">
Find advice and answers from our support team
</p>
<div className="relative mx-auto mt-5 h-[53px] max-w-[644px] md:h-14">
<input
className="h-full w-full rounded-2xl border-[1px] border-[#CBD5E1] pl-10 outline-none placeholder:text-sm placeholder:text-[#71717A] md:rounded-[36px] md:bg-[#FAFAFA] md:pl-14 md:placeholder:text-[12px] md:placeholder:text-[#525252]"
className="h-full w-full rounded-2xl border-[1px] border-border pl-10 outline-none placeholder:text-sm placeholder:text-input md:rounded-[36px] md:bg-[#FAFAFA] md:pl-14 md:placeholder:text-[12px] md:placeholder:text-[#525252]"
type="text"
value={query}
onChange={handleInputChange}
Expand All @@ -174,13 +175,13 @@ export default function HelpCenter() {
{showDropdown && (
<div
ref={dropdownReference}
className="absolute left-0 right-0 top-full z-10 mt-2 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg"
className="absolute left-0 right-0 top-full z-10 mt-2 max-h-60 overflow-y-auto rounded-md border border-border bg-card shadow-lg"
>
{filteredTopics.length > 0 ? (
filteredTopics.map((topic, index) => (
<div
key={index}
className="cursor-pointer p-2 text-left hover:bg-gray-100"
className="cursor-pointer p-2 text-left hover:bg-border"
role="button"
tabIndex={0}
onClick={() => handleDropdownClick(index)}
Expand All @@ -190,7 +191,7 @@ export default function HelpCenter() {
</div>
))
) : (
<div className="p-2 text-gray-500">No topics found</div>
<div className="p-2 text-input">No topics found</div>
)}
</div>
)}
Expand All @@ -206,14 +207,14 @@ export default function HelpCenter() {
filteredTopics.map((topic, index) => (
<div
key={index}
className="mt-6 flex h-[128px] cursor-pointer flex-col justify-center gap-5 bg-white p-6 text-left"
className="mt-6 flex h-[128px] cursor-pointer flex-col justify-center gap-5 bg-card p-6 text-left"
role="button"
tabIndex={0}
onClick={() => handleTopicToggle(index)}
onKeyDown={(event) => handleKeyPressTopicToggle(event, index)}
>
<div className="flex w-full items-center justify-between">
<p className="w-[90%] text-xl font-medium leading-[24.2px] text-[#0F172A]">
<p className="text-loading w-[90%] text-xl font-medium leading-[24.2px]">
{topic.topic}
</p>
<img
Expand All @@ -229,7 +230,7 @@ export default function HelpCenter() {
</section>

<section className="p-6 pb-20">
<div className="mx-auto grid-cols-2 p-6 text-[#0A0A0A] md:grid md:max-w-[1200px] md:px-0">
<div className="mx-auto grid-cols-2 p-6 text-neutral-2 md:grid md:max-w-[1200px] md:px-0">
<div>
<h2 className="text-[24px] font-semibold leading-[29.05px] md:text-[36px] md:leading-[43.57px]">
Frequently Asked Questions
Expand All @@ -238,10 +239,10 @@ export default function HelpCenter() {
We couldn’t answer your question?
</p>
<Button
className="border-[#0A0A0A]"
className="border-neutral-2"
variant="outline"
size="sm"
onClick={() => redirect("/contact-us")}
onClick={() => navigate("/contact-us")}
>
Contact us
</Button>
Expand All @@ -251,7 +252,7 @@ export default function HelpCenter() {
{questtions.map((ques, ind) => (
<div
key={ind}
className="flex cursor-pointer flex-col justify-center gap-[10px] border-b-[1px] border-[#E2E8F0] py-[15px] text-left md:mr-6"
className="flex cursor-pointer flex-col justify-center gap-[10px] border-b-[1px] border-border py-[15px] text-left md:mr-6"
role="button"
tabIndex={0}
onClick={() => handleQuestionToggle(ind)}
Expand All @@ -277,13 +278,13 @@ export default function HelpCenter() {
<h2 className="text-2xl font-bold leading-[29.05px] text-primary md:text-[28px] md:leading-[33.89px]">
Didn’t find an answer?
</h2>
<p className="py-5 text-[16px] text-[#525252] md:text-lg md:leading-[21.78px] md:text-[#0A0A0A]">
<p className="py-5 text-[16px] text-neutral-1 md:text-lg md:leading-[21.78px] md:text-neutral-2">
Contact us for more inquires and information about our services.
</p>
<Button
className="bg-primary"
size="lg"
onClick={() => redirect("/contact-us")}
onClick={() => navigate("/contact-us")}
>
Contact us
</Button>
Expand Down

0 comments on commit 705dcf5

Please sign in to comment.