Suggest new theme from Theme Store

Author: faisalnjs

src/modules/ui.css

@@ -538,6 +538,26 @@ body:has(.topbar) {
   transition: border-right-width 0.25s ease-in-out;
 }
 
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme {
+  border: 2px dashed var(--accent-color) !important;
+  background: transparent !important;
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme:hover {
+  background: var(--surface-color) !important;
+  transition: background-color 0.25s ease-in-out;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme i {
+  position: relative !important;
+  margin: auto;
+  padding: 0;
+  top: 0;
+  left: 0;
+}
+
 [data-modal-page="store"] .themes-grid .theme-item i:not(.hd) {
   position: absolute;
   bottom: 10px;

src/themes/themes.js

@@ -404,10 +404,20 @@ export async function renderStore() {
   const freeThemesGridText = document.createElement("b");
   freeThemesGridText.innerText = 'Free Themes';
   store.appendChild(freeThemesGridText);
+  const freeThemesGridSuggestTheme = document.createElement("div");
+  freeThemesGridSuggestTheme.classList = 'theme-item suggest-theme';
+  freeThemesGridSuggestTheme.innerHTML = `<i class="bi bi-plus-lg"></i>`;
+  freeThemesGridSuggestTheme.onclick = ui.suggestionsModal;
+  freeThemesGrid.appendChild(freeThemesGridSuggestTheme);
   store.appendChild(freeThemesGrid);
   const premiumThemesGridText = document.createElement("b");
   premiumThemesGridText.innerText = 'Premium Themes';
   store.appendChild(premiumThemesGridText);
+  const premiumThemesGridSuggestTheme = document.createElement("div");
+  premiumThemesGridSuggestTheme.classList = 'theme-item suggest-theme';
+  premiumThemesGridSuggestTheme.innerHTML = `<i class="bi bi-plus-lg"></i>`;
+  premiumThemesGridSuggestTheme.onclick = ui.suggestionsModal;
+  premiumThemesGrid.appendChild(premiumThemesGridSuggestTheme);
   store.appendChild(premiumThemesGrid);
   const costInfo = document.createElement("ul");
   costInfo.classList = 'cost-info';