From 1714b9217d443df0c5da9b2bd79413c0ae7c812e Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Tue, 3 Dec 2024 09:05:29 +1300
Subject: [PATCH] update colours to use system color in forced-color mode

---
 frontend/assets/style/_mixins.scss                     |  2 +-
 frontend/views/components/modal/ModalClose.vue         |  9 ++++-----
 .../chatroom/image-viewer/PreviewImageArea.vue         | 10 +++++-----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss
index fd9093b39..4e92f11e3 100644
--- a/frontend/assets/style/_mixins.scss
+++ b/frontend/assets/style/_mixins.scss
@@ -55,7 +55,7 @@ $payment-table-desktop-bp: 1290px;
   }
 }
 
-@mixin forced-color-mode {
+@mixin if-forced-color-mode {
   @media (forced-colors: active) {
     @content;
   }
diff --git a/frontend/views/components/modal/ModalClose.vue b/frontend/views/components/modal/ModalClose.vue
index 6752f3f01..b84069413 100644
--- a/frontend/views/components/modal/ModalClose.vue
+++ b/frontend/views/components/modal/ModalClose.vue
@@ -37,8 +37,8 @@ export default ({
   cursor: pointer;
   background-color: $general_1;
 
-  @include forced-color-mode {
-    border: 1px solid $white;
+  @include if-forced-color-mode {
+    border: 1px solid buttonborder;
   }
 
   @include tablet {
@@ -91,10 +91,9 @@ export default ({
     transition: transform 0.15s ease-in;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     transform-origin: center center;
-    forced-color-adjust: none;
 
-    @include forced-color-mode {
-      background-color: $white;
+    @include if-forced-color-mode {
+      background-color: buttonborder;
     }
   }
 
diff --git a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
index 45f65ddf6..2cf7fbab3 100644
--- a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
+++ b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
@@ -489,8 +489,8 @@ img.c-preview-image {
     border-radius: 0.5rem;
     opacity: 0.675;
 
-    @include forced-color-mode {
-      border: 1px solid $white;
+    @include if-forced-color-mode {
+      border: 1px solid buttonborder;
       opacity: 1;
     }
   }
@@ -523,10 +523,10 @@ img.c-preview-image {
   ::v-deep input.sInput {
     forced-color-adjust: none;
 
-    @include forced-color-mode {
+    @include if-forced-color-mode {
       background: none;
-      border: 1px solid $white;
-      color: $white;
+      border: 1px solid buttonborder;
+      color: buttonborder;
     }
   }
 }