Style primary button in forum

pradoslaw · Dec 6, 2024 · 3a13211 · 3a13211
1 parent e66f14d
commit 3a13211
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/resources/feature/lookAndFeel/lookAndFeel.scss b/resources/feature/lookAndFeel/lookAndFeel.scss
@@ -155,3 +155,33 @@ $forum-aside-radius:            8px;
     border-radius: 4px;
   }
 }
+
+.look-and-feel-modern {
+  .neon-primary-button {
+    border: none;
+
+    @include theme.light {
+      color:      style.$white;
+      background: style.$green-500;
+      &:hover {background: #007e2b;}
+      &:active {background: #006522;}
+      &:disabled {background: rgba(style.$green-500, 0.3);}
+    }
+
+    @include theme.dark {
+      color:      style.$neutral-400;
+      background: style.$green-500;
+      &:hover {background: #00c041;}
+      &:active {background: #00e34d;}
+      &:disabled {background: rgba(style.$green-500, 0.3);}
+    }
+  }
+}
+
+.look-and-feel-legacy {
+  .neon-primary-button {
+    @include theme.dark {
+      color: #1a1a1a;
+    }
+  }
+}
diff --git a/resources/js/components/forum/form.vue b/resources/js/components/forum/form.vue
@@ -158,7 +158,7 @@
     </div>
 
     <div class="mt-2">
-      <vue-button :disabled="isProcessing" title="Kliknij, aby zapisać (Ctrl+Enter)" class="btn btn-primary btn-sm" @click="save">
+      <vue-button :disabled="isProcessing" title="Kliknij, aby zapisać (Ctrl+Enter)" class="btn btn-primary btn-sm neon-primary-button" @click="save">
         <template v-if="post.id">Zapisz</template>
         <template v-else>Dodaj post</template>
       </vue-button>

diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
@@ -287,12 +287,6 @@ body.theme-dark {
       }
 
       form {
-        .btn.btn-primary {
-          color: #1d1d1d;
-          background-color: #789b17;
-          border: none;
-        }
-
         .btn.btn-danger {
           color: #1d1d1d;
           background-color: #9f3835;
@@ -461,11 +455,6 @@ body.theme-dark {
     }
   }
 
-  .btn.btn-primary {
-    background-color: #789b17;
-    color: #1a1a1a;
-  }
-
   .btn.btn-secondary {
     color: #dedede;
     background: #1a1a1a;

diff --git a/resources/views/forum/partials/topics.twig b/resources/views/forum/partials/topics.twig
@@ -7,7 +7,7 @@
 </ul>
 
 {% if forum is defined and not forum.is_locked %}
-  <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm float-end mt-1 mb-3">
+  <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm float-end mt-1 mb-3 neon-primary-button">
     Nowy wątek
   </a>
 {% endif %}
@@ -42,7 +42,7 @@
 </div>
 
 {% if topics.count() > 10 and forum is defined and not forum.is_locked %}
-  <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm float-end">
+  <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm float-end neon-primary-button">
     Nowy wątek
   </a>
   <div class="clearfix"></div>

diff --git a/resources/views/forum/topic.twig b/resources/views/forum/topic.twig
@@ -34,7 +34,7 @@
       <div class="page-topic-controls d-flex mb-3">
         {% if is_writeable %}
           <div class="ms-auto">
-            <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm">Nowy wątek</a>
+            <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm neon-primary-button">Nowy wątek</a>
           </div>
         {% endif %}
       </div>
@@ -120,7 +120,7 @@
 
         {% if is_writeable %}
           <div class="ms-auto">
-            <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm">Nowy wątek</a>
+            <a href="{{ route('forum.topic.submit', [forum.slug]) }}" class="btn btn-primary btn-sm neon-primary-button">Nowy wątek</a>
           </div>
         {% endif %}
       </div>