Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/tailwind lightmode colors #631

Merged
merged 9 commits into from
Jul 12, 2024
Merged

Fix/tailwind lightmode colors #631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
be0eb97
added lightmode colors to tailwind config. Exisitng colors now belong…
brendan-defi Jul 11, 2024
2bec03b
Changed color ref from gray-10 (dark mode) to gray-90 (light mode) on…
brendan-defi Jul 11, 2024
8cbf157
updated color references from yellow-70 (dark mode) to yellow-20 (lig…
brendan-defi Jul 11, 2024
087802c
Added gray-muted to light color scheme
brendan-defi Jul 11, 2024
98629f8
updated color references from gray-60 (dark mode) to gray-muted (ligh…
brendan-defi Jul 11, 2024
dd985a6
updated color references from gray-60 (dark mode) to gray-muted (ligh…
brendan-defi Jul 11, 2024
1070094
Merge branch 'fix/tailwind-lightmode-colors'
brendan-defi Jul 11, 2024
78cc7bf
test
brendan-defi Jul 11, 2024
47a2f13
test3
brendan-defi Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function BestOfEthereum() {
</p>
</div>
<div className="flex w-full max-w-[534px] flex-col space-y-2 lg:basis-1/2">
<div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray-10 p-8">
<div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray-90 p-8">
<h3 className="font-display text-8xl text-white lg:text-9xl">10x</h3>
<div className="flex flex-col font-sans text-4xl uppercase text-white lg:text-5xl">
<h3>Cheaper<br />Than<br />Ethereum</h3>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function FaqSidebar() {
<p className="font-mono text-3xl uppercase">Frequently Asked Questions</p>
</div>

<div className="h-[1px] w-full bg-gray-60 opacity-40" />
<div className="h-[1px] w-full bg-gray-muted opacity-40" />

<QuestionAccordion
question="When will I hear back about my application?"
Expand Down Expand Up @@ -74,7 +74,7 @@ export function FaqSidebar() {
question="What will I be able to do upon graduation?"
answer="You will learn to deploy smart contracts and connect a web frontend to them – the foundation of building any onchain app."
/>
<div className="mb-40 h-[1px] w-full bg-gray-60 opacity-40" />
<div className="mb-40 h-[1px] w-full bg-gray-muted opacity-40" />
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function QuestionAccordion({ question, answer }: QuestionAccordionProps)
const toggleOpen = useCallback(() => setIsOpen((o) => !o), [setIsOpen]);

return (
<div className="flex flex-col gap-6 border-b border-gray-10 pb-6 pt-5">
<div className="flex flex-col gap-6 border-b border-gray-90 pb-6 pt-5">
<button
type="button"
className="flex flex-row justify-between py-2 text-base font-medium text-white"
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ type FeatureCardProps = {

export function HowItWorksCard({ featureItem: { number, title, description } }: FeatureCardProps) {
return (
<div className="flex w-[290px] flex-shrink-0 flex-col space-y-10 bg-gray-10 p-8 md:w-[330px]">
<div className="flex w-[290px] flex-shrink-0 flex-col space-y-10 bg-gray-90 p-8 md:w-[330px]">
<p className="font-mono text-2xl uppercase text-white">{number}</p>
<div className="flex flex-col space-y-4">
{isValidElement(title) ? (
Expand All @@ -21,7 +21,7 @@ export function HowItWorksCard({ featureItem: { number, title, description } }:
{isValidElement(description) ? (
description
) : (
<p className="text-gray-60 font-sans text-white">{description}</p>
<p className="text-gray-muted font-sans text-white">{description}</p>
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Commitment/Commitment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function Commitment() {
</Link>
</div>
</div>
<div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray-10 p-4 lg:p-8">
<div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray-90 p-4 lg:p-8">
<GradientCircle className="h-[90px] w-[90px] md:h-[100px] md:w-[100px] xl:h-[163px] xl:w-[163px]" />
<GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />
<GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Ecosystem/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
href={url}
rel="noreferrer noopener"
target="_blank"
className="flex w-full flex-col justify-start gap-8 bg-gray-10 p-8 visited:opacity-50 hover:bg-gray-dark"
className="flex w-full flex-col justify-start gap-8 bg-gray-90 p-8 visited:opacity-50 hover:bg-gray-dark"
>
<div className="flex flex-row justify-between">
<div className="relative h-[80px] w-[80px] overflow-hidden rounded-[3px]">
Expand All @@ -32,7 +32,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<h3 className="font-mono text-xl uppercase text-white">{name}</h3>
<span className="truncate font-mono text-gray-60">
<span className="truncate font-mono text-gray-muted">
{getNiceDomainDisplayFromUrl(url)}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Ecosystem/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export function List() {
NO RESULTS FOR &ldquo;{searchText === '' ? selectedTag : searchText}
&rdquo;
</span>
<span className="font-sans text-gray-60">Try searching for another term</span>
<span className="font-sans text-gray-muted">Try searching for another term</span>
</div>
)}

Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Ecosystem/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function SearchBar({ setSearchText }: Props) {

return (
<div
className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-gray-60 p-2 md:w-full lg:w-80"
className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-gray-muted p-2 md:w-full lg:w-80"
>
<SearchIcon />

Expand All @@ -76,7 +76,7 @@ export function SearchBar({ setSearchText }: Props) {
id="appsSearchBar"
value={text}
onChange={onChange}
className="w-full bg-black font-sans text-base text-white placeholder:text-gray-60 focus:outline-none"
className="w-full bg-black font-sans text-base text-white placeholder:text-gray-muted focus:outline-none"
placeholder="Search"
aria-label='Search for apps and integrations in the Base ecosystem'
/>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Ecosystem/TagChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export function TagChip({ tag, isSelected, setSelectedTag }: Props) {
return (
<button type="button" onClick={select}>
<div
className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-60 px-8 hover:border-white ${
isSelected ? 'bg-gray-60' : ''
className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-muted px-8 hover:border-white ${
isSelected ? 'bg-gray-muted' : ''
}`}
>
<span className="text-center font-mono text-base uppercase text-white">{tag}</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Features/FeatureCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function Terminal() {

export function FeatureCard({ featureItem: { icon, title, description } }: FeatureCardProps) {
return (
<div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray-10 p-8 md:w-[330px]">
<div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray-90 p-8 md:w-[330px]">
{
{ ethereum: <Ethereum />, base: <Base />, terminal: <Terminal />, coinbase: <Coinbase /> }[
icon
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Layout/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function Footer() {
const handleCloseModal = useCallback(() => setIsOpen(false), []);

return (
<footer className="z-10 mt-auto flex w-full justify-center bg-gray-10 lg:pb-64">
<footer className="z-10 mt-auto flex w-full justify-center bg-gray-90 lg:pb-64">
<div className="flex w-full max-w-[1440px] flex-col justify-between p-8 lg:flex-row">
<div className="flex flex-col font-display text-sm text-white">
<div className="bg-blue-300 flex w-32 flex-row items-start justify-start">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Layout/Nav/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ function MobileMenu({ color }: MobileMenuProps) {
<AnimatePresence>
{showMobileMenu && (
<motion.nav
className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray-10 p-8"
className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray-90 p-8"
initial={mobileMenuInitial}
animate={mobileMenuAnimation}
exit={mobileMenuInitial}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Layout/Nav/NftBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function NftBanner() {
}

return (
<div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
<div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
<div className="z-10 flex w-full flex-row justify-center bg-yellow-20 text-black">
<div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-20 p-2 pl-8 pr-6">
<Link href={href}>
<span className="text-xs md:text-base">
Claim your Base Quest Anniversary NFT today!
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Layout/Nav/OcsBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function OcsBanner() {
}

return (
<div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
<div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
<div className="z-10 flex w-full flex-row justify-center bg-yellow-20 text-black">
<div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-20 p-2 pl-8 pr-6">
<Link href={href}>
<span className="text-xs md:text-base">Build Onchain this Summer!</span>
</Link>
Expand Down
Loading
Loading