feat: Adding Grove logo and updating expand/collapse sidebar icon

pokt-foundation · Oct 31, 2023 · 0eeb155 · 0eeb155
1 parent 20944ae
commit 0eeb155
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 5 deletions.
diff --git a/app/components/GroveLogo/GroveLogo.tsx b/app/components/GroveLogo/GroveLogo.tsx
@@ -0,0 +1,61 @@
+import React from "react"
+
+type GroveLogoProps = {
+  icon?: boolean
+}
+
+function GroveLogo({ icon }: GroveLogoProps) {
+  return icon ? (
+    <svg
+      fill="none"
+      height="18"
+      viewBox="0 0 14 18"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="#808B95">
+        <path d="M7 5.679V4.04a.6.6 0 00-.3-.52L4.477 2.233a.904.904 0 00-1.357.781V4.66a.6.6 0 00.302.52l2.224 1.28a.904.904 0 001.355-.782v.001z"></path>
+        <path d="M7 8.544V6.902a.6.6 0 01.299-.52l3.353-1.96a.903.903 0 011.36.78v1.677a.602.602 0 01-.302.521L8.355 9.326A.903.903 0 017 8.544z"></path>
+        <path d="M7 2.853v-1.64a.6.6 0 01.296-.518l.958-.567a.903.903 0 011.364.776v1.654a.601.601 0 01-.3.521l-.962.555A.904.904 0 017 2.853z"></path>
+        <path d="M6.987 11.376V9.739a.6.6 0 00-.298-.519L1.665 6.287a.904.904 0 00-1.36.779v1.666c0 .214.115.413.3.52l5.026 2.905a.904.904 0 001.356-.781z"></path>
+        <path d="M7 14.211v-1.635a.6.6 0 01.299-.52l5.03-2.936a.904.904 0 011.36.776l.005 1.659a.602.602 0 01-.3.523l-5.037 2.915A.904.904 0 017 14.212z"></path>
+        <path d="M6.229 14.6l.481.293c.18.109.29.303.29.514v1.69a.904.904 0 01-1.359.78l-.486-.284a.601.601 0 01-.299-.52v-1.702a.904.904 0 011.373-.77z"></path>
+      </g>
+    </svg>
+  ) : (
+    <svg
+      fill="none"
+      height="12"
+      viewBox="0 0 39 12"
+      width="39"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M24.754.658h-2.07l1.75 8.065h4.055l1.75-8.065h-2.043L26.708 7.53c-.054.249-.412.249-.465 0L24.753.658z"
+        fill="#808B95"
+      ></path>
+      <path
+        clipRule="evenodd"
+        d="M22.524 4.692c0 2.227-1.815 4.032-4.055 4.032-2.24 0-4.055-1.805-4.055-4.032 0-2.228 1.816-4.033 4.055-4.033 2.24 0 4.055 1.805 4.055 4.033zm-1.88.017a2.152 2.152 0 01-2.158 2.146 2.153 2.153 0 01-2.158-2.146c0-1.184.966-2.146 2.158-2.146s2.159.961 2.159 2.146z"
+        fill="#808B95"
+        fillRule="evenodd"
+      ></path>
+      <path
+        d="M11.684 3.939v4.793H9.69V3.035A2.372 2.372 0 0112.068.67h2.346v1.983l-2.85-.014a.188.188 0 00-.171.268l.107.223c.121.253.184.528.184.809z"
+        fill="#808B95"
+      ></path>
+      <path
+        clipRule="evenodd"
+        d="M8.416.66H6.422v.985c0 .111-.144.164-.223.086A3.621 3.621 0 003.622.66C1.622.66 0 2.272 0 4.26c0 1.99 1.622 3.602 3.622 3.602a3.62 3.62 0 002.577-1.071c.079-.08.223-.026.223.085v2.127c0 .197-.16.355-.357.355H1.137v1.983h4.901a2.372 2.372 0 002.379-2.365V.66zM4.281 6.442c1.227 0 2.157-.927 2.157-2.147 0-1.22-.995-2.21-2.222-2.21-1.227 0-2.222.989-2.222 2.21 0 1.22 1.059 2.147 2.287 2.147z"
+        fill="#808B95"
+        fillRule="evenodd"
+      ></path>
+      <path
+        d="M38.182 4.888c.153 0 .28-.12.278-.272a3.944 3.944 0 00-.089-.747c-.392-1.805-2.03-3.21-3.965-3.21a4.054 4.054 0 00-3.97 3.203 4.064 4.064 0 00-.085.83c0 2.227 1.815 4.032 4.055 4.032a4.056 4.056 0 003.817-2.666h-2.116c-.397.5-1.011.82-1.701.82a2.165 2.165 0 01-2.161-1.988h4.621l1.317-.001zm-1.93-1.02h-2.558c-.281 0-.56.064-.813.185l-.224.106a.189.189 0 01-.27-.167.603.603 0 01.087-.289c.047-.079.098-.155.155-.229.41-.536 1.07-.909 1.776-.909a2.169 2.169 0 011.992 1.305l-.146-.001z"
+        fill="#808B95"
+      ></path>
+    </svg>
+  )
+}
+
+export default GroveLogo
diff --git a/app/components/GroveLogo/index.ts b/app/components/GroveLogo/index.ts
@@ -0,0 +1,3 @@
+import GroveLogo from "./GroveLogo"
+export * from "./GroveLogo"
+export default GroveLogo
diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx
@@ -1,18 +1,18 @@
 import { Divider } from "@mantine/core"
-import { MediaQuery, Navbar, ScrollArea } from "@pokt-foundation/pocket-blocks"
-import { useParams } from "@remix-run/react"
+import { Box, MediaQuery, Navbar, ScrollArea } from "@pokt-foundation/pocket-blocks"
+import { Link, useParams } from "@remix-run/react"
 import React, { useMemo, useState } from "react"
 import {
   LuBarChart4,
   LuBook,
-  LuChevronsLeft,
-  LuChevronsRight,
   LuDiamond,
   LuLifeBuoy,
+  LuPanelLeft,
   LuPlus,
   LuSettings,
 } from "react-icons/lu"
 import AccountSelect from "~/components/AccountSelect"
+import GroveLogo from "~/components/GroveLogo"
 import {
   InternalLink,
   ExternalLink,
@@ -125,13 +125,19 @@ export const Sidebar = ({ apps, hidden, canCreateApps, accounts }: SidebarProps)
         <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
           <Navbar.Section>
             <NavButton
-              icon={collapsed ? LuChevronsRight : LuChevronsLeft}
+              icon={LuPanelLeft}
               iconOnly={collapsed}
               label={`${collapsed ? "Expand" : "Collapse"} sidebar`}
               onClick={() => setCollapsed(!collapsed)}
             />
           </Navbar.Section>
         </MediaQuery>
+
+        <Box ml="md" mt={30}>
+          <Link to={`/account/${accountId}`}>
+            <GroveLogo icon={collapsed} />
+          </Link>
+        </Box>
       </>
     </Navbar>
   )