fix: minor ui issues

Author: geekdada

package.json

@@ -54,7 +54,6 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.5",
     "@snyk/protect": "^1.1200.0",
-    "@sumup/icons": "^2.30.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",

src/components/BackButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { ArrowLeftIcon } from 'lucide-react'
+import { ChevronLeft } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 
@@ -12,11 +12,10 @@ const BackButton = ({ title }: { title?: string }) => {
       <Button
         variant="outline"
         onClick={() => navigate(-1)}
-        title="back"
+        title="navigate back"
         size="icon"
-        className="border-2"
       >
-        <ArrowLeftIcon />
+        <ChevronLeft />
       </Button>
       {title ? <span className="">{title}</span> : null}
     </div>

src/components/Data/DataRowMain.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { ChevronRight } from '@sumup/icons'
+import { ChevronRight } from 'lucide-react'
 
 import { cn } from '@/utils/shadcn'
 

src/components/PageLayout/index.tsx

@@ -10,7 +10,7 @@ const PageLayout: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   return (
     <div
       className={cn(
-        'flex-1 flex min-h-full justify-center overflow-x-clip',
+        'w-full flex-1 flex min-h-full justify-center overflow-x-clip',
         className,
       )}
       {...props}

src/data/api.ts

@@ -36,6 +36,7 @@ export const useProfileValidation = (name: string | undefined) => {
       data: {
         name: props[1],
       },
+      timeout: 30_000,
     })
 
   return useSWR(

src/pages/Devices/components/DeviceItem.tsx

@@ -2,9 +2,9 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { css } from '@emotion/react'
-import { ChevronRight } from '@sumup/icons'
 import bytes from 'bytes'
 import dayjs from 'dayjs'
+import { ChevronRight } from 'lucide-react'
 
 import ActionsModal, { Action } from '@/components/ActionsModal'
 import { DataRow, DataRowMain, DataRowSub } from '@/components/Data'

src/pages/Home/components/MenuTile.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { MoveRightIcon } from 'lucide-react'
+import { ChevronRight } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -59,7 +59,7 @@ const MenuTile: React.FC<MenuTileProps> = (props) => {
                 size="icon"
                 onClick={() => handleClick()}
               >
-                <MoveRightIcon />
+                <ChevronRight />
               </Button>
             </div>
           ) : null}

src/pages/Profiles/Manage/Manage.tsx

@@ -3,7 +3,6 @@ import { toast } from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { Loader2Icon } from 'lucide-react'
-import useSWR from 'swr'
 
 import CodeContent from '@/components/CodeContent'
 import { DataGroup, DataRowMain } from '@/components/Data'

src/pages/Requests/components/RequestModal.tsx

@@ -3,9 +3,9 @@ import { toast } from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { Search } from '@sumup/icons'
 import bytes from 'bytes'
 import dayjs from 'dayjs'
+import { Search } from 'lucide-react'
 import { basename } from 'path-browserify'
 import { mutate } from 'swr'
 import tw from 'twin.macro'

src/pages/Traffic/components/TrafficDataRow.tsx

@@ -2,8 +2,8 @@ import React, { useMemo, useState } from 'react'
 import { Collapse } from 'react-collapse'
 import { useTranslation } from 'react-i18next'
 import { css } from '@emotion/react'
-import { ChevronRight } from '@sumup/icons'
 import bytes from 'bytes'
+import { ChevronRight } from 'lucide-react'
 import tw from 'twin.macro'
 
 import { DataRow, DataRowMain, DataRowSub } from '@/components/Data'

yarn.lock

@@ -3064,11 +3064,6 @@
   resolved "https://registry.yarnpkg.com/@snyk/protect/-/protect-1.1293.0.tgz#499c72d6900c86451335a45c34b2b8487747a5e1"
   integrity sha512-k7Xv0lgFskXGjbnhKWmrBNG8d2DHuvEWFu5rVV6ppjDme30nAGn1pvX3XwEeLp9AcovJWjechUOusyNn6S7JKA==
 
-"@sumup/icons@^2.30.1":
-  version "2.30.1"
-  resolved "https://registry.yarnpkg.com/@sumup/icons/-/icons-2.30.1.tgz#dcbbdd1ec8d4c63466041042c38a87fc62e72963"
-  integrity sha512-V0zFe03b10knxu+xpYIZtQQju4sNUPsUD8N+PLuu/ge6miDPqPOopR8ZftudRRsEji15G/pilEMBdBpStiEpgg==
-
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"