Fix sidebar settings icon (#270)

dguenther · web-flow · commit 7585f6af4b09 · 2024-10-10T16:45:28.000-04:00
diff --git a/renderer/components/AppSettings/SidebarBottomLinks/BaseLink.tsx b/renderer/components/AppSettings/SidebarBottomLinks/BaseLink.tsx
@@ -1,7 +1,6 @@
 import { Box, Flex, FlexProps, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
-import { FaChevronRight } from "react-icons/fa";
 
 import { COLORS } from "@/ui/colors";
 
@@ -40,7 +39,8 @@ export function BaseLink({ title, icon, href, ...rest }: Props) {
       onClick={() => {
         router.push(href);
       }}
-      color={COLORS.GRAY_MEDIUM}
+      color={"#989898"}
+      role="group"
       _hover={{
         color: COLORS.BLACK,
       }}
@@ -55,15 +55,15 @@ export function BaseLink({ title, icon, href, ...rest }: Props) {
     >
       <Flex alignItems="center" justifyContent="center">
         <Box
-          color={COLORS.GRAY_MEDIUM}
+          color={"#989898"}
           _dark={{
-            color: "#ADAEB4",
+            color: COLORS.DARK_MODE.GRAY_LIGHT,
           }}
         >
           {icon}
         </Box>
         <Text
-          ml={18}
+          ml={15}
           mr={3}
           as="span"
           display={{
@@ -84,8 +84,29 @@ export function BaseLink({ title, icon, href, ...rest }: Props) {
           base: "none",
           md: "block",
         }}
+        color={COLORS.GRAY_MEDIUM}
+        _groupHover={{
+          color: COLORS.BLACK,
+          _dark: {
+            color: COLORS.WHITE,
+          },
+        }}
+        _dark={{
+          color: COLORS.DARK_MODE.GRAY_LIGHT,
+        }}
       >
-        <FaChevronRight fontSize="0.6em" />
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.96877 7L5.46877 10.5L4.6521 9.68333L7.33543 7L4.6521 4.31667L5.46877 3.5L8.96877 7Z"
+            fill="currentColor"
+          />
+        </svg>
       </Box>
     </Flex>
   );
diff --git a/renderer/components/AppSettings/SidebarBottomLinks/ReleaseNotesLink.tsx b/renderer/components/AppSettings/SidebarBottomLinks/ReleaseNotesLink.tsx
@@ -16,9 +16,15 @@ export function ReleaseNotesLink(props: FlexProps) {
     <BaseLink
       title={formatMessage(messages.title)}
       icon={
-        <svg width="11" height="13" viewBox="0 0 11 13" fill="none">
+        <svg
+          width="17"
+          height="14"
+          viewBox="0 0 17 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
-            d="M2.92297 13V11.4617L7.67675 6.78167L9.23934 8.32L4.48556 13H2.92297ZM0 8.45V7.15H3.60248V8.45H0ZM10.1857 7.38833L8.62311 5.85L9.26135 5.22167C9.37873 5.10611 9.53278 5.04833 9.72352 5.04833C9.91426 5.04833 10.0683 5.10611 10.1857 5.22167L10.8239 5.85C10.9413 5.96556 11 6.11722 11 6.305C11 6.49278 10.9413 6.64444 10.8239 6.76L10.1857 7.38833ZM0 4.875V3.575H7.34388V4.875H0ZM0 1.3V0H10.3439V1.3H0Z"
+            d="M8.41816 14V12.3433L13.4691 7.30333L15.1293 8.96L10.0784 14H8.41816ZM0 9.1V7.7H7.01513V9.1H0ZM16.1348 7.95667L14.4746 6.3L15.1527 5.62333C15.2774 5.49889 15.4411 5.43667 15.6437 5.43667C15.8464 5.43667 16.0101 5.49889 16.1348 5.62333L16.8129 6.3C16.9376 6.42444 17 6.58778 17 6.79C17 6.99222 16.9376 7.15556 16.8129 7.28L16.1348 7.95667ZM0 5.25V3.85H10.9904V5.25H0ZM0 1.4V0H10.9904V1.4H0Z"
             fill="currentColor"
           />
         </svg>
diff --git a/renderer/components/AppSettings/SidebarBottomLinks/SettingsLink.tsx b/renderer/components/AppSettings/SidebarBottomLinks/SettingsLink.tsx
@@ -1,4 +1,4 @@
-import { FlexProps } from "@chakra-ui/react";
+import { Box, FlexProps } from "@chakra-ui/react";
 import { defineMessages, useIntl } from "react-intl";
 
 import { BaseLink } from "./BaseLink";
@@ -16,12 +16,20 @@ export function SettingsLink(props: FlexProps) {
     <BaseLink
       title={formatMessage(messages.title)}
       icon={
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <path
-            d="M7 14C6.02 14 5.10417 13.8162 4.2525 13.4488C3.40083 13.0813 2.66 12.5825 2.03 11.9525C1.4 11.3225 0.904167 10.5787 0.5425 9.72125C0.180833 8.86375 0 7.945 0 6.965C0 5.985 0.180833 5.07208 0.5425 4.22625C0.904167 3.38042 1.4 2.6425 2.03 2.0125C2.66 1.3825 3.40083 0.889583 4.2525 0.53375C5.10417 0.177917 6.02 0 7 0C7.98 0 8.89583 0.177917 9.7475 0.53375C10.5992 0.889583 11.34 1.3825 11.97 2.0125C12.6 2.6425 13.0958 3.38042 13.4575 4.22625C13.8192 5.07208 14 5.985 14 6.965C14 7.945 13.8192 8.86375 13.4575 9.72125C13.0958 10.5787 12.6 11.3225 11.97 11.9525C11.34 12.5825 10.5992 13.0813 9.7475 13.4488C8.89583 13.8162 7.98 14 7 14ZM7 12.985C7.40833 12.565 7.74958 12.0837 8.02375 11.5413C8.29792 10.9987 8.5225 10.3542 8.6975 9.6075H5.32C5.48333 10.3075 5.70208 10.9375 5.97625 11.4975C6.25042 12.0575 6.59167 12.5533 7 12.985ZM5.5125 12.775C5.22083 12.3317 4.97 11.8533 4.76 11.34C4.55 10.8267 4.375 10.2492 4.235 9.6075H1.61C2.05333 10.4358 2.56667 11.0863 3.15 11.5588C3.73333 12.0312 4.52083 12.4367 5.5125 12.775ZM8.505 12.7575C9.345 12.4892 10.1004 12.0867 10.7712 11.55C11.4421 11.0133 11.9817 10.3658 12.39 9.6075H9.7825C9.63083 10.2375 9.45292 10.8092 9.24875 11.3225C9.04458 11.8358 8.79667 12.3142 8.505 12.7575ZM1.26 8.5575H4.0425C4.0075 8.2425 3.98708 7.95958 3.98125 7.70875C3.97542 7.45792 3.9725 7.21 3.9725 6.965C3.9725 6.67333 3.97833 6.41375 3.99 6.18625C4.00167 5.95875 4.025 5.705 4.06 5.425H1.26C1.17833 5.705 1.12292 5.95583 1.09375 6.1775C1.06458 6.39917 1.05 6.66167 1.05 6.965C1.05 7.26833 1.06458 7.53958 1.09375 7.77875C1.12292 8.01792 1.17833 8.2775 1.26 8.5575ZM5.1275 8.5575H8.89C8.93667 8.19583 8.96583 7.90125 8.9775 7.67375C8.98917 7.44625 8.995 7.21 8.995 6.965C8.995 6.73167 8.98917 6.50708 8.9775 6.29125C8.96583 6.07542 8.93667 5.78667 8.89 5.425H5.1275C5.08083 5.78667 5.05167 6.07542 5.04 6.29125C5.02833 6.50708 5.0225 6.73167 5.0225 6.965C5.0225 7.21 5.02833 7.44625 5.04 7.67375C5.05167 7.90125 5.08083 8.19583 5.1275 8.5575ZM9.94 8.5575H12.74C12.8217 8.2775 12.8771 8.01792 12.9062 7.77875C12.9354 7.53958 12.95 7.26833 12.95 6.965C12.95 6.66167 12.9354 6.39917 12.9062 6.1775C12.8771 5.95583 12.8217 5.705 12.74 5.425H9.9575C9.9925 5.83333 10.0158 6.14542 10.0275 6.36125C10.0392 6.57708 10.045 6.77833 10.045 6.965C10.045 7.22167 10.0363 7.46375 10.0188 7.69125C10.0013 7.91875 9.975 8.2075 9.94 8.5575ZM9.765 4.375H12.39C12.005 3.57 11.4771 2.89917 10.8062 2.3625C10.1354 1.82583 9.3625 1.44667 8.4875 1.225C8.77917 1.65667 9.02708 2.12333 9.23125 2.625C9.43542 3.12667 9.61333 3.71 9.765 4.375ZM5.32 4.375H8.715C8.58667 3.75667 8.37083 3.15875 8.0675 2.58125C7.76417 2.00375 7.40833 1.49333 7 1.05C6.62667 1.365 6.31167 1.77917 6.055 2.2925C5.79833 2.80583 5.55333 3.5 5.32 4.375ZM1.61 4.375H4.2525C4.38083 3.745 4.54417 3.18208 4.7425 2.68625C4.94083 2.19042 5.19167 1.70917 5.495 1.2425C4.62 1.46417 3.85583 1.8375 3.2025 2.3625C2.54917 2.8875 2.01833 3.55833 1.61 4.375Z"
-            fill="currentColor"
-          />
-        </svg>
+        <Box mr={{ base: 0, md: "3px" }}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.08458 14L4.80597 11.76C4.65506 11.7017 4.51285 11.6317 4.37935 11.55C4.24585 11.4683 4.11526 11.3808 3.98756 11.2875L1.91542 12.1625L0 8.8375L1.79353 7.4725C1.78192 7.39083 1.77612 7.31208 1.77612 7.23625V6.76375C1.77612 6.68792 1.78192 6.60917 1.79353 6.5275L0 5.1625L1.91542 1.8375L3.98756 2.7125C4.11526 2.61917 4.24876 2.53167 4.38806 2.45C4.52736 2.36833 4.66667 2.29833 4.80597 2.24L5.08458 0H8.91542L9.19403 2.24C9.34494 2.29833 9.48715 2.36833 9.62065 2.45C9.75415 2.53167 9.88474 2.61917 10.0124 2.7125L12.0846 1.8375L14 5.1625L12.2065 6.5275C12.2181 6.60917 12.2239 6.68792 12.2239 6.76375V7.23625C12.2239 7.31208 12.2123 7.39083 12.1891 7.4725L13.9826 8.8375L12.0672 12.1625L10.0124 11.2875C9.88474 11.3808 9.75124 11.4683 9.61194 11.55C9.47264 11.6317 9.33333 11.7017 9.19403 11.76L8.91542 14H5.08458ZM6.30348 12.6H7.6791L7.92288 10.745C8.28275 10.6517 8.6165 10.5146 8.92413 10.3337C9.23176 10.1529 9.51327 9.93417 9.76866 9.6775L11.4925 10.395L12.1716 9.205L10.6741 8.0675C10.7322 7.90417 10.7728 7.73208 10.796 7.55125C10.8192 7.37042 10.8308 7.18667 10.8308 7C10.8308 6.81333 10.8192 6.62958 10.796 6.44875C10.7728 6.26792 10.7322 6.09583 10.6741 5.9325L12.1716 4.795L11.4925 3.605L9.76866 4.34C9.51327 4.07167 9.23176 3.84708 8.92413 3.66625C8.6165 3.48542 8.28275 3.34833 7.92288 3.255L7.69652 1.4H6.3209L6.07711 3.255C5.71725 3.34833 5.3835 3.48542 5.07587 3.66625C4.76824 3.84708 4.48673 4.06583 4.23134 4.3225L2.50746 3.605L1.82836 4.795L3.32587 5.915C3.26783 6.09 3.2272 6.265 3.20398 6.44C3.18076 6.615 3.16915 6.80167 3.16915 7C3.16915 7.18667 3.18076 7.3675 3.20398 7.5425C3.2272 7.7175 3.26783 7.8925 3.32587 8.0675L1.82836 9.205L2.50746 10.395L4.23134 9.66C4.48673 9.92833 4.76824 10.1529 5.07587 10.3337C5.3835 10.5146 5.71725 10.6517 6.07711 10.745L6.30348 12.6ZM7.03483 9.45C7.70813 9.45 8.28275 9.21083 8.75871 8.7325C9.23466 8.25417 9.47264 7.67667 9.47264 7C9.47264 6.32333 9.23466 5.74583 8.75871 5.2675C8.28275 4.78917 7.70813 4.55 7.03483 4.55C6.34992 4.55 5.77239 4.78917 5.30224 5.2675C4.83209 5.74583 4.59701 6.32333 4.59701 7C4.59701 7.67667 4.83209 8.25417 5.30224 8.7325C5.77239 9.21083 6.34992 9.45 7.03483 9.45Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Box>
       }
       href="/settings"
       {...props}
