From b15738ac95d807c8e0842a55ad1f09de63a9e9ff Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 29 Apr 2022 13:27:30 +0300
Subject: [PATCH] removed logo muted

---
 www/reference/src/components/ColorModeToggler/index.js | 8 ++++----
 www/reference/src/components/CopyToClipboard/index.js  | 5 +++--
 www/reference/src/components/icons/github.js           | 4 ++--
 www/reference/src/components/side-bar/index.js         | 8 ++------
 www/reference/src/templates/reference-page.js          | 2 +-
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/www/reference/src/components/ColorModeToggler/index.js b/www/reference/src/components/ColorModeToggler/index.js
index 63a2a74489..7b990bc539 100644
--- a/www/reference/src/components/ColorModeToggler/index.js
+++ b/www/reference/src/components/ColorModeToggler/index.js
@@ -7,18 +7,18 @@ import { ThemeToggler } from 'gatsby-plugin-dark-mode'
 import { useColorMode } from 'theme-ui'
 
 export default function ColorModeToggler () {
-  const [colorMode, setColorMode] = useColorMode()
+  const [, setColorMode] = useColorMode()
   
   return (
     <ThemeToggler>
         {({ theme, toggleTheme }) => (
           <button onClick={() => {
-            const mode = theme == 'dark' ? 'light' : 'dark';
+            const mode = theme === 'dark' ? 'light' : 'dark';
             toggleTheme(mode);
             setColorMode(mode);
           }} className="dark-mode-toggler">
-            {theme == "light" && <LightMode />}
-            {theme == "dark" && <DarkMode />}
+            {theme === "light" && <LightMode />}
+            {theme === "dark" && <DarkMode />}
           </button>
         )}
     </ThemeToggler>
diff --git a/www/reference/src/components/CopyToClipboard/index.js b/www/reference/src/components/CopyToClipboard/index.js
index 44299513f6..902c4c799c 100644
--- a/www/reference/src/components/CopyToClipboard/index.js
+++ b/www/reference/src/components/CopyToClipboard/index.js
@@ -1,9 +1,10 @@
+import { Box, Text } from "theme-ui"
 import React, { useState } from "react"
-import { Flex, Box, Text } from "theme-ui"
+
 import Clipboard from '../icons/clipboard'
 import ReactTooltip from "react-tooltip"
-import styled from "@emotion/styled"
 import copy from 'copy-to-clipboard'
+import styled from "@emotion/styled"
 
 const StyledTooltip = ({id, text}) => {
   const StyledTooltip = styled(ReactTooltip)`
diff --git a/www/reference/src/components/icons/github.js b/www/reference/src/components/icons/github.js
index 34bb41fc3c..965a43a260 100644
--- a/www/reference/src/components/icons/github.js
+++ b/www/reference/src/components/icons/github.js
@@ -5,11 +5,11 @@ import React from "react"
 import { useColorMode } from 'theme-ui'
 
 const GitHub = () => {
-  const [colorMode, setColorMode] = useColorMode()
+  const [colorMode,] = useColorMode()
 
   return (
     <Image
-      src={colorMode == 'light' ? Logo : LogoLight}
+      src={colorMode === 'light' ? Logo : LogoLight}
       sx={{
         height: "24px",
       }}
diff --git a/www/reference/src/components/side-bar/index.js b/www/reference/src/components/side-bar/index.js
index 3d9c11fbf6..fd3cd24299 100644
--- a/www/reference/src/components/side-bar/index.js
+++ b/www/reference/src/components/side-bar/index.js
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react"
 
 import Logo from "../../assets/logo.svg"
 import LogoDark from "../../assets/logo-dark.svg"
-import LogoMuted from "../../assets/logo-muted.svg"
 import SideBarItem from "./sidebar-item"
 import SideBarSelector from "./sidebar-selector"
 import { navigate } from "gatsby"
@@ -28,7 +27,7 @@ const SideBarFade = styled(Box)`
 
 const Sidebar = ({ data, api }) => {
   const [scrollPos, setScrollPos] = useState(0)
-  const [colorMode, setColorMode] = useColorMode()
+  const [colorMode,] = useColorMode()
 
   useEffect(() => {
     const nav = document.querySelector("#nav")
@@ -68,7 +67,7 @@ const Sidebar = ({ data, api }) => {
       >
         <Flex>
           <Image
-            src={colorMode == 'light' ? Logo : LogoDark}
+            src={colorMode === 'light' ? Logo : LogoDark}
             alt="Medusa logo"
             onClick={() => navigate("/")}
             sx={{
@@ -100,9 +99,6 @@ const Sidebar = ({ data, api }) => {
           return <SideBarItem item={s} key={i} />
         })}
       </Flex>
-      <Flex sx={{ py: 4, px: 4, borderTop: "1px solid var(--theme-ui-colors-separator)" }}>
-        <Image src={LogoMuted} alt="Medusa Type" sx={{ height: "10px" }} />
-      </Flex>
     </SideBarContainer>
   )
 }
diff --git a/www/reference/src/templates/reference-page.js b/www/reference/src/templates/reference-page.js
index 4b93cb1eb6..50cd4a9e6c 100644
--- a/www/reference/src/templates/reference-page.js
+++ b/www/reference/src/templates/reference-page.js
@@ -9,7 +9,7 @@ import { convertToKebabCase } from "../utils/convert-to-kebab-case"
 export default function ReferencePage({
   pageContext: { data, api, title, description, to },
 }) {
-  const { setApi, goTo, metadata, currentSection, currentSectionObj } = useContext(NavigationContext)
+  const { setApi, goTo, metadata, currentSectionObj } = useContext(NavigationContext)
   const [siteData, setSiteData] = useState({
     title: title,
     description: description,