style: upgrade colour palette (#41)

resir014 · May 20, 2024 · 466f4c4 · 466f4c4
1 parent 9daa8b4
commit 466f4c4
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 77 deletions.
diff --git a/src/components/global-header.tsx b/src/components/global-header.tsx
@@ -8,7 +8,7 @@ export interface GlobalHeaderProps {
 
 export function GlobalHeader({ subBrand }: GlobalHeaderProps) {
   return (
-    <header className="flex items-center h-[36px] px-6 bg-black">
+    <header className="flex items-center h-[36px] px-6 bg-gray-950">
       <div className="flex items-center space-x-3">
         <Link href="/" className="flex items-center space-x-1 group text-sm leading-4">
           <TMToolsLogo height={16} aria-hidden />

diff --git a/src/components/ui/modal/modal-overlay.tsx b/src/components/ui/modal/modal-overlay.tsx
@@ -1 +1 @@
-export const modalOverlayStyles = 'fixed inset-0 bg-black bg-opacity-75 transition-opacity';
+export const modalOverlayStyles = 'fixed inset-0 bg-gray-950 bg-opacity-75 transition-opacity';
diff --git a/src/components/ui/panel.tsx b/src/components/ui/panel.tsx
@@ -83,7 +83,7 @@ export function Panel({
                           <div className="ml-3 flex h-7 items-center">
                             <button
                               type="button"
-                              className="rounded-md bg-gray-900 text-blue-200 hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                              className="rounded-md bg-gray-900 text-blue-200 hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-offset-2 focus:ring-offset-gray-900"
                               onClick={handleClosePanel}
                               ref={closeButtonRef}
                             >

diff --git a/src/modules/bracket-builder/components/about-modal.tsx b/src/modules/bracket-builder/components/about-modal.tsx
@@ -65,7 +65,7 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
                           href="https://admin.trackmania.nadeo.club/"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-green-500 hover:underline"
+                          className="text-green-300 hover:underline"
                         >
                           competition tool
                         </a>
@@ -74,7 +74,7 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
                           href="https://doc.trackmania.com/competition-tool/"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-green-500 hover:underline"
+                          className="text-green-300 hover:underline"
                         >
                           official documentation
                         </a>
@@ -86,7 +86,7 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
                           href="https://github.com/resir014/trackmania-tools"
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-green-500 hover:underline"
+                          className="text-green-300 hover:underline"
                         >
                           MIT licence
                         </a>
@@ -99,7 +99,7 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
                             href="https://twitter.com/Crawron"
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="text-green-500 hover:underline"
+                            className="text-green-300 hover:underline"
                           >
                             @Crawron
                           </a>{' '}

diff --git a/src/modules/bracket-builder/components/add-new-round-button.tsx b/src/modules/bracket-builder/components/add-new-round-button.tsx
@@ -118,7 +118,7 @@ export function AddNewRoundButton({ className, onCreateRound }: AddNewRoundButto
   return (
     <div
       className={clsx(
-        'shrink-0 basis-full md:basis-6/12 lg:basis-4/12 xl:min-h-[655px] bg-black shadow-md rounded-md',
+        'shrink-0 basis-full md:basis-6/12 lg:basis-4/12 xl:min-h-[655px] bg-gray-950 shadow-md rounded-md',
         className
       )}
     >

diff --git a/src/modules/bracket-builder/round/round-detail.tsx b/src/modules/bracket-builder/round/round-detail.tsx
@@ -65,7 +65,7 @@ export function RoundDetail({ index, round }: RoundDetailProps) {
   };
 
   return (
-    <div className="shrink-0 basis-full md:basis-6/12 lg:basis-4/12 bg-black shadow-md rounded-md">
+    <div className="shrink-0 basis-full md:basis-6/12 lg:basis-4/12 bg-gray-950 shadow-md rounded-md">
       <div className="xl:flex xl:items-center xl:justify-between px-4 py-2 border-b border-gray-700">
         <div className="min-w-0 flex-1">
           <RoundNameEditor

diff --git a/src/modules/home/home-footer.tsx b/src/modules/home/home-footer.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 
 export function HomeFooter() {
   return (
-    <footer className="px-6 pb-8 pt-4 text-center">
-      <p className="text-gray-400 text-sm">
+    <footer className="px-6 pb-8 pt-4 text-center text-gray-300 text-sm">
+      <p>
         &copy; 2022 resir014.{' '}
         <a
-          className="text-green-500 hover:underline"
+          className="text-green-300 hover:underline"
           href="https://github.com/resir014/trackmania-tools"
           target="_blank"
           rel="noopener noreferrer"
@@ -15,9 +15,7 @@ export function HomeFooter() {
         </a>{' '}
         available under the MIT licence.
       </p>
-      <p className="text-gray-400 text-sm">
-        This project is not affiliated with Trackmania or Ubisoft Nadeo.
-      </p>
+      <p>This project is not affiliated with Trackmania or Ubisoft Nadeo.</p>
     </footer>
   );
 }
diff --git a/src/modules/home/project-card.tsx b/src/modules/home/project-card.tsx
@@ -40,7 +40,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
   };
 
   return (
-    <div className="relative overflow-hidden bg-black rounded-2xl shadow">
+    <div className="relative overflow-hidden bg-gray-950 rounded-2xl shadow">
       <div className="flex items-center justify-center min-h-[240px] px-4">
         {project.logo ? (
           <img

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,79 +3,89 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        white: '#ffffff',
-        black: '#121220',
         gray: {
-          50: '#f1f1f3',
-          100: '#e3e3e7',
-          200: '#c7c7d0',
-          300: '#acacb8',
-          400: '#9191a2',
-          500: '#78788c',
-          600: '#5f5f76',
-          700: '#474862',
-          800: '#2f324d',
-          900: '#181d3a',
+          DEFAULT: '#5c5ca3',
+          50: '#efeff6',
+          100: '#dedeed',
+          200: '#bebeda',
+          300: '#9d9dc8',
+          400: '#7c7cb6',
+          500: '#5c5ca3',
+          600: '#494983',
+          700: '#373762',
+          800: '#252541',
+          900: '#121220',
+          950: '#090910',
         },
         red: {
-          50: '#fde7e7',
-          100: '#fab7b7',
-          200: '#f78787',
-          300: '#f45858',
-          400: '#f12828',
+          DEFAULT: '#ee0000',
+          50: '#ffe5e5',
+          100: '#ffc7c7',
+          200: '#ff9494',
+          300: '#ff5c5c',
+          400: '#ff2424',
           500: '#ee0000',
-          600: '#b60000',
-          700: '#860000',
-          800: '#550000',
-          900: '#250000',
+          600: '#bd0000',
+          700: '#8f0000',
+          800: '#610000',
+          900: '#2e0000',
+          950: '#190000',
         },
         orange: {
-          50: '#faf5e8',
-          100: '#faedca',
-          200: '#f8e094',
-          300: '#f4ca51',
-          400: '#f0a81e',
-          500: '#f48432',
-          600: '#e15f08',
-          700: '#c1470d',
-          800: '#9e3813',
-          900: '#822e14',
+          DEFAULT: '#e8680c',
+          50: '#fef0e7',
+          100: '#fcdfca',
+          200: '#fac199',
+          300: '#f7a164',
+          400: '#f48432',
+          500: '#e8680c',
+          600: '#b8520a',
+          700: '#8c3f08',
+          800: '#5c2905',
+          900: '#301603',
+          950: '#180b01',
         },
         cyan: {
-          50: '#f1fafb',
-          100: '#daf7f9',
-          200: '#aceff3',
-          300: '#74e1ee',
-          400: '#2fc7e6',
-          500: '#1db9e7',
-          600: '#0d86c6',
-          700: '#116aa0',
-          800: '#125176',
-          900: '#11415b',
+          DEFAULT: '#0dcaf0',
+          50: '#e7fafe',
+          100: '#cff5fc',
+          200: '#9eeafa',
+          300: '#6ee0f7',
+          400: '#3ed6f4',
+          500: '#0dcaf0',
+          600: '#0ba3c1',
+          700: '#087a91',
+          800: '#055161',
+          900: '#032930',
+          950: '#011418',
         },
         blue: {
-          50: '#ebf8ff',
-          100: '#bee3f8',
-          200: '#90cdf4',
-          300: '#63b3ed',
-          400: '#4299e1',
-          500: '#3182ce',
-          600: '#2b6cb0',
-          700: '#2c5282',
-          800: '#2a4365',
-          900: '#1a365d',
+          DEFAULT: '#157ee0',
+          50: '#e8f3fd',
+          100: '#d0e6fb',
+          200: '#9dcbf6',
+          300: '#6eb2f2',
+          400: '#4099ed',
+          500: '#157ee0',
+          600: '#1064b1',
+          700: '#0c4982',
+          800: '#083259',
+          900: '#04182a',
+          950: '#020d17',
         },
         green: {
-          50: '#e9f8f6',
-          100: '#cbf7ef',
-          200: '#98f3db',
-          300: '#57eac3',
-          400: '#44f2a8',
-          500: '#06c975',
-          600: '#06b15b',
-          700: '#0c934f',
-          800: '#107445',
-          900: '#105e3b',
+          DEFAULT: '#09f65c',
+          50: '#e6feef',
+          100: '#cefdde',
+          200: '#9cfcbe',
+          300: '#6efaa0',
+          400: '#3ff880',
+          500: '#09f65c',
+          600: '#07c549',
+          700: '#059437',
+          800: '#036325',
+          900: '#023112',
+          950: '#011909',
         },
       },
       fontFamily: {