Merge branch 'main' of github.com:nimbus-gui/nimbus-gui into ia.correcting-styles

.github/workflows/deploy-storybook.yaml

@@ -0,0 +1,71 @@
+name: 'Deploy Storybook'
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  cache-dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Commit
+        uses: actions/checkout@v2
+      - name: Cache yarn dependencies and cypress
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v3-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v3
+      - name: Install dependencies if cache invalid
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn
+
+  build-and-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: cache-dependencies
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Restore yarn dependencies
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v3-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v3
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: './storybook-static'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/ui-tests.yaml

@@ -65,7 +65,7 @@ jobs:
         run: npx playwright install --with-deps
       - name: Build Storybook
         run: yarn build-storybook --quiet
-      - name: Serve Storybook and run tests
+      - name: Run Storybook tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 6006 --silent" \

package.json

@@ -2,6 +2,7 @@
   "name": "nimbus-gui",
   "private": true,
   "version": "0.0.0",
+  "homepage": "https://nimbus-gui.github.io/nimbus-gui",
   "scripts": {
     "dev": "NODE_ENV=development vite",
     "build": "tsc -p . && vite build",

src/components/Charts/DeviceCPULoad.tsx

@@ -67,7 +67,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}
             weight={'semibold'}
           >
             {message}

src/components/Charts/DeviceMemoryHealth.tsx

@@ -70,7 +70,7 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}>
             {message}
           </IconText>
           {message === 'Poor' && (

src/components/Charts/DeviceNetworkHealth.tsx

@@ -75,7 +75,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}>
             {message}
           </IconText>
           {message === 'Poor' && (

src/components/Charts/DeviceStorageHealth.tsx

@@ -69,7 +69,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}
             weight={'semibold'}
           >
             {message}

src/components/General/BreadcrumbBar/BreadcrumbBar.css

@@ -14,7 +14,7 @@
 }
 .breadcrumb-bar-li::after {
     display: inline-block;
-    content: url("/icons/chevron.svg");
+    content: url("./icons/chevron.svg");
     color: #09101C;
     position: absolute;
     top: 2px;

src/components/General/Titles.tsx

@@ -15,7 +15,7 @@ const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => {
       <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Title color={'#09101C'}>{title}</Title>
         {isAdvancedSettings && (
-          <Button size={32} variant="outline" icon={<Icon src={'/icons/reveal.png'} />}>
+          <Button size={32} variant="outline" icon={<Icon src={'./icons/reveal.png'} />}>
             Advanced Settings
           </Button>
         )}

src/components/Logos/NimbusLogo.tsx

@@ -13,7 +13,7 @@ const NimbusLogo = () => {
       space={'$3'}
     >
       <NimbusLogoMark />
-      <img src={'/icons/nimbus.svg'} alt="marks" />
+      <img src={'./icons/nimbus.svg'} alt="marks" />
       <BetaTag />
     </XStack>
   )

src/components/Logos/NodesLogo.tsx

@@ -12,7 +12,7 @@ const NodesLogo = () => {
       }}
       space={'$2'}
     >
-      <Icon src={'/icons/nodes-app-icon.png'} width={32} height={32} />
+      <Icon src={'./icons/nodes-app-icon.png'} width={32} height={32} />
       <Text size={27} weight={'semibold'}>
         nodes
       </Text>

src/constants.ts

@@ -1,5 +1,5 @@
-export const GREEN_CHECKMARK_ICON = '/icons/checkmark-circle-green.png'
+export const GREEN_CHECKMARK_ICON = './icons/checkmark-circle-green.png'
-export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png'
+export const RED_CHECKMARK_ICON = './icons/remove-circle-red.png'
 
 export const GOOD_STORAGE_TEXT =
   'You have plenty of storage available for additional node services.'

src/pages/ConnectDevicePage/ConnectDevicePage.tsx

@@ -15,7 +15,7 @@ const ConnectDevicePage = () => {
   return (
     <PageWrapperShadow
       breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
-      rightImageSrc="/background-images/day-night-bg.png"
+      rightImageSrc="./background-images/day-night-bg.png"
       rightImageLogo={true}
     >
       <YStack space={'$3'}>

src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx

@@ -13,7 +13,7 @@ const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
 
   return (
-    <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
+    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
       <YStack space={'$3'}>
         <Header selectedTag="create" />
         <article className="content">

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -13,11 +13,10 @@ import { useSelector } from 'react-redux'
 import { RootState } from '../../redux/store'
 
 const DeviceHealthCheck = () => {
- 
   const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
   console.log(deviceHealthState)
   return (
-    <PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
+    <PageWrapperShadow rightImageSrc="./background-images/eye-background.png">
       <YStack
         space={'$4'}
         style={{
@@ -59,7 +58,7 @@ const DeviceHealthCheck = () => {
           networkLatency={75}
         />
         <InformationBox
-          icon={<Icon src="/icons/close.png" width={11} height={11} />}
+          icon={<Icon src="./icons/close.png" width={11} height={11} />}
           message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
         />
         <Stack style={{ marginTop: '1rem' }}>

src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx

@@ -23,7 +23,7 @@ const DeviceSyncStatus = () => {
     )
   }, [dispatch])
   return (
-    <PageWrapperShadow rightImageSrc="/background-images/sync-status-background.png">
+    <PageWrapperShadow rightImageSrc="./background-images/sync-status-background.png">
       <YStack
         space={'$4'}
         style={{

src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx

@@ -55,7 +55,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
               Consensus Client
             </Text>
             <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
-              <Icon src="/icons/vector.svg" height={46} width={93} />
+              <Icon src="./icons/vector.svg" height={46} width={93} />
               <Stack
                 style={{
                   height: '115px',
@@ -71,7 +71,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <Separator borderColor={'#e3e3e3'} />
 
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon="/icons/token.svg">{message}</IconText>
+          <IconText icon="./icons/token.svg">{message}</IconText>
 
           <Text size={13}>
             {formatNumber(synced)} / {formatNumber(total)}

src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx

@@ -72,7 +72,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <Separator borderColor={'#e3e3e3'} />
 
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon="/icons/token.svg">{message}</IconText>
+          <IconText icon="./icons/token.svg">{message}</IconText>
 
           <Text size={13}>
             {' '}

src/pages/LandingPage/LandingPage.tsx

@@ -10,7 +10,7 @@ import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 function LandingPage() {
   return (
     <>
-      <PageWrapperShadow rightImageSrc="/background-images/landing-page-bg.png">
+      <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
         <YStack className="landing-page">
           <XStack pt={'70px'}>
             <NimbusLogo />

src/pages/PairDevice/PairDevice.tsx

@@ -22,7 +22,7 @@ const PairDevice = () => {
   }
 
   return (
-    <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
+    <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
       <YStack
         space={'$3'}
         style={{

src/pages/PairDevice/SyncStatus.tsx

@@ -3,10 +3,10 @@ import { XStack, YStack } from 'tamagui'
 import { Button, IconButton, InformationBox, Text } from '@status-im/components'
 
 import Icon from '../../components/General/Icon'
-import RefreshBlackIcon from '/icons/refresh-black.svg'
+import RefreshBlackIcon from '../../../public/icons/refresh-black.svg'
-import RefreshIcon from '/icons/refresh.svg'
+import RefreshIcon from '../../../public/icons/refresh.svg'
-import BlockIcon from '/icons/block.svg'
+import BlockIcon from '../../../public/icons/block.svg'
-import ConnectionIcon from '/icons/connection.svg'
+import ConnectionIcon from '../../../public/icons/connection.svg'
 import { convertSecondsToTimerFormat } from '../../utilities'
 
 type SyncStatusProps = {