feat: updates jobs section design

Co-authored-by: Konstantinos Paparas <kelsos86@gmail.com>

components/account/home/AccountInformation.vue

@@ -203,7 +203,9 @@ const css = useCssModule();
  @blur="v$.country.$touch()"
  />
 
- <div class="mt-8">
+ <div class="my-5 border-t border-grey-50" />
+
+ <div class="flex justify-end mt-8">
  <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
  Update
  </RuiButton>

components/account/home/ChangePassword.vue

@@ -112,7 +112,12 @@ const css = useCssModule();
  autocomplete="new-password"
  />
 
- <div :class="css.row" class="mt-8">
+ <div class="my-5 border-t border-grey-50" />
+
+ <div class="flex justify-end mt-8">
+ <span v-if="success" :class="css.success">
+ <CheckMarkIcon /> Your password has been changed.
+ </span>
  <RuiButton
  :disabled="v$.$invalid"
  size="lg"
@@ -122,9 +127,6 @@ const css = useCssModule();
  >
  Change Password
  </RuiButton>
- <span v-if="success" :class="css.success">
- <CheckMarkIcon /> Your password has been changed.
- </span>
  </div>
  </CardContainer>
 </template>
@@ -135,6 +137,6 @@ const css = useCssModule();
 }
 
 .success {
- @apply flex flex-row ml-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
+ @apply flex flex-row mr-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
 }
 </style>

components/account/home/DangerZone.vue

@@ -34,11 +34,11 @@ const css = useCssModule();
 
 <template>
  <CardContainer warning>
- <TextHeading>
+ <TextHeading class="mt-4" no-margin>
  <div class="text-rui-error">Delete account</div>
  </TextHeading>
 
- <p class="text-rui-text-secondary">
+ <p class="text-rui-text-secondary mt-1">
  Proceeding will completely delete your account data. If you proceed you
  will not be able to recover your account!
  </p>

components/content/ProseA.vue

@@ -23,6 +23,6 @@ const css = useCssModule();
 
 <style module lang="scss">
 .link {
- @apply hover:text-rui-text-secondary text-rui-primary;
+ @apply text-rui-primary hover:text-rui-primary-darker font-medium;
 }
 </style>

components/content/ProseH2.vue

@@ -28,7 +28,7 @@ const css = useCssModule();
 
 <style lang="scss" module>
 .heading {
- @apply text-rui-text font-bold mt-6;
+ @apply text-rui-text font-bold mt-8 mb-6;
  @apply text-[1.05rem] sm:text-[1.2rem] md:text-[1.35rem] 2xl:text-[1.5rem];
  @apply leading-[1.4rem] sm:leading-[1.6rem] md:leading-[1.8rem] 2xl:leading-[2.2rem];
 }

components/content/ProseH5.vue

@@ -0,0 +1,5 @@
+<template>
+ <div class="text-h5 my-6">
+ <slot />
+ </div>
+</template>

components/content/ProseH6.vue

@@ -0,0 +1,5 @@
+<template>
+ <div class="text-h6 my-4 font-medium">
+ <slot />
+ </div>
+</template>

components/content/ProseHr.vue

@@ -0,0 +1,3 @@
+<template>
+ <div class="border-t border-black/[0.12] my-6" />
+</template>

components/content/ProseLi.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { RuiIcon } from '@rotki/ui-library';
+</script>
+
+<template>
+ <li class="py-1 inline-flex w-full">
+ <RuiIcon
+ name="arrow-drop-right-line"
+ class="mr-2 text-rui-text-secondary min-w-[1.5rem]"
+ size="24"
+ />
+ <span class="py-0.5">
+ <slot />
+ </span>
+ </li>
+</template>

components/content/ProseP.vue

@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
- defineProps<{
- small?: boolean;
- }>(),
- {
- small: false,
- },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
- <p
- :class="[
- css.text,
- {
- [css.small]: small,
- },
- ]"
- >
+ <p class="text-rui-text-secondary text-body-1 mb-4">
  <slot />
  </p>
 </template>
-
-<style lang="scss" module>
-.text {
- @apply text-rui-grey-800 text-justify mt-4;
- @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
- @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
- @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
- @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>

components/content/ProseUl.vue

@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
- defineProps<{
- small?: boolean;
- }>(),
- {
- small: false,
- },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
- <ul
- :class="[
- css.list,
- {
- [css.small]: small,
- },
- ]"
- >
+ <ul class="leading-5 text-body-2">
  <slot />
  </ul>
 </template>
-
-<style lang="scss" module>
-.list {
- @apply pl-8 list-disc mt-4;
- @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
- @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
- @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
- @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>

components/header/PageHeader.vue

@@ -23,7 +23,7 @@ const logout = async () => {
  <div>
  <NavigationMenu />
  </div>
- <div class="flex items-center space-x-2 ml-6">
+ <div class="flex items-center space-x-2 ml-6 lg:ml-0">
  <NuxtLink to="/home">
  <RuiButton rounded color="primary">
  {{ t('page_header.manage_premium') }}

components/jobs/JobDescription.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+ job: {
+ title?: string;
+ description?: string;
+ tags?: string[];
+ };
+}>();
+</script>
+
+<template>
+ <div
+ class="p-4 rounded border border-rui-grey-300 space-y-4 hover:bg-rui-grey-100"
+ >
+ <div class="text-body-1">
+ {{ job.title }}
+ </div>
+ <div class="text-body-2 text-rui-text-secondary">
+ {{ job.description }}
+ </div>
+ <div v-if="job.tags && job.tags.length > 0" class="space-x-2.5">
+ <JobTag v-for="tag in job.tags" :key="tag" :tag="tag" />
+ </div>
+ </div>
+</template>

components/jobs/JobTag.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { get } from '@vueuse/core';
+
+const props = defineProps<{
+ tag: string;
+}>();
+
+const { tag } = toRefs(props);
+
+const icon: ComputedRef<string> = computed(() => {
+ const value = get(tag);
+ return (
+ {
+ 'full-time': 'timer-2-line',
+ 'part-time': 'timer-2-line',
+ remote: 'user-location-line',
+ }[value] ?? ''
+ );
+});
+</script>
+
+<template>
+ <RuiChip
+ class="capitalize hover:!bg-transparent py-1 !min-h-0"
+ :label="tag"
+ variant="outlined"
+ >
+ <template v-if="icon" #prepend>
+ <RuiIcon :name="icon" class="p-0.5" />
+ </template>
+ </RuiChip>
+</template>

composables/markdown.ts

@@ -1,13 +1,16 @@
 import { get, set } from '@vueuse/core';
+import { groupBy } from 'graphql/jsutils/groupBy';
 import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types';
 import type { ComputedRef, Ref } from 'vue';
-import { logger } from '~/utils/logger';
 import { replacePathPrefix } from '~/utils/api';
-import { GITHUB_CONTENT_PREFIX } from '~/utils/constants';
+import { CONTENT_PREFIX, LOCAL_CONTENT_PREFIX } from '~/utils/constants';
+import { logger } from '~/utils/logger';
 
-interface JobMarkdownContent extends MarkdownParsedContent {
+export interface JobMarkdownContent extends MarkdownParsedContent {
  link?: string;
  open: boolean;
+ category: string;
+ tags: string[];
 }
 
 /**
@@ -18,6 +21,12 @@ export const useMarkdownContent = () => {
  const openJobs: ComputedRef<JobMarkdownContent[]> = computed(() =>
  get(jobs).filter((job) => job.open),
  );
+ const groupedOpenJobsByCategory: ComputedRef<
+ Record<string, readonly JobMarkdownContent[]>
+ > = computed(() =>
+ Object.fromEntries(groupBy(get(openJobs), (item) => item.category ?? '')),
+ );
+
  const firstJob: ComputedRef<JobMarkdownContent | null> = computed(
  () => get(openJobs)[0] ?? null,
  );
@@ -29,47 +38,55 @@ export const useMarkdownContent = () => {
  const path = `/jobs`;
 
  let foundJobs;
+ let prefix = CONTENT_PREFIX;
 
  try {
- const remotePath = `${GITHUB_CONTENT_PREFIX}${path}`;
  // try to fetch from remote
- foundJobs = await queryContent<JobMarkdownContent>(remotePath).find();
+ foundJobs = await queryContent<JobMarkdownContent>(
+ `${prefix}${path}`,
+ ).find();
  } catch (e: any) {
  logger.error(e);
+ prefix = LOCAL_CONTENT_PREFIX;
  // fallback to local if remote fails
- foundJobs = await queryContent<JobMarkdownContent>(path).find();
+ foundJobs = await queryContent<JobMarkdownContent>(
+ `${prefix}${path}`,
+ ).find();
  }
 
  set(
  jobs,
  foundJobs?.map((job) => {
- job.link = replacePathPrefix(GITHUB_CONTENT_PREFIX, job._path);
+ job.link = replacePathPrefix(prefix, job._path);
  return job;
  }) ?? [],
  );
  };
 
+ const queryPrefixForJob = async (
+ prefix: typeof CONTENT_PREFIX,
+ path: string,
+ ): Promise<JobMarkdownContent> => {
+ const prefixedPath = `${prefix}${path}`;
+ const data = await queryContent<JobMarkdownContent>(prefixedPath).findOne();
+ return {
+ ...data,
+ link: replacePathPrefix(prefix, data?._path),
+ };
+ };
+
  /**
  * fetches a single markdown files within the jobs directory
  */
  const loadJob = async (path: string): Promise<JobMarkdownContent> => {
  try {
- const remotePath = `${GITHUB_CONTENT_PREFIX}${path}`;
- // try to fetch from remote
- const data = await queryContent<JobMarkdownContent>(remotePath).findOne();
- return {
- ...data,
- link: replacePathPrefix(GITHUB_CONTENT_PREFIX, data?._path),
- };
+ // try to fetch from prefix
+ return await queryPrefixForJob(CONTENT_PREFIX, path);
  } catch (e: any) {
  logger.error(e);
 
  // fallback to local if remote fails
- const data = await queryContent<JobMarkdownContent>(path).findOne();
- return {
- ...data,
- link: replacePathPrefix(GITHUB_CONTENT_PREFIX, data?._path),
- };
+ return await queryPrefixForJob(LOCAL_CONTENT_PREFIX, path);
  }
  };
 
@@ -89,6 +106,7 @@ export const useMarkdownContent = () => {
  return {
  jobs,
  openJobs,
+ groupedOpenJobsByCategory,
  firstJob,
  loadJob,
  loadJobs,