From 08d60401a8daed620bfa54df11b3071a8a31e0ca Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 26 Jun 2023 16:03:54 -0700
Subject: [PATCH] refactor: date format

---
 components/Brand/LogoConnect.vue           | 52 ++++++++++++++++++++++
 components/UserProfile/DropdownContent.vue |  8 ++--
 helpers/time/dateFormat.ts                 |  6 +--
 3 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 components/Brand/LogoConnect.vue

diff --git a/components/Brand/LogoConnect.vue b/components/Brand/LogoConnect.vue
new file mode 100644
index 000000000..89d7a08b5
--- /dev/null
+++ b/components/Brand/LogoConnect.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export interface Props {
+  gradientStart?: string;
+  gradientStop?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  gradientStart: '#e32929',
+  gradientStop: '#ff8d30',
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1486.25 434.9"
+    class="fill-current"
+  >
+    <defs>
+      <linearGradient
+        id="connectLogoCircle"
+        x1="0"
+        x2="434.9"
+        y1="217.45"
+        y2="217.45"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" :stop-color="gradientStart" />
+        <stop offset="1" :stop-color="gradientStop" />
+      </linearGradient>
+    </defs>
+    <title>Unraid Connect logo</title>
+    <path
+      d="m856.71 79.78-31.36 89.97h15.17l7.07-21.08h27.28l-4.45-13.24h-18.73l13.63-39.46 24.81 73.78h16.58l-31.37-89.97h-18.63zm-255.35 0v59.38c0 20.82-13.49 31.87-34.83 31.87s-34.57-11.05-34.57-31.87V79.78h15.29v59.38c0 12.08 7.45 18.51 19.28 18.51s19.54-6.43 19.54-18.51V79.78h15.29Zm49.47 28.02v61.95h-15.29V79.78h14.26l39.84 61.95V79.78h15.3v89.97h-14.27l-39.84-61.95zm281.51-28.02h15.29v89.96h-15.29zm119.39 57.71c0 21.07-13.75 32.26-35.47 32.26h-33.93V79.79h34.19c21.46 0 35.21 11.18 35.21 32.26v25.45Zm-15.3-25.45c0-12.34-7.71-19.02-19.92-19.02h-18.89v63.36h18.64c12.47 0 20.17-6.56 20.17-18.89v-25.45Zm-251.31 23.65c10.16-3.73 16.19-12.34 16.19-26.99 0-20.3-11.82-28.92-29.81-28.92h-31.88v89.96h15.3V93.01h16.06c8.87 0 14.52 4.24 14.52 15.68s-5.65 15.81-14.52 15.81h-7.9l21.52 45.24h17.61l-17.09-34.06Z"
+    />
+    <path
+      d="m856.71 79.78-31.36 89.97h15.17l7.07-21.08h27.28l-4.45-13.24h-18.73l13.63-39.46 24.81 73.78h16.58l-31.37-89.97h-18.63zM650.83 107.8v61.95h-15.29V79.78h14.26l39.84 61.95V79.78h15.3v89.97h-14.27l-39.84-61.95zm281.51-28.02h15.29v89.96h-15.29zm119.39 57.71c0 21.07-13.75 32.26-35.47 32.26h-33.93V79.79h34.19c21.46 0 35.21 11.18 35.21 32.26v25.45Zm-15.3-25.45c0-12.34-7.71-19.02-19.92-19.02h-18.89v63.36h18.64c12.47 0 20.17-6.56 20.17-18.89v-25.45Zm-251.31 23.65c10.16-3.73 16.19-12.34 16.19-26.99 0-20.3-11.82-28.92-29.81-28.92h-31.88v89.96h15.3V93.01h16.06c8.87 0 14.52 4.24 14.52 15.68s-5.65 15.81-14.52 15.81h-7.9l21.52 45.24h17.61l-17.09-34.06Z"
+    />
+    <path
+      fill="none"
+      d="M729.54 233.09c-19.18 0-31.05 10.48-31.05 29.47v42.52c0 19.18 11.87 29.47 30.66 29.47s31.05-10.28 31.05-29.47v-42.52c0-18.99-11.87-29.47-30.66-29.47Z"
+    />
+    <path
+      d="M586.35 212.72c-33.43 0-54.39 17.4-54.39 49.84v42.52c0 32.63 20.96 50.04 53.99 50.04s53.8-16.81 53.8-48.06v-.99h-23.54v.99c0 17.8-11.47 27.49-30.26 27.49s-30.46-10.28-30.46-29.47v-42.52c0-18.99 11.67-29.47 30.85-29.47s29.86 9.89 29.86 27.69v.79h23.54v-.79c0-31.25-20.77-48.06-53.4-48.06Zm143.19 0c-33.42 0-54.59 17.4-54.59 49.84v42.52c0 32.63 21.16 50.04 54.19 50.04s54.59-17.4 54.59-50.04v-42.52c0-32.44-21.16-49.84-54.19-49.84Zm30.66 92.36c0 19.18-11.87 29.47-31.05 29.47s-30.66-10.28-30.66-29.47v-42.52c0-18.99 11.87-29.47 31.05-29.47s30.66 10.48 30.66 29.47v42.52Zm145.56 4.94-61.31-95.32H822.5v138.44h23.53v-95.33l61.31 95.33h21.96V214.7h-23.54v95.32zm147.55 0L992 214.7h-21.96v138.44h23.54v-95.33l61.31 95.33h21.95V214.7h-23.53v95.32zm64.28 43.12h92.95v-20.57h-69.42V294h59.53v-20.37h-59.53v-38.56h69.42V214.7h-92.95v138.44zm181.17-140.42c-33.43 0-54.39 17.4-54.39 49.84v42.52c0 32.63 20.96 50.04 53.99 50.04s53.8-16.81 53.8-48.06v-.99h-23.54v.99c0 17.8-11.47 27.49-30.26 27.49s-30.46-10.28-30.46-29.47v-42.52c0-18.99 11.67-29.47 30.85-29.47s29.86 9.89 29.86 27.69v.79h23.54v-.79c0-31.25-20.77-48.06-53.4-48.06Zm79.31 1.98h108.18v20.37h-108.18zm42.32 31.47h23.54v106.97h-23.54z"
+    />
+    <circle cx="217.45" cy="217.45" r="217.45" fill="url(#connectLogoCircle)" />
+    <path
+      fill="#fff"
+      d="M209.54 171.02h15.69v92.79h-15.69v-92.79ZM72.25 263.81H56.48v-92.79h15.77v92.79ZM133 274.75h15.79v35.51H133v-35.51Zm-38.26-39.61h15.77v57.33H94.74v-57.33Zm76.54 0h15.77v57.33h-15.77v-57.33Zm191.36-64.13h15.77v92.79h-15.77v-92.79Zm-60.82-10.94h-15.77v-35.44h15.77v35.44Zm38.28 39.63h-15.79v-57.35h15.79v57.35Zm-76.54 0h-15.77v-57.35h15.77v57.35Z"
+    />
+  </svg>
+</template>
diff --git a/components/UserProfile/DropdownContent.vue b/components/UserProfile/DropdownContent.vue
index df8a5b699..1fb92298f 100644
--- a/components/UserProfile/DropdownContent.vue
+++ b/components/UserProfile/DropdownContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, CogIcon, InformationCircleIcon, UserIcon } from '@heroicons/vue/24/solid';
+import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, BarsArrowDownIcon, CogIcon, InformationCircleIcon, UserIcon } from '@heroicons/vue/24/solid';
 
 import { ACCOUNT, CONNECT_DASHBOARD, PLUGIN_SETTINGS } from '~/helpers/urls';
 import { useDropdownStore } from '~/store/dropdown';
@@ -76,10 +76,10 @@ const links = computed(():UserProfileLink[] => {
   <div class="flex flex-col gap-y-8px min-w-300px max-w-350px">
     <header class="flex flex-row items-start justify-between mt-8px mx-8px">
       <h2 class="text-18px leading-none inline-flex flex-row gap-x-8px items-center">
-        <span class="font-semibold">Connect</span>
+        <BrandLogoConnect class="w-[130px]" />
         <UpcBeta />
-        <span v-if="myServersEnv" :title="`API • ${myServersEnv}`">⚙️</span>
-        <span v-if="devEnv" :title="`UPC • ${devEnv}`">⚠️</span>
+        <span v-if="myServersEnv" class="text-10px" :title="`API • ${myServersEnv}`">⚙️</span>
+        <span v-if="devEnv" class="text-10px" :title="`UPC • ${devEnv}`">⚠️</span>
       </h2>
     </header>
     <ul class="list-reset flex flex-col gap-y-4px p-0">
diff --git a/helpers/time/dateFormat.ts b/helpers/time/dateFormat.ts
index 43be484c7..943542da0 100644
--- a/helpers/time/dateFormat.ts
+++ b/helpers/time/dateFormat.ts
@@ -1,11 +1,9 @@
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 
+/** @see https://day.js.org/docs/en/display/format#localized-formats */
 dayjs.extend(localizedFormat);
 
-const formatDate = (date: number): string => {
-  console.debug('[formatDate]', date, dayjs(date));
-  return dayjs(date).format('llll');
-}
+const formatDate = (date: number): string => dayjs(date).format('llll');
 
 export default formatDate;