Wrap up app store redesign

Co-authored-by: Nathan Fretz <nmfretz@gmail.com> Co-authored-by: Luke Childs <lukechilds123@gmail.com>
getumbrel · Jun 21, 2023 · c232efa · c232efa
1 parent 7567472
commit c232efa
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 103 deletions.
diff --git a/packages/dashboard/src/global-styles/custom.scss b/packages/dashboard/src/global-styles/custom.scss
@@ -65,6 +65,12 @@ body {
   --glass-alert-button-hover-background-color: rgba(0, 0, 0, 0.8);
   --glass-alert-button-hover-text-color: rgba(255, 255, 255, 1);
 
+  --glass-dropdown-text-color: rgba(0, 0, 0, 0.6);
+  --glass-dropdown-background-color: rgba(255, 255, 255, 0.6);
+  --glass-dropdown-border-color: rgba(0, 0, 0, 0.05);
+  --glass-dropdown-hover-text-color: rgba(0, 0, 0, 0.8);
+  --glass-dropdown-hover-background-color: rgba(0, 0, 0, 0.1);
+
   --input-copy-border-color: rgba(0, 0, 0, 0.2);
 
   --app-store-tab-button-background-color: rgba(255, 255, 255, 0);
@@ -140,6 +146,12 @@ body.dark-mode {
   --glass-alert-button-hover-background-color: rgba(255, 255, 255, 1);
   --glass-alert-button-hover-text-color: rgba(0, 0, 0, 1);
 
+  --glass-dropdown-text-color: rgba(255, 255, 255, 0.9);
+  --glass-dropdown-background-color: rgba(0, 0, 0, 0.5);
+  --glass-dropdown-border-color: rgba(255, 255, 255, 0.05);
+  --glass-dropdown-hover-text-color: rgba(255, 255, 255, 1);
+  --glass-dropdown-hover-background-color: rgba(255, 255, 255, 0.1);
+
   --input-copy-border-color: rgba(255, 255, 255, 0.2);
 
   --app-store-tab-button-background-color: rgba(255, 255, 255, 0);
@@ -366,9 +378,9 @@ a {
 
 
 .dropdown-menu {
-  color: var(--glass-alert-text-color);
-  background: var(--glass-alert-background-color);
-  border-color: var(--glass-alert-border-color);
+  color: var(--glass-dropdown-text-color);
+  background: var(--glass-dropdown-background-color);
+  border-color: var(--glass-dropdown-border-color);
   backdrop-filter: blur(10px) saturate(180%);
     // box-shadow: 0px 10px 30px var(--card-box-shadow-color);
   border-radius: 0.5rem;
@@ -377,9 +389,9 @@ a {
   margin-top: 0.1rem;
   .dropdown-item {
     padding: 0.5rem 1.25rem;
-    color: var(--glass-alert-text-color);
+    color: var(--glass-dropdown-hover-text-color);
     &:hover {
-      background: var(--glass-alert-background-color);
+      background: var(--glass-dropdown-hover-background-color);
     }
   }
 }

diff --git a/packages/dashboard/src/global-styles/responsive.scss b/packages/dashboard/src/global-styles/responsive.scss
@@ -14,14 +14,17 @@
 }
 
 .app-store-card-columns {
-    column-count: 1;
-    @include media-breakpoint-up(md) {
-        column-count: 2;
-    }
-    @include media-breakpoint-up(lg) {
-        column-count: 3;
+    display: flex;
+    flex-wrap: wrap;
+    .app-store-app-link {
+        flex-basis: 100%;
+        @include media-breakpoint-up(md) {
+            flex-basis: 50%;
+        }
+        @include media-breakpoint-up(lg) {
+            flex-basis: 33.3333%;
+        }
     }
-    column-gap: 0px;
 }
 
 .settings-card-columns {
@@ -125,10 +128,26 @@
             height: 62.5vw;
             width: 100vw;
         }
+
+        &.overwrite-banner-gallery {
+            .app-gallery-image-container {
+                height: 50vw;
+                width: 100vw;
+            }
+        }
     }
     .app-suggestions-container {
         width: 100% !important;
     }
+    .title-card {
+        font-size: 2rem !important;
+    }
+    .app-store-tabs {
+        .nav {
+          margin-left: -1rem !important;
+          margin-right: -1rem !important;
+        }
+    }
 }
 
 @include media-breakpoint-only(sm) {
@@ -178,3 +197,19 @@
         max-width: 1330px !important;
     }
 }
+
+@include media-breakpoint-up(xl) {
+    .app-gallery.overwrite-banner-gallery {
+        margin-left: calc(-1.5rem - 25px);
+        margin-right: calc(-1.5rem - 25px);
+        .app-gallery-image-container {
+            height: 350px;
+            width: 700px;
+        }
+    }
+    .app-store-tabs .nav {
+        margin-left: -3rem !important;
+        margin-right: -3rem !important;
+        padding: 0 3rem 1rem 3rem !important;
+    }
+}
diff --git a/packages/dashboard/src/store/modules/apps.js b/packages/dashboard/src/store/modules/apps.js
@@ -4,6 +4,7 @@ import API from "@/helpers/api";
 // Initial state
 const state = () => ({
   appStoreScrollTop: 0, // to preserve app store scroll position when user switches back-and-forth between app listings
+  appStoreActiveTabIndex: 0, // to preserve app store tab index when user switches back-and-forth between app listings
   installed: [],
   store: [],
   installing: [],
@@ -14,13 +15,20 @@ const state = () => ({
   searchQuery: "",
   searchResults: [],
   communityAppStoreApps: [],
+  appStoreDiscoverData: { // fetched from https://apps.umbrel.com/api/v1/umbrel-os/app-store/discover
+    banners: [],
+    sections: [],
+  },
 });
 
 // Functions to update the state directly
 const mutations = {
   setAppStoreScrollTop(state, appStoreScrollTop) {
     state.appStoreScrollTop = appStoreScrollTop;
   },
+  setAppStoreActiveTabIndex(state, appStoreActiveTabIndex) {
+    state.appStoreActiveTabIndex = appStoreActiveTabIndex;
+  },
   setInstalledApps(state, apps) {
     const alphabeticallySortedApps = apps.sort((a, b) => a.name.localeCompare(b.name));
     state.installed = alphabeticallySortedApps;
@@ -91,6 +99,9 @@ const mutations = {
   },
   setCommunityAppStoreApps(state, apps) {
     state.communityAppStoreApps = apps;
+  },
+  setAppStoreDiscoverData(state, { banners, sections }) {
+    state.appStoreDiscoverData = { banners, sections };
   }
 };
 
@@ -99,6 +110,9 @@ const actions = {
   updateAppStoreScrollTop({ commit }, scrollTop) {
     commit("setAppStoreScrollTop", scrollTop);
   },
+  updateAppStoreActiveTabIndex({ commit }, activeTabIndex) {
+    commit("setAppStoreActiveTabIndex", activeTabIndex);
+  },
   async getInstalledApps({ commit }) {
     const installedApps = await API.get(`${process.env.VUE_APP_MANAGER_API_URL}/v1/apps?installed=1`);
     if (installedApps) {
@@ -208,6 +222,12 @@ const actions = {
         window.clearInterval(poll);
       }
     }, 5000);
+  },
+  async getAppStoreDiscoverData({ commit }) {
+    const { banners, sections } = await API.get(`${process.env.VUE_APP_MANAGER_API_URL}/v1/apps/discover`);
+    if (banners && sections) {
+      commit("setAppStoreDiscoverData", { banners, sections });
+    }
   }
 };