From 440530067e6cfe0f83f8fc95ff9929947ad6d1db Mon Sep 17 00:00:00 2001
From: Tobias <tobias@newpipe.net>
Date: Mon, 2 Oct 2023 16:29:15 +0200
Subject: [PATCH] Update colors

---
 assets/css/style.css | 83 +++++++++++++++++++++++++++++++++-----------
 tailwind.config.js   | 27 +++++++-------
 2 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 3c27f9b..82d20fd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -2640,6 +2640,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -2828,6 +2832,10 @@ video {
   max-width: 1280px;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -3017,7 +3025,7 @@ video {
 
 .border-primary-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(174 175 248 / var(--tw-border-opacity));
+  border-color: rgb(222 113 110 / var(--tw-border-opacity));
 }
 
 .border-transparent {
@@ -3055,12 +3063,12 @@ video {
 
 .bg-primary-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+  background-color: rgb(205 50 46 / var(--tw-bg-opacity));
 }
 
 .bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(48 52 236 / var(--tw-bg-opacity));
+  background-color: rgb(159 39 36 / var(--tw-bg-opacity));
 }
 
 .bg-transparent {
@@ -3186,6 +3194,11 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.py-32 {
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -3350,6 +3363,10 @@ video {
   letter-spacing: -0.025em;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -3375,6 +3392,11 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -3387,27 +3409,27 @@ video {
 
 .text-primary-100 {
   --tw-text-opacity: 1;
-  color: rgb(249 249 254 / var(--tw-text-opacity));
+  color: rgb(237 178 177 / var(--tw-text-opacity));
 }
 
 .text-primary-400 {
   --tw-text-opacity: 1;
-  color: rgb(136 139 244 / var(--tw-text-opacity));
+  color: rgb(215 80 77 / var(--tw-text-opacity));
 }
 
 .text-primary-500 {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(205 50 46 / var(--tw-text-opacity));
 }
 
 .text-primary-600 {
   --tw-text-opacity: 1;
-  color: rgb(48 52 236 / var(--tw-text-opacity));
+  color: rgb(159 39 36 / var(--tw-text-opacity));
 }
 
 .text-primary-900 {
   --tw-text-opacity: 1;
-  color: rgb(10 12 106 / var(--tw-text-opacity));
+  color: rgb(22 5 5 / var(--tw-text-opacity));
 }
 
 .text-white {
@@ -3519,6 +3541,10 @@ video {
   transition-duration: 200ms;
 }
 
+.duration-500 {
+  transition-duration: 500ms;
+}
+
 .duration-75 {
   transition-duration: 75ms;
 }
@@ -4079,6 +4105,10 @@ EmojiSymbols;
   }
 }
 
+.hover\:cursor-pointer:hover {
+  cursor: pointer;
+}
+
 .hover\:bg-black:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -4096,17 +4126,17 @@ EmojiSymbols;
 
 .hover\:bg-primary-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(211 212 251 / var(--tw-bg-opacity));
+  background-color: rgb(230 146 143 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(48 52 236 / var(--tw-bg-opacity));
+  background-color: rgb(159 39 36 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-primary-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(14 17 158 / var(--tw-bg-opacity));
+  background-color: rgb(68 16 15 / var(--tw-bg-opacity));
 }
 
 .hover\:text-black:hover {
@@ -4119,9 +4149,14 @@ EmojiSymbols;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
-  color: rgb(48 52 236 / var(--tw-text-opacity));
+  color: rgb(159 39 36 / var(--tw-text-opacity));
 }
 
 .hover\:text-white:hover {
@@ -4133,6 +4168,12 @@ EmojiSymbols;
   text-decoration-line: underline;
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
@@ -4144,12 +4185,12 @@ EmojiSymbols;
 
 .focus\:bg-primary-600:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(48 52 236 / var(--tw-bg-opacity));
+  background-color: rgb(159 39 36 / var(--tw-bg-opacity));
 }
 
 .focus\:bg-primary-700:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(19 23 209 / var(--tw-bg-opacity));
+  background-color: rgb(113 28 25 / var(--tw-bg-opacity));
 }
 
 .focus\:text-white:focus {
@@ -4191,7 +4232,7 @@ EmojiSymbols;
 
 .focus\:ring-primary-300:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(174 175 248 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(222 113 110 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-white:focus {
@@ -4204,7 +4245,7 @@ EmojiSymbols;
 }
 
 .focus\:ring-offset-primary-500:focus {
-  --tw-ring-offset-color: #6366F1;
+  --tw-ring-offset-color: #CD322E;
 }
 
 .group:hover .group-hover\:bg-gray-900 {
@@ -4301,17 +4342,17 @@ EmojiSymbols;
 
 :is(.dark .dark\:text-primary-100) {
   --tw-text-opacity: 1;
-  color: rgb(249 249 254 / var(--tw-text-opacity));
+  color: rgb(237 178 177 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:text-primary-300) {
   --tw-text-opacity: 1;
-  color: rgb(174 175 248 / var(--tw-text-opacity));
+  color: rgb(222 113 110 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:text-primary-400) {
   --tw-text-opacity: 1;
-  color: rgb(136 139 244 / var(--tw-text-opacity));
+  color: rgb(215 80 77 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:text-white) {
@@ -4360,7 +4401,7 @@ EmojiSymbols;
 
 :is(.dark .dark\:hover\:text-primary-500:hover) {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(205 50 46 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:focus\:border-indigo-500:focus) {
@@ -4385,7 +4426,7 @@ EmojiSymbols;
 
 :is(.dark .dark\:focus\:ring-primary-900:focus) {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(10 12 106 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(22 5 5 / var(--tw-ring-opacity));
 }
 
 @media (min-width: 640px) {
diff --git a/tailwind.config.js b/tailwind.config.js
index b9657d3..cf9479d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
       colors: {
         transparent: 'transparent',
         current: 'currentColor',
-        'primary': {
+        'secondary': {
           DEFAULT: '#6366F1',
           50: '#FFFFFF',
           100: '#F9F9FE',
@@ -22,18 +22,19 @@ module.exports = {
           800: '#0E119E',
           900: '#0A0C6A'
         },
-        'secondary': {
-          DEFAULT: '#EC4899',
-          50: '#FDEEF6',
-          100: '#FBDCEB',
-          200: '#F8B7D7',
-          300: '#F492C2',
-          400: '#F06DAE',
-          500: '#EC4899',
-          600: '#E4187D',
-          700: '#B11261',
-          800: '#7F0D45',
-          900: '#4C0829'
+        'primary': {
+          DEFAULT: '#CD322E',
+          50: '#F1C3C1',
+          100: '#EDB2B1',
+          200: '#E6928F',
+          300: '#DE716E',
+          400: '#D7504D',
+          500: '#CD322E',
+          600: '#9F2724',
+          700: '#711C19',
+          800: '#44100F',
+          900: '#160505',
+          950: '#000000'
         },
         'neutral': {
           DEFAULT: '#6B7280',