FEATURE (storages): Add uptime banner

frontend/src/features/backups/ui/BackupsComponent.tsx

@@ -558,7 +558,7 @@ export const BackupsComponent = ({
       <div className="mt-5" />
 
       {database.postgresql?.backupType !== PostgresBackupType.WAL_V1 && (
-        <div className="flex">
+        <div className="flex items-center">
           <Button
             onClick={makeBackup}
             className="mr-1"
@@ -569,6 +569,17 @@ export const BackupsComponent = ({
             <span className="md:hidden">Backup now</span>
             <span className="hidden md:inline">Make backup right now</span>
           </Button>
+
+          {!IS_CLOUD && (
+            <a
+              href="https://databasus.com/cloud"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex h-8 items-center rounded-md border border-blue-600 px-[15px] text-sm leading-none transition-colors hover:bg-blue-50 dark:!text-white dark:hover:bg-blue-900/30"
+            >
+              Get 24x7 uptime and 2x independent backups copy
+            </a>
+          )}
         </div>
       )}
 

frontend/src/features/storages/ui/StoragesComponent.tsx

@@ -1,6 +1,8 @@
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Button, Modal, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 
+import { IS_CLOUD } from '../../../constants';
 import { storageApi } from '../../../entity/storages';
 import type { Storage } from '../../../entity/storages';
 import type { UserProfile } from '../../../entity/users';
@@ -100,6 +102,31 @@ export const StoragesComponent = ({
           >
             {storages.length >= 5 && isCanManageStorages && addStorageButton}
 
+            {!IS_CLOUD && (
+              <div className="mb-3 rounded bg-yellow-50 p-3 shadow dark:bg-yellow-900/30">
+                <div className="mb-1 flex items-center gap-1.5 text-sm font-bold text-yellow-700 dark:text-yellow-400">
+                  <ExclamationCircleOutlined />
+                  Self-hosted notice
+                </div>
+
+                <div className="text-sm !text-yellow-600 dark:!text-yellow-500">
+                  Do not forget to backup the storage itself as it contains all your backups.
+                  <br /> Or you can use cloud{"'"}s build-in{' '}
+                  <u>unlimited storage with double reservation</u>. We care about security,
+                  maintainance and 24x7 uptime
+                </div>
+
+                <a
+                  href="https://databasus.com/cloud"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mt-2 block w-full rounded-md !bg-green-600 px-4 py-1.5 text-center text-sm font-medium !text-white transition-colors hover:!bg-green-700 dark:!bg-green-700 dark:hover:!bg-green-800"
+                >
+                  Use cloud storage from $9
+                </a>
+              </div>
+            )}
+
             {storages.map((storage) => (
               <StorageCardComponent
                 key={storage.id}

frontend/src/features/storages/ui/edit/EditStorageComponent.tsx

@@ -1,4 +1,4 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Button, Input, Select, Switch, Tooltip } from 'antd';
 import { useEffect, useState } from 'react';
 
@@ -14,6 +14,7 @@ import { ToastHelper } from '../../../../shared/toast';
 import { EditAzureBlobStorageComponent } from './storages/EditAzureBlobStorageComponent';
 import { EditFTPStorageComponent } from './storages/EditFTPStorageComponent';
 import { EditGoogleDriveStorageComponent } from './storages/EditGoogleDriveStorageComponent';
+import { EditLocalStorageComponent } from './storages/EditLocalStorageComponent';
 import { EditNASStorageComponent } from './storages/EditNASStorageComponent';
 import { EditRcloneStorageComponent } from './storages/EditRcloneStorageComponent';
 import { EditS3StorageComponent } from './storages/EditS3StorageComponent';
@@ -486,6 +487,35 @@ export function EditStorageComponent({
             }}
           />
         )}
+
+        {storage?.type === StorageType.LOCAL && <EditLocalStorageComponent />}
+      </div>
+
+      <div>
+        {!IS_CLOUD && (
+          <div className="mb-3 rounded bg-yellow-50 p-3 shadow dark:bg-yellow-900/30">
+            <div className="mb-1 flex items-center gap-1.5 text-sm font-bold text-yellow-700 dark:text-yellow-400">
+              <ExclamationCircleOutlined />
+              Self-hosted notice
+            </div>
+
+            <div className="text-sm !text-yellow-600 dark:!text-yellow-500">
+              Do not forget to backup the storage itself as it contains all your backups.
+              <br /> Or you can use cloud{"'"}s build-in{' '}
+              <u>unlimited storage with double reservation</u>. We care about security, maintainance
+              and 24x7 uptime for you
+            </div>
+
+            <a
+              href="https://databasus.com/cloud"
+              target="_blank"
+              rel="noreferrer"
+              className="mt-2 block w-full rounded-md !bg-green-600 px-4 py-1.5 text-center text-sm font-medium !text-white transition-colors hover:!bg-green-700 dark:!bg-green-700 dark:hover:!bg-green-800"
+            >
+              Use cloud storage from $9
+            </a>
+          </div>
+        )}
       </div>
 
       <div className="mt-3 flex">

frontend/src/features/storages/ui/edit/storages/EditLocalStorageComponent.tsx

@@ -0,0 +1,14 @@
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+
+export function EditLocalStorageComponent() {
+  return (
+    <>
+      <div className="max-w-[360px] text-yellow-600 dark:text-yellow-400">
+        <ExclamationCircleOutlined /> Be careful: with local storage you may run out of ROM memory.
+        It is recommended to use S3 or unlimited storages
+      </div>
+
+      <div className="mb-5" />
+    </>
+  );
+}

frontend/src/features/users/ui/AuthNavbarComponent.tsx

@@ -34,12 +34,12 @@ export function AuthNavbarComponent() {
 
         {!IS_CLOUD && (
           <a
-            className="!text-black !underline !decoration-blue-600 !decoration-2 underline-offset-2 hover:opacity-80 dark:!text-gray-200"
+            className="!text-black hover:opacity-80 dark:!text-gray-200"
             href="https://databasus.com/cloud"
             target="_blank"
             rel="noreferrer"
           >
-            Cloud (from $9)
+            Cloud
           </a>
         )}
 

frontend/src/widgets/main/MainScreenComponent.tsx

@@ -232,12 +232,12 @@ export const MainScreenComponent = () => {
 
           {!IS_CLOUD && (
             <a
-              className="!text-black !underline !decoration-blue-600 !decoration-2 underline-offset-2 hover:opacity-80 dark:!text-gray-200"
+              className="!text-black hover:opacity-80 dark:!text-gray-200"
               href="https://databasus.com/cloud"
               target="_blank"
               rel="noreferrer"
             >
-              Cloud (from $9)
+              Cloud
             </a>
           )}
 

frontend/src/widgets/main/SidebarComponent.tsx

@@ -211,7 +211,7 @@ export const SidebarComponent = ({
                 target="_blank"
                 rel="noreferrer"
               >
-                Cloud (from $9)
+                Cloud
               </a>
             )}