Merge pull request #2084 from MahtabBukhari/Setting-modal-Appearance-…

…tab-should-be-according-to-Figma

Setting modal Appearance tab should be according to Figma

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;
     }
   }
 

src/components/App/ActionsToolbar/index.tsx

@@ -4,7 +4,7 @@ import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { CameraRecenterControl } from './CameraRecenterControl'
-import { GraphViewControl } from './GraphViewControl'
+import { GraphViewControl } from '~/components/common/GraphViewControl'
 import { PlayerControl } from './PlayerControl'
 
 export const ActionsToolbar = () => {

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`

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;
+  }
+`

src/utils/colors/index.tsx

@@ -1,5 +1,6 @@
 export const colors = {
   black: 'rgb(0, 0, 0)',
+  appearanceBg: 'rgba(60, 64, 83, 0.3)',
   disableBtn: 'rgba(35, 37, 47, 0.8)',
   bluePressState: 'rgb(57, 97, 220)',
   blueTextAccent: 'rgb(130, 180, 255)',