Merge pull request #2138 from codecrafters-io/add-dark-mode-styling

add dark mode styling
codecrafters-io · Aug 23, 2024 · 45a7b66 · 45a7b66
2 parents 9d1a45b + 90247c1
commit 45a7b66
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 70 deletions.
diff --git a/app/components/course-page/completed-step-notice.hbs b/app/components/course-page/completed-step-notice.hbs
@@ -7,7 +7,7 @@
     <div class="text-2xl pl-1">
       🎉
     </div>
-    <div class="prose prose-sm prose-green dark:prose-green-invert">
+    <div class="prose prose-sm prose-green dark:prose-invert">
       {{markdown-to-html this.instructionsMarkdown}}
     </div>
 
@@ -49,13 +49,13 @@
       data-test-share-progress-button
     >
       <span
-        class="prose-green prose-sm dark:prose-green-invert group-hover/share-progress-button:underline group-hover/share-progress-button:text-green-700 dark:group-hover/share-progress-button:text-green-300"
+        class="prose prose-sm prose-green dark:prose-invert group-hover/share-progress-button:underline group-hover/share-progress-button:text-green-700 dark:group-hover/share-progress-button:text-green-300"
       >
         Tell your friends
       </span>
       {{svg-jar
         "external-link"
-        class="w-4 fill-current prose-green prose-sm dark:prose-green-invert group-hover/share-progress-button:text-green-700 dark:group-hover/share-progress-button:text-green-300"
+        class="w-4 fill-current prose prose-sm prose-green dark:prose-invert group-hover/share-progress-button:text-green-700 dark:group-hover/share-progress-button:text-green-300"
       }}
     </div>
   {{/if}}

diff --git a/app/components/course-page/course-stage-step/feedback-prompt.hbs b/app/components/course-page/course-stage-step/feedback-prompt.hbs
@@ -18,7 +18,7 @@
   <div class="w-full">
     <div class="flex items-center">
       {{#if (and this.submissionIsClosed (not this.isEditingClosedSubmission))}}
-        <div class="prose-green dark:prose-green-invert prose-sm leading-7">
+        <div class="prose prose-green dark:prose-invert leading-7">
           Feedback submitted!
 
           <span
@@ -31,7 +31,7 @@
           </span>
         </div>
       {{else}}
-        <div class="prose-green dark:prose-green-invert leading-7" data-test-question-text>
+        <div class="prose prose-green dark:prose-invert leading-7" data-test-question-text>
           {{#if this.isEditingClosedSubmission}}
             How did we do?
           {{else}}
@@ -56,7 +56,7 @@
       </div>
 
       {{#if this.feedbackSubmission.hasSelectedAnswer}}
-        <div class="prose-green dark:prose-green-invert prose-sm mt-4">
+        <div class="prose prose-sm prose-green dark:prose-invert mt-4">
           P.S.
           <a
             href="https://forum.codecrafters.io/u/rohitpaulk/activity"

diff --git a/app/components/private-leaderboard-feature-suggestion.hbs b/app/components/private-leaderboard-feature-suggestion.hbs
@@ -3,7 +3,7 @@
     {{svg-jar "user-group" class="w-6 fill-current text-blue-400 dark:text-blue-600"}}
   </div>
 
-  <div class="prose prose-blue dark:prose-blue-invert leading-7 text-sm">
+  <div class="prose prose-blue dark:prose-invert leading-7 text-sm">
     Private leaderboards are here.
     <br />
     <span role="button" class="font-semibold underline" {{on "click" this.handleCreateTeamButtonClick}}>Create one for your team.</span>

diff --git a/app/components/product-walkthrough-feature-suggestion.hbs b/app/components/product-walkthrough-feature-suggestion.hbs
@@ -1,19 +1,14 @@
 <AlertWithIcon @type="info" class="relative" ...attributes data-test-product-walkthrough-feature-suggestion>
   <span class="leading-7 inline-block mr-10">
     New here?
-    <span
-      role="button"
-      class="font-bold underline text-blue-700"
-      {{on "click" this.handleViewWalkthroughButtonClick}}
-      data-test-start-here-button
-    >Start here</span>
+    <b role="button" class="underline" {{on "click" this.handleViewWalkthroughButtonClick}} data-test-start-here-button>Start here</b>
     to learn how challenges work.
   </span>
 
   {{#if this.isDismissable}}
     <div class="absolute right-3 top-0 bottom-0 flex items-center justify-center">
       <button
-        class="border border-blue-300 p-1 rounded hover:bg-blue-200"
+        class="border border-blue-300 dark:border-blue-700 p-1 rounded hover:bg-blue-200 dark:hover:bg-blue-800/50"
         type="button"
         {{on "click" this.handleDismissButtonClick}}
         data-test-dismiss-button

diff --git a/app/components/vote-page/course-extension-idea-card.hbs b/app/components/vote-page/course-extension-idea-card.hbs
@@ -1,11 +1,12 @@
 <div
-  class="group bg-white p-5 rounded-md shadow-sm flex flex-col justify-between border {{if this.userHasVoted 'border-gray-300'}} relative"
+  class="relative group bg-white dark:bg-gray-800 p-5 rounded-md shadow-sm flex flex-col justify-between border
+    {{if this.userHasVoted 'border-gray-300 dark:border-gray-700' 'border-gray-200 dark:border-white/5'}}"
   data-test-course-extension-idea-card
 >
   {{! Text }}
   <div class="mb-4">
     <div class="flex items-start justify-between mb-3">
-      <div class="text-gray-700 mr-2 mb-0.5 font-bold text-xl tracking-tight" data-test-course-extension-idea-name>
+      <div class="text-gray-700 dark:text-gray-200 mr-2 mb-0.5 font-bold text-xl tracking-tight" data-test-course-extension-idea-name>
         {{@courseExtensionIdea.name}}
       </div>
 

diff --git a/app/components/vote-page/idea-card/vote-button.gts b/app/components/vote-page/idea-card/vote-button.gts
@@ -28,14 +28,18 @@ export default class VoteButtonComponent extends Component<Signature> {
     <button
       type='button'
       class='pr-2.5 pl-2 py-1.5 rounded shadow-sm flex items-center border
-        {{if @userHasVoted "border-teal-500 hover:border-teal-600" "border-gray-300 hover:border-gray-400"}}
+        {{if
+          @userHasVoted
+          "border-teal-500 hover:border-teal-600"
+          "border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-600"
+        }}
         transition-all duration-75 active:shadow active:border-teal-600'
       data-test-vote-button
       ...attributes
     >
       {{svgJar 'chevron-up' class='w-5 mr-1 text-teal-500'}}
 
-      <span class='text-sm {{if @userHasVoted "text-teal-500" "text-gray-700"}} transition-all duration-75'>
+      <span class='text-sm {{if @userHasVoted "text-teal-500" "text-gray-700 dark:text-gray-300"}} transition-all duration-75'>
         <span class='font-semibold'>{{this.renderedVotesCount}}</span>
 
         {{#if (eq this.renderedVotesCount 1)}}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -135,60 +135,42 @@ module.exports = {
             },
           },
         },
-        'blue-invert': {
-          css: {
-            '--tw-prose-body': colors.sky[300],
-            '--tw-prose-headings': colors.sky[300],
-            '--tw-prose-lead': colors.sky[300],
-            '--tw-prose-links': colors.sky[200],
-            '--tw-prose-bold': colors.sky[300],
-            '--tw-prose-counters': colors.sky[300],
-            '--tw-prose-bullets': colors.sky[300],
-            '--tw-prose-hr': colors.sky[300],
-            '--tw-prose-quotes': colors.sky[300],
-            '--tw-prose-quote-borders': colors.sky[300],
-            '--tw-prose-captions': colors.sky[300],
-            '--tw-prose-code': colors.sky[300],
-            '--tw-prose-pre-code': colors.sky[300],
-            '--tw-prose-pre-bg': colors.sky[800],
-            '--tw-prose-th-borders': colors.sky[300],
-            '--tw-prose-td-borders': colors.sky[300],
-            'a:hover': {
-              color: colors.sky[200],
-            },
-          },
-        },
         green: {
           css: {
-            color: colors.green[800],
-            a: { color: colors.green[800] },
-            strong: { color: colors.green[800] },
-            b: { color: colors.green[800] },
-            pre: {
-              color: colors.green[800],
-              backgroundColor: colors.green[200],
-              borderWidth: '1px',
-              borderColor: colors.green[300],
-            },
-            h3: {
-              color: colors.green[800],
-            },
-          },
-        },
-        'green-invert': {
-          css: {
-            color: colors.green[300],
-            a: { color: colors.green[300] },
-            strong: { color: colors.green[300] },
-            b: { color: colors.green[300] },
-            pre: {
-              color: colors.green[300],
-              backgroundColor: colors.green[800],
-              borderWidth: '1px',
-              borderColor: colors.green[700],
-            },
-            h3: {
-              color: colors.green[300],
+            '--tw-prose-body': colors.green[700],
+            '--tw-prose-headings': colors.green[700],
+            '--tw-prose-lead': colors.green[700],
+            '--tw-prose-links': colors.green[800],
+            '--tw-prose-bold': colors.green[700],
+            '--tw-prose-counters': colors.green[700],
+            '--tw-prose-bullets': colors.green[700],
+            '--tw-prose-hr': colors.green[700],
+            '--tw-prose-quotes': colors.green[700],
+            '--tw-prose-quote-borders': colors.green[700],
+            '--tw-prose-captions': colors.green[700],
+            '--tw-prose-code': colors.green[700],
+            '--tw-prose-pre-code': colors.green[700],
+            '--tw-prose-pre-bg': colors.green[700],
+            '--tw-prose-th-borders': colors.green[700],
+            '--tw-prose-td-borders': colors.green[700],
+            '--tw-prose-invert-body': colors.green[500],
+            '--tw-prose-invert-headings': colors.green[500],
+            '--tw-prose-invert-lead': colors.green[500],
+            '--tw-prose-invert-links': colors.green[500],
+            '--tw-prose-invert-bold': colors.green[500],
+            '--tw-prose-invert-counters': colors.green[500],
+            '--tw-prose-invert-bullets': colors.green[500],
+            '--tw-prose-invert-hr': colors.green[500],
+            '--tw-prose-invert-quotes': colors.green[500],
+            '--tw-prose-invert-quote-borders': colors.green[500],
+            '--tw-prose-invert-captions': colors.green[500],
+            '--tw-prose-invert-code': colors.green[500],
+            '--tw-prose-invert-pre-code': colors.green[500],
+            '--tw-prose-invert-pre-bg': colors.green[500],
+            '--tw-prose-invert-th-borders': colors.green[500],
+            '--tw-prose-invert-td-borders': colors.green[500],
+            'a:hover': {
+              color: colors.green[400],
             },
           },
         },