disalbe settings not implemented yet

nym-vpn/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nym-vpn-ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

nym-vpn/ui/src/pages/settings/Settings.tsx

@@ -59,6 +59,7 @@ function Settings() {
             title: t('auto-connect.title'),
             desc: t('auto-connect.desc'),
             leadingIcon: 'hdr_auto',
+            disabled: true,
             trailing: (
               <Switch
                 checked={autoConnect}
@@ -69,6 +70,7 @@ function Settings() {
                     : 'bg-mercury-pinkish dark:bg-gun-powder',
                   'relative inline-flex h-6 w-11 items-center rounded-full',
                 ])}
+                disabled
               >
                 <span
                   className={clsx([
@@ -83,6 +85,7 @@ function Settings() {
             title: t('entry-selector.title'),
             desc: t('entry-selector.desc'),
             leadingIcon: 'looks_two',
+            disabled: true,
             trailing: (
               <Switch
                 checked={entrySelector}
@@ -93,6 +96,7 @@ function Settings() {
                     : 'bg-mercury-pinkish dark:bg-gun-powder',
                   'relative inline-flex h-6 w-11 items-center rounded-full',
                 ])}
+                disabled
               >
                 <span
                   className={clsx([
@@ -129,11 +133,8 @@ function Settings() {
             onClick: () => {
               navigate(routes.logs);
             },
-            trailing: (
-              <div className="font-icon text-2xl cursor-pointer">
-                arrow_right
-              </div>
-            ),
+            trailing: <div className="font-icon text-2xl">arrow_right</div>,
+            disabled: true,
           },
         ]}
       />
@@ -150,11 +151,13 @@ function Settings() {
                 arrow_right
               </div>
             ),
+            disabled: true,
           },
           {
             title: t('error-reporting.title'),
             desc: t('error-reporting.desc'),
             leadingIcon: 'error',
+            disabled: true,
             trailing: (
               <Switch
                 checked={monitoring}
@@ -165,6 +168,7 @@ function Settings() {
                     : 'bg-mercury-pinkish dark:bg-gun-powder',
                   'relative inline-flex h-6 w-11 items-center rounded-full',
                 ])}
+                disabled
               >
                 <span
                   className={clsx([
@@ -178,6 +182,7 @@ function Settings() {
           {
             title: t('faq'),
             leadingIcon: 'help',
+            disabled: true,
             trailing: (
               <div className="font-icon text-2xl cursor-pointer">launch</div>
             ),
@@ -191,6 +196,7 @@ function Settings() {
             onClick: () => {
               navigate(routes.legal);
             },
+            disabled: true,
             trailing: (
               <div className="font-icon text-2xl cursor-pointer">
                 arrow_right
@@ -206,6 +212,7 @@ function Settings() {
             onClick: () => {
               //TODO shutdown gracefully
             },
+            disabled: true,
           },
         ]}
       />

nym-vpn/ui/src/pages/settings/SettingsGroup.tsx

@@ -8,6 +8,7 @@ type Setting = {
   desc?: string;
   onClick?: () => void;
   trailing?: ReactNode;
+  disabled?: boolean;
 };
 
 interface Props {
@@ -33,9 +34,13 @@ function SettingsGroup({ settings }: Props) {
               'border-y border-mercury-mist',
             index === settings.length - 1 && 'rounded-b-lg',
             setting.desc === undefined && 'py-4',
+            setting.disabled && 'opacity-50 pointer-events-none',
           ])}
         >
-          <div className="flex flex-1 items-center justify-between gap-4">
+          <div
+            role={setting.disabled ? 'none' : 'button'}
+            className="flex flex-1 items-center justify-between gap-4"
+          >
             {setting.leadingIcon && (
               <span className="font-icon text-2xl">{setting.leadingIcon}</span>
             )}

nym-vpn/ui/src/pages/settings/display/Display.tsx

@@ -32,8 +32,14 @@ function Display() {
   };
 
   return (
-    <div className="h-full flex flex-col p-4 gap-4">
-      <div className="flex flex-row justify-between items-center">
+    <div className="h-full flex flex-col p-4 py-6 gap-6">
+      <div
+        className={clsx([
+          'flex flex-row justify-between items-center',
+          'bg-white dark:bg-baltic-sea-jaguar',
+          'px-6 py-4 rounded-lg',
+        ])}
+      >
         <p className="text-lg text-baltic-sea dark:text-mercury-pinkish">
           Dark Mode
         </p>

nym-vpn/ui/src/pages/settings/display/UiScaler.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useEffect, useState } from 'react';
 import { invoke } from '@tauri-apps/api';
+import clsx from 'clsx';
 import { useMainDispatch, useMainState } from '../../../contexts';
 import { CmdError, StateDispatch } from '../../../types';
 
@@ -26,7 +27,13 @@ function UiScaler() {
   };
 
   return (
-    <div className="flex flex-row justify-between items-center gap-10">
+    <div
+      className={clsx([
+        'flex flex-row justify-between items-center gap-10',
+        'bg-white dark:bg-baltic-sea-jaguar',
+        'px-6 py-4 rounded-lg',
+      ])}
+    >
       <p className="text-lg text-baltic-sea dark:text-mercury-pinkish flex-nowrap">
         {`Zoom level: ${slideValue}`}
       </p>

nym-vpn/ui/tailwind.config.ts

@@ -11,7 +11,7 @@ export default {
       'baltic-sea': {
         // [D] bg for top-bar nav
         // [D] bg for network modes
-        jaguar: '#2A2831',
+        jaguar: '#2B2831',
         // [L] status-line title text + icon
         // [L] connection timer text
         // [L] "Connecting" status text