diff --git a/components/logo-square.tsx b/components/logo-square.tsx index bda4374e5..292dc427a 100644 --- a/components/logo-square.tsx +++ b/components/logo-square.tsx @@ -1,13 +1,20 @@ import Image from 'next/image'; +const { STORE_PREFIX } = process.env; export default function LogoSquare({ dark = false }: { dark?: boolean }) { return (
{dark ? ( - Logo + Logo ) : ( Logo -

- - Popular Manufacturers -

-
- {popularManufacturers.map((manufacturer) => ( -
- {variant === 'home' ? ( - - ) : ( - - )} - {variant === 'home' && } + {popularManufacturers.length ? ( + <> +

+ + Popular Manufacturers +

+
+ {popularManufacturers.map((manufacturer) => ( +
+ {variant === 'home' ? ( + + ) : ( + + )} + {variant === 'home' && } +
+ ))}{' '}
- ))} -
-
+
+ + ) : null} +

All Manufacturers @@ -51,7 +56,7 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri ) : ( )} diff --git a/lib/styles.ts b/lib/styles.ts index 60c08db14..dac7f900d 100644 --- a/lib/styles.ts +++ b/lib/styles.ts @@ -1,4 +1,4 @@ -export const colors = { +export const carPartPlanetColor = { primary: { DEFAULT: '#EF6C02', emphasis: '#C85900', @@ -20,3 +20,26 @@ export const colors = { 600: '#111C55' } }; + +export const remanTransmissionColor = { + primary: { + DEFAULT: '#1A99DE', + emphasis: '#0073E6', + muted: '#5BAFDD' + }, + content: { + subtle: '#9ca3af', // gray-400 + DEFAULT: '#6b7280', // gray-500 + emphasis: '#374151', // gray-700 + strong: '#111827', // gray-900 + inverted: '#ffffff' // white + }, + dark: '#091242', + secondary: '#1A99DE', + blue: { + 800: '#1C1F35', + 200: '#666C89', + 500: '#2D3A7B', + 600: '#111C55' + } +}; diff --git a/lib/utils.ts b/lib/utils.ts index 850264821..8e03f335a 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -16,6 +16,7 @@ export const ensureStartsWith = (stringToCheck: string, startsWith: string) => export const validateEnvironmentVariables = () => { const requiredEnvironmentVariables = [ 'SHOPIFY_STORE_DOMAIN', + 'STORE_PREFIX', 'SHOPIFY_STOREFRONT_ACCESS_TOKEN', 'SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID', 'SHOPIFY_CUSTOMER_ACCOUNT_API_URL', diff --git a/public/dark-logo.svg b/public/car-part-planet/dark-logo.svg similarity index 100% rename from public/dark-logo.svg rename to public/car-part-planet/dark-logo.svg diff --git a/public/logo.svg b/public/car-part-planet/logo.svg similarity index 100% rename from public/logo.svg rename to public/car-part-planet/logo.svg diff --git a/public/reman-transmission/dark-logo.svg b/public/reman-transmission/dark-logo.svg new file mode 100644 index 000000000..d8b1c9677 --- /dev/null +++ b/public/reman-transmission/dark-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/reman-transmission/logo.svg b/public/reman-transmission/logo.svg new file mode 100644 index 000000000..686e3f9f3 --- /dev/null +++ b/public/reman-transmission/logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 4d2f2fc73..e121f717a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,12 @@ const plugin = require('tailwindcss/plugin'); -import { colors } from './lib/styles.ts'; +import { carPartPlanetColor, remanTransmissionColor } from './lib/styles.ts'; + +const { STORE_PREFIX } = process.env; + +const getCustomColors = { + 'car-part-planet': carPartPlanetColor, + 'reman-transmission': remanTransmissionColor +}; /** @type {import('tailwindcss').Config} */ module.exports = { @@ -7,7 +14,7 @@ module.exports = { content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: { - colors, + colors: getCustomColors[STORE_PREFIX], fontFamily: { sans: ['var(--font-geist-sans)'] },