Modernizes the Login Page, adds branding

frontend/assets/scss/_reco.scss

@@ -10,3 +10,7 @@ body,
 .border-standard {
   border-color: var(--p-surface-300);
 }
+
+body {
+  color: var(--p-text-color);
+}

frontend/components/category/Option.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { CategoryOption } from '@/lib/categories'
+
+interface Props {
+  value: CategoryOption
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <FlexRow v-if="props.value">
+    <i :class="props.value.icon" />
+    <div>{{ props.value.label }}</div>
+  </FlexRow>
+</template>

frontend/components/LogoButton.vue → frontend/components/company/LogoButton.vue

@@ -15,7 +15,7 @@ const classes = computed(() => isHome.value ? '' : 'p-button-outlined')
     :disabled="disabled"
     @click="click"
   >
-    <Logo /> 
+    <CompanyLogo /> 
   </Button>
 </template>
 

frontend/components/company/NameMark.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-column justify-content-stretch">
+    <div>reco</div>
+    <div
+      class="font-bold"
+      style="margin-top: -0.25em; margin-bottom: -0.45em;"
+    >
+      friend
+    </div> 
+    <div
+      class="text-right"
+      style="margin-right: -0.025em;"
+    >
+      .org
+    </div>
+  </div>
+</template>

frontend/components/standard/Page.vue

@@ -30,7 +30,7 @@ const footerButtonClasses = 'p-button-text p-button-sm'
           @click="back"
         />
         <FlexRow>
-          <LogoButton /> 
+          <CompanyLogoButton /> 
           <h1>{{ props.title }}</h1>
         </FlexRow>
         <ButtonUserMe />

frontend/lib/categories/index.ts

@@ -0,0 +1,7 @@
+import { Category } from '@/graphql/generated'
+
+export type CategoryOption = { label: string, icon: string, value: Category }
+export const categoryOptions = [
+  { label: 'Book', value: Category.Book, icon: 'pi pi-book' },
+  { label: 'Movie', value: Category.Movie, icon: 'pi pi-play' },
+]

frontend/pages/index.vue

@@ -8,7 +8,7 @@ const menuButtonClasses = {
 
 <template>
   <StandardPage
-    title="RECO.ING"
+    title="recofriend.org"
     sticky
   >
     <FlexCol>
@@ -17,7 +17,7 @@ const menuButtonClasses = {
           class="border-1 p-3 border-round"
           style="color: #e2e8f0;"
         >
-          <Logo style="font-size: 2.625rem; color: #334155;" />
+          <CompanyLogo style="font-size: 2.625rem;" />
         </div>
         <FlexCol class="flex-1">
           <ButtonLink

frontend/pages/recommend.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Category } from '@/graphql/generated'
+import { type CategoryOption, categoryOptions } from '@/lib/categories'
 
+const router = useRouter()
 
 const prefix = 'recommend'
 
@@ -15,27 +17,42 @@ const toOptions = [
 const toNewName = useState<string>(`${prefix}.toNewName`, () => '')
 const toNewEmail = useState<string>(`${prefix}.toNewEmail`, () => '')
 
-type CategoryOption = { label: string, icon: string, value: Category }
-const categoryOptions = [
-  { label: 'Book', value: Category.Book, icon: 'pi pi-book' },
-  { label: 'Movie', value: Category.Movie, icon: 'pi pi-play' },
-]
 const category = useState<CategoryOption>(`${prefix}.category`)
 
 const titleLabel = computed(() => {
   const c = category.value
   if (!c) {
-    return "Title"
+    return 'Title'
   }
   switch (c.value) {
-    case Category.Book: 
-      return "Title / Author"
-    case Category.Movie:
-      return "Name / Year"
+  case Category.Book: 
+    return 'Title / Author'
+  case Category.Movie:
+    return 'Name / Year'
   }
 })
 const title = useState<string>(`${prefix}.title`, () => '')
 
+const content = useState<string>(`${prefix}.content`, () => '')
+
+
+const disableSend = computed(() => {
+  if (!to.value) {
+    return true
+  }
+  if (!category.value) {
+    return true 
+  }
+  if (!title.value) {
+    return true
+  }
+  if (!content.value) {
+    return true
+  }
+  return false
+})
+
+const back = () => router.back()
 </script>
 
 <template>
@@ -54,7 +71,7 @@ const title = useState<string>(`${prefix}.title`, () => '')
             option-value="value"
           />         
           <template v-if="to === 'NEW'">
-          <FloatLabel variant="on">
+            <FloatLabel variant="on">
               <label for="toNewName">Name</label>
               <InputText
                 id="toNewName"
@@ -68,16 +85,27 @@ const title = useState<string>(`${prefix}.title`, () => '')
                 v-model="toNewEmail"
               />
             </FloatLabel>
-            <Message severity="secondary" icon="pi pi-question-circle">
+            <Message
+              severity="secondary"
+              icon="pi pi-question-circle"
+            >
               Your friend doesn't have to have an account to view this recommendation,
               anyone with the link can view it.
             </Message>
           </template>
-          <Message  v-if="to === 'EXISTING'" severity="warn" icon="pi pi-exclamation-triangle">
+          <Message
+            v-if="to === 'EXISTING'"
+            severity="warn"
+            icon="pi pi-exclamation-triangle"
+          >
             This feature isn't implemented yet
           </Message>
 
-          <Message  v-if="to === 'LINK'" severity="info" icon="pi pi-link">
+          <Message
+            v-if="to === 'LINK'"
+            severity="info"
+            icon="pi pi-link"
+          >
             Anyone with the link will be able to view this recommendation. 
             Anyone can save it to their library if they have or create an account.
           </Message>
@@ -91,16 +119,10 @@ const title = useState<string>(`${prefix}.title`, () => '')
           :options="categoryOptions"
         >
           <template #value="slotProps">
-            <FlexRow v-if="slotProps.value">
-              <i :class="slotProps.value.icon" />
-              <div>{{ slotProps.value.label }}</div>
-            </FlexRow>
+            <CategoryOption :value="slotProps.value" />
           </template>
           <template #option="slotProps">
-            <FlexRow>
-              <i :class="slotProps.option.icon" />
-              <div>{{ slotProps.option.label }}</div>
-            </FlexRow>
+            <CategoryOption :value="slotProps.option" />
           </template>
         </Select>
       </IftaLabel>
@@ -115,18 +137,24 @@ const title = useState<string>(`${prefix}.title`, () => '')
         <label for="appeal">Why they'll like it:</label>
         <Textarea
           id="appeal"
-          autoresize
-          :rows="5"
-          v-model="appeal"
+          v-model="content"
+          auto-resize
         />
       </IftaLabel>
       <FlexRow>
-        <Button class="flex-1 p-button-outlined p-button-secondary"
-        icon="pi pi-arrow-left"
-        @click="back"
-        label="Discard"
+        <Button
+          class="flex-1 p-button-outlined p-button-secondary"
+          icon="pi pi-arrow-left"
+          label="Discard"
+          @click="back"
+        />
+        <Button
+          icon-pos="right"
+          class="flex-1"
+          :disabled="disableSend"
+          icon="pi pi-send"
+          label="Send"
         />
-        <Button icon-pos="right" class="flex-1" :disabled="disableSend" icon="pi pi-send" label="Send" />
       </FlexRow>
     </FlexCol>
   </StandardPage>

frontend/components/RequestCreator.vue → frontend/pages/request/new.vue

@@ -1,30 +1,28 @@
 <script setup lang="ts">
 import { Category } from '@/graphql/generated'
 import Textarea from 'primevue/textarea'
+import { type CategoryOption, categoryOptions } from '@/lib/categories'
+
 const { 
   appState,
   createRequest,
 } = useAppState()
 
 const prefix = 'RequestCreator'
 const appeal = useState<string>(`${prefix}.appeal`, () => '')
-const categories = useState<Category[]>(`${prefix}.categories`, () => [])
+const categories = useState<CategoryOption[]>(`${prefix}.categories`, () => [])
 const submitDisabled = computed(() => !appeal.value || categories.value.length === 0)
 
 const submit = () => {
   createRequest({
     appeal: appeal.value,
-    categories: categories.value, 
+    categories: categories.value.map(c => c.value), 
   })
 }
 </script>
 
 <template>
-  <Panel
-    collapsed
-    toggleable
-    header="New Request"
-  >
+  <StandardPage title="Request">
     <FlexCol class="w-fit">
       <IftaLabel>
         <label for="appeal">Appeal</label>
@@ -38,18 +36,20 @@ const submit = () => {
         <MultiSelect
           id="categories"
           v-model="categories"
-          :options="[Category.Book, Category.Movie]"
-        />
+          :options="categoryOptions"
+        >
+          <template #option="slotProps">
+            <CategoryOption :value="slotProps.option" />
+          </template>
+        </MultiSelect>
       </IftaLabel>
       <Button
         :disabled="submitDisabled"
         label="Create Appeal"
+        icon-pos="right"
+        icon="pi pi-send"
         @click="submit"
       />
-      <StandardDebug
-        label="App State"
-        :value="appState"
-      />
     </FlexCol>
-  </Panel>
-</template>
+  </StandardPage>
+</template>