From 67ad0defce38d437082024a42735795176a3bd0d Mon Sep 17 00:00:00 2001
From: mulan xia <mulanjxia@gmail.com>
Date: Tue, 30 Jan 2024 16:05:28 -0500
Subject: [PATCH] fix commit history

---
 src/components/DiffArrow.tsx                |   2 +-
 src/layout/Footer/FooterDesktop.tsx         |   4 +-
 src/views/dialogs/DisplaySettingsDialog.tsx | 114 +++++++++++++++++++-
 3 files changed, 115 insertions(+), 5 deletions(-)

diff --git a/src/components/DiffArrow.tsx b/src/components/DiffArrow.tsx
index b140042..12ecfd4 100644
--- a/src/components/DiffArrow.tsx
+++ b/src/components/DiffArrow.tsx
@@ -52,7 +52,7 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
   ${({ direction }) =>
     ({
       right: css`
-        transform: scaleX(1);
+        transform: scaleX(1); 
       `,
       left: css`
         transform: scaleX(-1);
diff --git a/src/layout/Footer/FooterDesktop.tsx b/src/layout/Footer/FooterDesktop.tsx
index d6f3d1c..9f674b0 100644
--- a/src/layout/Footer/FooterDesktop.tsx
+++ b/src/layout/Footer/FooterDesktop.tsx
@@ -126,8 +126,8 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
 
   background-color: ${({ exchangeStatus }) =>
     ({
-      [ExchangeStatus.Degraded]: css`var(--color-warning)`,
-      [ExchangeStatus.Operational]: css`var(--color-positive)`,
+      [ExchangeStatus.Degraded]: css`var(--color-error)`,
+      [ExchangeStatus.Operational]: css`var(--color-success)`,
     }[exchangeStatus])};
 `;
 
diff --git a/src/views/dialogs/DisplaySettingsDialog.tsx b/src/views/dialogs/DisplaySettingsDialog.tsx
index 1e84c48..3c6455d 100644
--- a/src/views/dialogs/DisplaySettingsDialog.tsx
+++ b/src/views/dialogs/DisplaySettingsDialog.tsx
@@ -5,15 +5,17 @@ import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
 
 import { useStringGetter } from '@/hooks';
 
-import { AppTheme, AppColorMode, setAppTheme } from '@/state/configs';
+import { AppTheme, AppColorMode, setAppTheme, setAppColorMode } from '@/state/configs';
 import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
 
 import { STRING_KEYS } from '@/constants/localization';
+import { NumberSign } from '@/constants/numbers';
 
 import { Dialog } from '@/components/Dialog';
+import { DiffArrow } from '@/components/DiffArrow';
 import { Icon, IconName } from '@/components/Icon';
 import { HorizontalSeparatorFiller } from '@/components/Separator';
 
@@ -76,6 +78,50 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
     );
   };
 
+  const colorModeOptions = () => {
+    return (
+      <Styled.ColorPreferenceRoot value={currentColorMode}>
+        {[
+          {
+            colorMode: AppColorMode.GreenUp,
+            label: STRING_KEYS.GREEN_IS_UP,
+          },
+          {
+            colorMode: AppColorMode.RedUp,
+            label: STRING_KEYS.RED_IS_UP,
+          },
+        ].map(({ colorMode, label }) => (
+          <Styled.ColorPreferenceItem
+            key={colorMode}
+            value={colorMode}
+            onClick={() => {
+              dispatch(setAppColorMode(colorMode));
+            }}
+          >
+            <Styled.ColorPreferenceLabel>
+              <Styled.DiffArrowContainer>
+                <Styled.DiffArrow
+                  direction="up"
+                  sign={
+                    colorMode === AppColorMode.GreenUp ? NumberSign.Positive : NumberSign.Negative
+                  }
+                />
+                <Styled.DiffArrow
+                  direction="down"
+                  sign={
+                    colorMode === AppColorMode.GreenUp ? NumberSign.Negative : NumberSign.Positive
+                  }
+                />
+              </Styled.DiffArrowContainer>
+              {stringGetter({ key: label })}
+            </Styled.ColorPreferenceLabel>
+            <Styled.DotIndicator $selected={currentColorMode === colorMode} />
+          </Styled.ColorPreferenceItem>
+        ))}
+      </Styled.ColorPreferenceRoot>
+    );
+  };
+
   return (
     <Dialog
       isOpen
@@ -86,6 +132,10 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
         {sectionHeader(stringGetter({ key: STRING_KEYS.THEME }))}
         {themePanels()}
       </Styled.Section>
+      <Styled.Section>
+        {sectionHeader(stringGetter({ key: STRING_KEYS.DIRECTION_COLOR_PREFERENCE }))}
+        {colorModeOptions()}
+      </Styled.Section>
     </Dialog>
   );
 };
@@ -111,6 +161,11 @@ Styled.AppThemeRoot = styled(Root)`
   grid-template-columns: 1fr 1fr;
 `;
 
+Styled.ColorPreferenceRoot = styled(Root)`
+  ${gridStyle}
+  grid-template-columns: 1fr;
+`;
+
 Styled.Item = styled(Item)`
   --border-color: var(--color-border);
   --item-padding: 0.75rem;
@@ -121,9 +176,19 @@ Styled.Item = styled(Item)`
 
   border: solid var(--border-width) var(--border-color);
   border-radius: 0.875rem;
+
   padding: var(--item-padding);
 `;
 
+Styled.ColorPreferenceItem = styled(Styled.Item)`
+  &[data-state='checked'] {
+    background-color: var(--color-layer-4);
+  }
+
+  ${layoutMixins.row}
+  justify-content: space-between;
+`;
+
 Styled.AppThemeItem = styled(Styled.Item)<{ backgroundcolor: string; gridcolor: string }>`
   ${({ backgroundcolor, gridcolor }) => css`
     --themePanel-backgroundColor: ${backgroundcolor};
@@ -134,6 +199,7 @@ Styled.AppThemeItem = styled(Styled.Item)<{ backgroundcolor: string; gridcolor:
   flex-direction: column;
   position: relative;
   width: 100%;
+
   background-color: var(--themePanel-backgroundColor);
 
   &::before {
@@ -170,6 +236,26 @@ Styled.Image = styled.img`
   z-index: 1;
 `;
 
+Styled.ColorPreferenceLabel = styled.div`
+  ${layoutMixins.inlineRow};
+  gap: 1ch;
+`;
+
+Styled.DiffArrowContainer = styled.div`
+  ${layoutMixins.column}
+  gap: 0.5ch;
+`;
+
+Styled.DiffArrow = styled(DiffArrow)`
+  --diffArrow-color-positive: var(--color-success);
+  --diffArrow-color-negative: var(--color-error);
+
+  svg {
+    width: 0.75em;
+    height: 0.75em;
+  }
+`;
+
 const indicatorStyle = css`
   --indicator-size: 1.25rem;
   --icon-size: 0.5rem;
@@ -183,9 +269,33 @@ const indicatorStyle = css`
   justify-content: center;
 `;
 
+Styled.DotIndicator = styled.div<{ $selected: boolean }>`
+  ${indicatorStyle}
+  --background-color: var(--color-layer-2);
+  --border-color: var(--color-border);
+
+  ${({ $selected }) =>
+    $selected &&
+    css`
+      --background-color: var(--color-accent);
+      --border-color: var(--color-accent);
+
+      &::after {
+        content: '';
+        display: block;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        background-color: var(--color-layer-2);
+        border-radius: 50%;
+      }
+    `}
+
+  background-color: var(--background-color);
+  border: solid var(--border-width) var(--border-color);
+`;
+
 Styled.CheckIndicator = styled(Indicator)`
   ${indicatorStyle}
-
   position: absolute;
   bottom: var(--item-padding);
   right: var(--item-padding);