From 76b50b6f9212329820edc1809aca808b0885bad3 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Wed, 21 Aug 2024 12:44:08 +0500
Subject: [PATCH] fix(according-to-figma): setting modal appearance tab

---
 .../ActionsToolbar/GraphViewControl/index.tsx | 11 ++-
 src/components/App/ActionsToolbar/index.tsx   |  2 +-
 .../SettingsView/Appearance/index.tsx         |  4 +-
 .../common/GraphViewControl/index.tsx         | 74 +++++++++++++++++++
 src/utils/colors/index.tsx                    |  1 +
 5 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 src/components/common/GraphViewControl/index.tsx

diff --git a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
index 16eacaf5a..6b0a5fe70 100644
--- a/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
+++ b/src/components/App/ActionsToolbar/GraphViewControl/index.tsx
@@ -47,13 +47,15 @@ const Wrapper = styled(Flex).attrs({
   align: 'center',
   justify: 'space-between',
 })`
-  padding: 6px 6px 6px 11px;
-  background: ${colors.BG1};
-  border-radius: 200px;
+  width: 447px;
+  height: 48px;
+  background: ${colors.appearanceBg};
+  border-radius: 6px;
   .icon {
     color: ${colors.GRAY6};
     font-size: 20px;
     cursor: pointer;
+    padding: 12px 20px;
 
     &:hover {
       color: ${colors.GRAY3};
@@ -65,6 +67,9 @@ const Wrapper = styled(Flex).attrs({
 
     &.active {
       color: ${colors.white};
+      background: ${colors.primaryBlue};
+      padding: 12px 20px;
+      border-radius: 6px;
     }
   }
 
diff --git a/src/components/App/ActionsToolbar/index.tsx b/src/components/App/ActionsToolbar/index.tsx
index 9dd6238c9..47c3bccf1 100644
--- a/src/components/App/ActionsToolbar/index.tsx
+++ b/src/components/App/ActionsToolbar/index.tsx
@@ -6,7 +6,7 @@ import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { CameraRecenterControl } from './CameraRecenterControl'
-import { GraphViewControl } from './GraphViewControl'
+import { GraphViewControl } from '~/components/common/GraphViewControl'
 import { PlayerControl } from './PlayerControl'
 import { UniverseQuestionControl } from './UniverseQuestionControl'
 
diff --git a/src/components/SettingsModal/SettingsView/Appearance/index.tsx b/src/components/SettingsModal/SettingsView/Appearance/index.tsx
index cc9c958ca..02615b79f 100644
--- a/src/components/SettingsModal/SettingsView/Appearance/index.tsx
+++ b/src/components/SettingsModal/SettingsView/Appearance/index.tsx
@@ -27,7 +27,8 @@ export const Appearance: FC<Props> = ({ onClose }) => {
     <Wrapper direction="column">
       <StyledText>Default graph view:</StyledText>
       <GraphViewControl />
-      <Flex mt={308} py={24}>
+
+      <Flex mt={308} py={8}>
         <Button
           color="secondary"
           disabled={loading}
@@ -61,6 +62,7 @@ const StyledText = styled(Text)`
   font-family: Barlow;
   font-size: 13px;
   font-weight: 400;
+  color: ${colors.lightGray};
 `
 
 const IconWrapper = styled.span`
diff --git a/src/components/common/GraphViewControl/index.tsx b/src/components/common/GraphViewControl/index.tsx
new file mode 100644
index 000000000..16eacaf5a
--- /dev/null
+++ b/src/components/common/GraphViewControl/index.tsx
@@ -0,0 +1,74 @@
+import clsx from 'clsx'
+import { ReactElement } from 'react'
+import styled from 'styled-components'
+import { useShallow } from 'zustand/react/shallow'
+import BubbleChartIcon from '~/components/Icons/BubbleChartIcon'
+import CommunitiesIcon from '~/components/Icons/CommunitiesIcon'
+import GrainIcon from '~/components/Icons/GrainIcon'
+import PublicIcon from '~/components/Icons/PublicIcon'
+import { Flex } from '~/components/common/Flex'
+import { GraphStyle, graphStyles, useGraphStore } from '~/stores/useGraphStore'
+import { colors } from '~/utils/colors'
+
+interface IconsMapper {
+  split: ReactElement
+  force: ReactElement
+  sphere: ReactElement
+  earth: ReactElement
+}
+
+const IconsMapper = {
+  split: <GrainIcon />,
+  force: <CommunitiesIcon />,
+  sphere: <BubbleChartIcon />,
+  earth: <PublicIcon />,
+}
+
+export const GraphViewControl = () => {
+  const [graphStyle, setGraphStyle] = useGraphStore(useShallow((s) => [s.graphStyle, s.setGraphStyle]))
+
+  const changeGraphType = (val: GraphStyle) => {
+    setGraphStyle(val)
+  }
+
+  return (
+    <Wrapper direction="column">
+      {graphStyles.map((i) => (
+        <Flex key={i} className={clsx('icon', { active: graphStyle === i })} onClick={() => changeGraphType(i)}>
+          {IconsMapper[i]}
+        </Flex>
+      ))}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled(Flex).attrs({
+  direction: 'row',
+  align: 'center',
+  justify: 'space-between',
+})`
+  padding: 6px 6px 6px 11px;
+  background: ${colors.BG1};
+  border-radius: 200px;
+  .icon {
+    color: ${colors.GRAY6};
+    font-size: 20px;
+    cursor: pointer;
+
+    &:hover {
+      color: ${colors.GRAY3};
+    }
+
+    &:active {
+      color: ${colors.white};
+    }
+
+    &.active {
+      color: ${colors.white};
+    }
+  }
+
+  .icon + .icon {
+    margin-left: 20px;
+  }
+`
diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
index fd85d365e..27a2a7f58 100644
--- a/src/utils/colors/index.tsx
+++ b/src/utils/colors/index.tsx
@@ -1,5 +1,6 @@
 export const colors = {
   black: 'rgb(0, 0, 0)',
+  appearanceBg: 'rgba(60, 64, 83, 0.3)',
   bluePressState: 'rgb(57, 97, 220)',
   blueTextAccent: 'rgb(130, 180, 255)',
   body: 'rgb(21, 30, 39)',