style(landing): improve about visibility

functions/package.json

@@ -23,12 +23,12 @@
     "@firebase/database-types": "1.0.4",
     "@google-cloud/storage": "7.12.1",
     "@sign-mt/browsermt": "0.2.3",
-    "@unkey/api": "0.24.0",
+    "@unkey/api": "0.25.0",
     "cors": "2.8.5",
     "express": "4.19.2",
     "express-async-errors": "3.1.1",
     "firebase-admin": "12.3.1",
-    "firebase-functions": "5.0.1",
+    "firebase-functions": "5.1.0",
     "http-errors": "2.0.0",
     "http-proxy-middleware": "^3.0.0",
     "node-fetch": "2.6.7",
@@ -40,8 +40,8 @@
     "@types/http-errors": "2.0.4",
     "@types/jest": "29.5.12",
     "@types/node-fetch": "2.6.11",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@typescript-eslint/parser": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "8.2.0",
+    "@typescript-eslint/parser": "8.2.0",
     "eslint": "8.57.0",
     "firebase-functions-test": "3.3.0",
     "firebase-tools": "13.15.2",

package.json

@@ -95,7 +95,7 @@
     "ionicons": "7.4.0",
     "leaflet": "1.9.4",
     "mermaid": "10.9.1",
-    "mp4-muxer": "4.3.3",
+    "mp4-muxer": "5.0.0",
     "ngx-filesize": "3.0.4",
     "pose-viewer": "0.10.0",
     "rxjs": "7.8.1",
@@ -132,8 +132,8 @@
     "@types/web-app-manifest": "1.0.8",
     "@types/webgl2": "0.0.11",
     "@types/wicg-file-system-access": "2023.10.5",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@typescript-eslint/parser": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "8.2.0",
+    "@typescript-eslint/parser": "8.2.0",
     "browser-sync": "3.0.2",
     "deepmerge": "4.3.1",
     "dotenv": "16.4.5",

src/app/pages/landing/about/about-api/about-api.component.scss

@@ -1,7 +1,7 @@
 @import '../../../../../theme/variables';
 
 .cards-container {
-  border-radius: 8px;
+  border-radius: 14px;
   overflow: hidden;
 
   > div {
@@ -26,7 +26,7 @@ pre {
 }
 
 video {
-  background: #dddddd22;
+  background: var(--ion-color-light);
   display: block;
   max-width: 512px;
   width: 100%;

src/app/pages/landing/about/about-customers/about-customers.component.scss

@@ -13,12 +13,23 @@
   }
 }
 
-ion-item ion-icon {
-  filter: grayscale(1) opacity(0.5);
-}
+ion-item {
+  filter: opacity(0.5);
+  border-left: 1px solid var(--ion-color-medium);
+  --border-color: transparent;
+
+  ion-icon {
+    filter: grayscale(1);
+  }
 
-ion-item.selected ion-icon {
-  filter: none;
+  &.selected {
+    border-left-color: var(--ion-color-primary);
+    filter: none;
+
+    ion-icon {
+      filter: none;
+    }
+  }
 }
 
 .use-case {

src/app/pages/landing/about/about-pricing/about-pricing.component.scss

@@ -16,6 +16,7 @@ p {
 .cards-container,
 ion-card {
   border-radius: 32px;
+  margin: 8px;
 }
 
 ion-card {

src/app/pages/landing/about/about.component.spec.ts

@@ -4,7 +4,6 @@ import {axe, toHaveNoViolations} from 'jasmine-axe';
 import {AboutComponent} from './about.component';
 import {AboutHeroComponent} from './about-hero/about-hero.component';
 import {AboutDirectionComponent} from './about-direction/about-direction.component';
-import {AboutOfflineComponent} from './about-offline/about-offline.component';
 import {StoresComponent} from '../../../components/stores/stores.component';
 import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module';
 import {AboutAppearanceComponent} from './about-appearance/about-appearance.component';
@@ -38,7 +37,6 @@ describe('AboutComponent', () => {
         AboutBenefitsComponent,
         AboutDirectionComponent,
         AboutApiComponent,
-        AboutOfflineComponent,
         StoresComponent,
       ],
       imports: [

src/theme/ionic-variables.scss

@@ -70,12 +70,12 @@
   --ion-color-medium-tint: #9d9fa6;
 
   /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light: #ebebeb;
+  --ion-color-light-rgb: 235, 235, 235;
   --ion-color-light-contrast: #000000;
   --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
+  --ion-color-light-shade: #cfcfcf;
+  --ion-color-light-tint: #ededed;
 }
 
 @media (prefers-color-scheme: dark) {