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

2023-08-22 09:39:16 +03:00 · 2023-08-22 09:39:16 +03:00 · 8464bd2be6
parent 3acdd84cf1 ff5fd10d37
commit 8464bd2be6
22 changed files with 97 additions and 26 deletions
--- a/.github/workflows/deploy-storybook.yaml
+++ b/.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
--- a/.github/workflows/ui-tests.yaml
+++ b/.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" \
--- a/.nojekyll
+++ b/.nojekyll
--- a/package.json
+++ b/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",
--- a/src/components/Charts/DeviceCPULoad.tsx
+++ b/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}
--- a/src/components/Charts/DeviceMemoryHealth.tsx
+++ b/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' && (
--- a/src/components/Charts/DeviceNetworkHealth.tsx
+++ b/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' && (
--- a/src/components/Charts/DeviceStorageHealth.tsx
+++ b/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}
--- a/src/components/General/BreadcrumbBar/BreadcrumbBar.css
+++ b/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;
--- a/src/components/General/Titles.tsx
+++ b/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>
        )}
--- a/src/components/Logos/NimbusLogo.tsx
+++ b/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>
  )
--- a/src/components/Logos/NodesLogo.tsx
+++ b/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>
--- a/src/constants.ts
+++ b/src/constants.ts
@ -1,5 +1,5 @@
-export const GREEN_CHECKMARK_ICON = '/icons/checkmark-circle-green.png'
-export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png'
+export const GREEN_CHECKMARK_ICON = './icons/checkmark-circle-green.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.'
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/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'}>
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/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">
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/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' }}>
--- a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx
+++ b/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={{
--- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
+++ b/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)}
--- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
+++ b/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}>
            {' '}
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/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 />
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/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={{
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/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 RefreshIcon from '/icons/refresh.svg'
-import BlockIcon from '/icons/block.svg'
-import ConnectionIcon from '/icons/connection.svg'
+import RefreshBlackIcon from '../../../public/icons/refresh-black.svg'
+import RefreshIcon from '../../../public/icons/refresh.svg'
+import BlockIcon from '../../../public/icons/block.svg'
+import ConnectionIcon from '../../../public/icons/connection.svg'
 import { convertSecondsToTimerFormat } from '../../utilities'

 type SyncStatusProps = {