Merge pull request #245 from codex-team/user-settings-link-to-marketp…

…lace feat(settings): User settings link to marketplace
codex-team · Jul 4, 2024 · 90c6e7f · 90c6e7f
2 parents 630e4da + b32dc8f
commit 90c6e7f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/codex-ui/src/vue/components/row/Row.vue b/codex-ui/src/vue/components/row/Row.vue
@@ -10,15 +10,15 @@
     <div :class="$style['row__body']">
       <div :class="$style['row__body-inner']">
         <div :class="$style['row__center']">
-          <div :class="[$style['row__label'], 'text-ui-footnote']">
+          <div v-if="label" :class="[$style['row__label'], 'text-ui-footnote']">
             {{ label }}
           </div>
 
           <div :class="[$style['row__title'], 'text-ui-base-medium']">
             {{ title }}
           </div>
 
-          <div class="text-ui-subtle">
+          <div v-if="subtitle" class="text-ui-subtle">
             {{ subtitle }}
           </div>
         </div>
@@ -85,7 +85,7 @@ defineProps<{
     display: flex;
     flex: 1;
     padding: var(--v-padding) var(--h-padding) var(--v-padding) 0;
-    gap: var(--h-padding);
+    gap: var(--spacing-m);
     align-items: center;
   }
 

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
@@ -13,7 +13,6 @@
   },
   "userSettings": {
     "title": "User Settings",
-    "changeTheme": "Change theme",
     "editorTools": "Editor Tools",
     "uninstallEditorTool": "Uninstall",
     "toolUninstallConfirmation": "Do you really want to delete this tool?",
@@ -22,6 +21,12 @@
     "name": "Name",
     "email": "Email",
     "general": "General",
+    "visitMarketplace": {
+      "title": "Add more tools",
+      "caption": "Discover new Blocks, Formattings and other tools to improve your pages",
+      "button": "View all tools",
+      "pictureName": "Hammer"
+    },
     "appearance": {
       "title": "Appearance",
       "colorSheme": {

diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue
@@ -14,13 +14,19 @@
           :title="t('userSettings.name')"
           :caption="t('userSettings.nameCaption')"
         >
-          <Row :title="user?.name!" />
+          <Input
+            disabled
+            :placeholder="user?.name!"
+          />
         </Section>
         <Section
           :title="t('userSettings.email')"
           :caption="t('userSettings.emailCaption')"
         >
-          <Row :title="user?.email!" />
+          <Input
+            disabled
+            :placeholder="user?.email!"
+          />
         </Section>
         <div>
           <Button
@@ -126,21 +132,35 @@
             {{ t('userSettings.uninstallEditorTool') }}
           </Button>
         </Card>
+        <Container>
+          <div :class="$style['container__editor-tools-visit-marketplace']">
+            <Row
+              :title="t('userSettings.visitMarketplace.title')"
+              :subtitle="t('userSettings.visitMarketplace.caption')"
+            >
+              <template #left>
+                <Picture :name="t('userSettings.visitMarketplace.pictureName')" />
+              </template>
+              <template #right>
+                <Button
+                  secondary
+                  trailing-icon="ChevronRight"
+                  @click="$router.push('/marketplace')"
+                >
+                  {{ t('userSettings.visitMarketplace.button') }}
+                </Button>
+              </template>
+            </Row>
+          </div>
+        </Container>
       </div>
     </Fieldset>
   </div>
-
-  <Button
-    class="marketplace"
-    :text="t('marketplace.title')"
-    link="/marketplace"
-    type="primary"
-  />
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, Picture } from 'codex-ui/vue';
+import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, Picture, Container, Input } from 'codex-ui/vue';
 import { useRouter } from 'vue-router';
 import useAuth from '@/application/services/useAuth';
 import { useUserSettings } from '@/application/services/useUserSettings';
@@ -222,6 +242,10 @@ async function uninstallClicked(toolId: string) {
   &__editor-tools {
     display: grid;
     gap: var(--v-padding);
+
+    &-visit-marketplace {
+      padding: var(--v-padding) 0;
+    }
   }
 
   &__appearance {