s/primary/rebeccapurple/ for public areas
new primary is #007AFF
This commit is contained in:
m5r
parent
5e08863078
commit
45a9d863ca
@ -46,10 +46,13 @@ export default function CTAForm() {
|
||||
<input
|
||||
{...register("email")}
|
||||
type="email"
|
||||
className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500"
|
||||
className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-rebeccapurple-500 focus:border-rebeccapurple-500"
|
||||
placeholder="Enter your email address"
|
||||
/>
|
||||
<button type="submit" className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn text-white bg-rebeccapurple-500 hover:bg-rebeccapurple-400 flex-shrink-0"
|
||||
>
|
||||
Request access
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@ const Accordion: FunctionComponent<{ title: string }> = ({ title, children }) =>
|
||||
<>
|
||||
<Disclosure.Button className="flex items-center w-full text-lg font-medium text-left py-5 border-t border-gray-200">
|
||||
<svg
|
||||
className="w-4 h-4 fill-current text-primary-500 flex-shrink-0 mr-8 -ml-12"
|
||||
className="w-4 h-4 fill-current text-rebeccapurple-500 flex-shrink-0 mr-8 -ml-12"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
||||
@ -194,7 +194,7 @@ function MobileNav() {
|
||||
<div className="ml-3 h-7 flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rebeccapurple-500"
|
||||
onClick={() => setMobileNavOpen(false)}
|
||||
>
|
||||
<span className="sr-only">Close panel</span>
|
||||
|
||||
@ -4,14 +4,14 @@ import mockupImage from "../images/phone-mockup.png";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<div className="relative bg-gradient-to-b from-primary-100 to-primary-200">
|
||||
<div className="relative bg-gradient-to-b from-rebeccapurple-100 to-rebeccapurple-200">
|
||||
<section className="overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row lg:items-stretch lg:min-h-screen lg:max-h-[900px]">
|
||||
<div className="flex items-center justify-center w-full lg:order-2 lg:w-7/12">
|
||||
<div className="h-full px-4 pt-24 pb-16 sm:px-6 lg:px-24 2xl:px-32 lg:pt-40 lg:pb-14">
|
||||
<div className="flex flex-col flex-1 justify-center h-full space-y-8">
|
||||
<h1 className="font-heading text-4xl leading-none lg:leading-tight xl:text-5xl xl:leading-tight">
|
||||
<span className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
|
||||
<span className="bg-gradient-to-br from-rebeccapurple-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
|
||||
Take your phone number
|
||||
</span>{" "}
|
||||
<span className="text-[#24185B]">anywhere you go</span>
|
||||
|
||||
@ -8,7 +8,7 @@ export default function ReferralBanner() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative bg-primary-600 z-40">
|
||||
<div className="relative bg-rebeccapurple-600 z-40">
|
||||
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div className="pr-16 sm:text-center sm:px-16">
|
||||
<p className="font-medium text-white">
|
||||
@ -24,7 +24,7 @@ export default function ReferralBanner() {
|
||||
<div className="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
|
||||
<button
|
||||
type="button"
|
||||
className="flex p-2 rounded-md hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
className="flex p-2 rounded-md hover:bg-rebeccapurple-500 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span className="sr-only">Dismiss</span>
|
||||
<IoClose className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
|
||||
@ -71,7 +71,7 @@ const Pricing: BlitzPage = () => {
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-mackinac font-semibold text-gray-900">{tier.title}</h3>
|
||||
{tier.yearly ? (
|
||||
<p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
|
||||
<p className="absolute top-0 py-1.5 px-4 bg-rebeccapurple-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
|
||||
Get 2 months free!
|
||||
</p>
|
||||
) : null}
|
||||
@ -111,8 +111,8 @@ const Pricing: BlitzPage = () => {
|
||||
onClick={() => Panelbear.track("redirect-to-join-waitlist")}
|
||||
className={clsx(
|
||||
tier.yearly
|
||||
? "bg-primary-500 text-white hover:bg-primary-600"
|
||||
: "bg-primary-50 text-primary-700 hover:bg-primary-100",
|
||||
? "bg-rebeccapurple-500 text-white hover:bg-rebeccapurple-600"
|
||||
: "bg-rebeccapurple-50 text-rebeccapurple-700 hover:bg-rebeccapurple-100",
|
||||
"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",
|
||||
)}
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@ import Layout from "../../core/layouts/layout";
|
||||
|
||||
const subNavigation = [
|
||||
{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
|
||||
{ name: "Plan & Billing", href: Routes.Billing(), icon: IoCardOutline },
|
||||
{ name: "Billing", href: Routes.Billing(), icon: IoCardOutline },
|
||||
{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
|
||||
];
|
||||
|
||||
@ -36,7 +36,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
|
||||
<a
|
||||
className={clsx(
|
||||
isCurrentPage
|
||||
? "bg-gray-50 text-orange-600 hover:bg-white"
|
||||
? "bg-gray-50 text-primary-600 hover:bg-white"
|
||||
: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
|
||||
"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
|
||||
)}
|
||||
@ -45,7 +45,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
|
||||
<item.icon
|
||||
className={clsx(
|
||||
isCurrentPage
|
||||
? "text-orange-500"
|
||||
? "text-primary-500"
|
||||
: "text-gray-400 group-hover:text-gray-500",
|
||||
"flex-shrink-0 -ml-1 mr-3 h-6 w-6",
|
||||
)}
|
||||
|
||||
@ -10,7 +10,7 @@ module.exports = {
|
||||
mackinac: ["P22 Mackinac Pro", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
rebeccapurple: {
|
||||
50: "#f9fafb",
|
||||
100: "#eef1fb",
|
||||
200: "#dbd7f8",
|
||||
@ -22,6 +22,18 @@ module.exports = {
|
||||
800: "#39236b",
|
||||
900: "#1f163f",
|
||||
},
|
||||
primary: {
|
||||
50: "#E5F2FF",
|
||||
100: "#CCE4FF",
|
||||
200: "#99CAFF",
|
||||
300: "#66AFFF",
|
||||
400: "#3395FF",
|
||||
500: "#007AFF",
|
||||
600: "#0062CC",
|
||||
700: "#004999",
|
||||
800: "#003166",
|
||||
900: "#001833",
|
||||
},
|
||||
gray: {
|
||||
50: "#FAFAFA",
|
||||
100: "#F4F4F5",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user