From 683ebaa9873519357dee3c3efc79a80f70a748de Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Thu, 5 Dec 2024 17:45:16 +0100
Subject: [PATCH] Style forum posts in new look and feel

---
 .../feature/lookAndFeel/lookAndFeel.scss      | 31 +++++++++++++++----
 resources/feature/theme/theme.scss            | 10 +++++-
 resources/js/components/forum/post.vue        |  8 ++---
 resources/sass/core/_dark_topic.scss          |  2 --
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
index 17d67f829..19964147f 100644
--- a/resources/feature/lookAndFeel/lookAndFeel.scss
+++ b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -1,13 +1,32 @@
 @use "../theme/theme" as theme;
 
-.look-and-feel-legacy {
-  @include theme.property(--body-background, #fafafa, #252525);
-}
+$body-background: (light: #f0f2f5, dark: #121314);
+$post-background-body: (light: white, dark: #181a1b);
+$post-background-header: (light: none, dark: none);
 
 .look-and-feel-modern {
-  @include theme.property(--body-background, #f0f2f5, #121314);
+  @include theme.var(--body-background, $body-background);
+  @include theme.var(--post-background-body, $post-background-body);
+  @include theme.var(--post-background-header, $post-background-header);
 }
 
-body {
-  background: var(--body-background);
+.look-and-feel-legacy {
+  @include theme.var(--body-background, (light: #fafafa, dark: #252525));
+  @include theme.var(--post-background-body, (light: white, dark: rgb(26, 26, 26)));
+  @include theme.var(--post-background-header, (light: rgba(51, 51, 51, 0.03), dark: rgba(255, 255, 255, 0.03)));
+}
+
+@include theme.both {
+  body {
+    background: var(--body-background);
+  }
+
+  .neon-post {
+    background: var(--post-background-body);
+
+    .neon-post-header,
+    .neon-post-footer {
+      background: var(--post-background-header);
+    }
+  }
 }
diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
index 79a69fd7e..d26a4f01c 100644
--- a/resources/feature/theme/theme.scss
+++ b/resources/feature/theme/theme.scss
@@ -14,7 +14,7 @@
   }
 }
 
-@mixin theme {
+@mixin both {
   /**
    * The dark() and light() mixins increase selector specificity.
    * In some cases, it's necessary to apply a common style to both
@@ -38,6 +38,10 @@
   }
 }
 
+@mixin var($property, $themeMap) {
+  @include property($property, map-get($themeMap, 'light'), map-get($themeMap, 'dark'));
+}
+
 @mixin color-theme($light, $dark) {
   @include property(color, $light, $dark);
 }
@@ -50,3 +54,7 @@
 @mixin background-theme($light, $dark) {
   @include background($light, $dark)
 }
+
+@mixin theme {
+  @include both {@content}
+}
diff --git a/resources/js/components/forum/post.vue b/resources/js/components/forum/post.vue
index 87452878c..9cf8ac0f8 100644
--- a/resources/js/components/forum/post.vue
+++ b/resources/js/components/forum/post.vue
@@ -9,7 +9,7 @@
   </div>
   <div v-else
        :id="anchor"
-       class="card card-post"
+       class="card card-post neon-post"
        :class="[
          {'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed': isCollapsed},
          postIndentCssClasses
@@ -29,7 +29,7 @@
       <vue-icon name="postAuthorBlocked"/>
       Treść posta została ukryta, ponieważ autorem jest zablokowany przez Ciebie użytkownik.
     </div>
-    <div :class="{'collapse': isCollapsed, 'd-lg-block': !isCollapsed}" class="card-header d-none">
+    <div :class="{'collapse': isCollapsed, 'd-lg-block': !isCollapsed}" class="card-header d-none neon-post-header">
       <div class="row">
         <div class="col-2">
           <h5 class="mb-0 post-author">
@@ -261,7 +261,7 @@
       </div>
     </div>
 
-    <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!hidden && is_mode_tree && scoreDescriptionVisible">
+    <div :class="{'collapse': isCollapsed}" class="card-footer neon-post-footer" v-if="!hidden && is_mode_tree && scoreDescriptionVisible">
       <div class="row">
         <div class="d-none d-lg-block col-lg-2"/>
         <div class="col-12 d-flex col-lg-10 py-1">
@@ -272,7 +272,7 @@
       </div>
     </div>
 
-    <div :class="{'collapse': isCollapsed}" class="card-footer" v-if="!authorBlocked">
+    <div :class="{'collapse': isCollapsed}" class="card-footer neon-post-footer" v-if="!authorBlocked">
       <div class="row">
         <div class="d-none d-lg-block col-lg-2"/>
         <div class="col-12 d-flex col-lg-10">
diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
index 2ba69f1b2..ae7c5ca5b 100644
--- a/resources/sass/core/_dark_topic.scss
+++ b/resources/sass/core/_dark_topic.scss
@@ -56,7 +56,6 @@ body.theme-dark {
     border-color: #2f2f2f;
 
     .card-header {
-      background: rgb(255, 255, 255, 0.03);
       border-bottom: 1px solid #2f2f2f;
     }
   }
@@ -288,7 +287,6 @@ body.theme-dark {
         }
 
         .card-footer {
-          background: rgb(255, 255, 255, 0.03);
           border-top: 1px solid #2f2f2f;
 
           button,