feat: add matrix logo

hackerspace-ntnu · Jan 20, 2025 · cff83a1 · cff83a1
1 parent 5513570
commit cff83a1
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 79 deletions.
diff --git a/src/components/assets/logos/FeideLogo.tsx b/src/components/assets/logos/FeideLogo.tsx
@@ -1,24 +1,16 @@
 import { cx } from '@/lib/utils';
 
-function FeideLogo({
-  className,
-  title,
-  ...props
-}: {
-  className?: string;
-  title: string;
-}) {
+function FeideLogo({ className, ...props }: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       className={cx('text-black dark:text-white', className)}
       width='100%'
       height='100%'
       viewBox='0 0 114 39'
       xmlns='http://www.w3.org/2000/svg'
-      aria-describedby='feidelogo'
+      aria-hidden='true'
       {...props}
     >
-      <title id='feidelogo'>{title}</title>
       <rect x='27.99' y='20.34' width='4.24' height='10.18' fill='#1f4698' />
       <path
         d='M18.23,23.31l-4.24,0l0,11.45l-9.75,0l0,-14.42l-4.24,0l0,15.27l0.02,0l0,3.39l32.21,0l-0,-4.24l-14,0l-0,-11.45Z'

diff --git a/src/components/assets/logos/HackerspaceLogo.tsx b/src/components/assets/logos/HackerspaceLogo.tsx
@@ -1,4 +1,7 @@
-function HackerspaceLogo({ className, ...props }: { className?: string }) {
+function HackerspaceLogo({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       className={className}

diff --git a/src/components/assets/logos/IDILogo.tsx b/src/components/assets/logos/IDILogo.tsx
@@ -1,24 +1,16 @@
 import { cx } from '@/lib/utils';
 
-function IDILogo({
-  className,
-  title,
-  ...props
-}: {
-  className?: string;
-  title: string;
-}) {
+function IDILogo({ className, ...props }: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       className={cx('text-black dark:text-white', className)}
       width='100%'
       height='100%'
       viewBox='0 0 438 129'
       xmlns='http://www.w3.org/2000/svg'
-      aria-describedby='idilogo'
+      aria-hidden='true'
       {...props}
     >
-      <title id='idilogo'>{title}</title>
       <path
         d='M27.923,27.928l-18.619,0l0,-18.622l18.619,0l0,18.622Zm0,-27.926l-18.618,0c-5.14,0 -9.305,4.166 -9.305,9.305l0,18.621c0,5.136 4.165,9.303 9.305,9.303l18.618,0c5.138,0 9.304,-4.167 9.304,-9.303l0,-18.621c0,-5.139 -4.166,-9.305 -9.304,-9.305'
         fill='#214ca1'

diff --git a/src/components/assets/logos/MatrixLogo.tsx b/src/components/assets/logos/MatrixLogo.tsx
@@ -0,0 +1,21 @@
+function MatrixLogo({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      width='100%'
+      height='100%'
+      viewBox='0 0 27.9 32'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <g transform='translate(-.095 .005)' fill='currentColor'>
+        <path d='m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z' />
+        <path d='m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z' />
+        <path d='m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z' />
+      </g>
+    </svg>
+  );
+}
+
+export { MatrixLogo };
diff --git a/src/components/assets/logos/NexusLogo.tsx b/src/components/assets/logos/NexusLogo.tsx
diff --git a/src/components/assets/logos/index.tsx b/src/components/assets/logos/index.tsx
@@ -1,3 +1,5 @@
 export * from './HackerspaceLogo';
 export * from './IDILogo';
 export * from './NexusLogo';
+export * from './FeideLogo';
+export * from './MatrixLogo';
diff --git a/src/components/auth/FeideButton.tsx b/src/components/auth/FeideButton.tsx
@@ -1,5 +1,6 @@
 'use client';
-import { FeideLogo } from '@/components/assets/logos/FeideLogo';
+
+import { FeideLogo } from '@/components/assets/logos';
 import { Button } from '@/components/ui/Button';
 import { Spinner } from '@/components/ui/Spinner';
 import { api } from '@/lib/api/client';
@@ -17,8 +18,10 @@ function FeideButton() {
     <Button
       className='w-full bg-[#3FACC2]/90 hover:bg-[#3FACC2] dark:bg-[#222832] hover:dark:bg-[#222832]/40'
       onClick={() => signInMutation.mutate()}
+      aria-label='Feide'
+      title='Feide'
     >
-      {signInMutation.isPending ? <Spinner /> : <FeideLogo title='Feide' />}
+      {signInMutation.isPending ? <Spinner /> : <FeideLogo />}
     </Button>
   );
 }

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -190,8 +190,10 @@ function Footer() {
                 prefetch={false}
                 target='_blank'
                 rel='noopener noreferrer'
+                aria-label={t('NTNUIDI')}
+                title={t('NTNUIDI')}
               >
-                <IDILogo className='p-6' title={t('NTNUIDI')} />
+                <IDILogo className='p-6' />
               </ExternalLink>
             </Button>
           </li>
@@ -202,8 +204,10 @@ function Footer() {
                 prefetch={false}
                 target='_blank'
                 rel='noopener noreferrer'
+                aria-label={t('NTNUNexus')}
+                title={t('NTNUNexus')}
               >
-                <NexusLogo className='p-6' title={t('NTNUNexus')} />
+                <NexusLogo className='p-6' />
               </ExternalLink>
             </Button>
           </li>

diff --git a/src/components/layout/header/MatrixButton.tsx b/src/components/layout/header/MatrixButton.tsx
@@ -1,5 +1,5 @@
+import { MatrixLogo } from '@/components/assets/logos';
 import { Button } from '@/components/ui/Button';
-import { MessageSquareMoreIcon } from 'lucide-react';
 import Link from 'next/link';
 
 type MatrixButtonProps = {
@@ -12,11 +12,12 @@ type MatrixButtonProps = {
 function MatrixButton({ className, t }: MatrixButtonProps) {
   return (
     <Button variant='ghost' size='icon' className={className} asChild>
-      <Link href='/' title={t.title} aria-label={t.title}>
-        <MessageSquareMoreIcon
-          className='h-[1.2rem] w-[1.2rem]'
-          aria-hidden='true'
-        />
+      <Link
+        href='https://app.element.io/#/login'
+        title={t.title}
+        aria-label={t.title}
+      >
+        <MatrixLogo className='h-[1.2rem] w-[1.2rem]' />
       </Link>
     </Button>
   );

diff --git a/src/components/ui/Spinner.tsx b/src/components/ui/Spinner.tsx
@@ -1,4 +1,4 @@
-import { Loader2Icon } from 'lucide-react';
+import { Loader2Icon, type LucideProps } from 'lucide-react';
 
 import { type VariantProps, cva } from '@/lib/utils';
 
@@ -22,7 +22,7 @@ function Spinner({
   className,
   size,
   ...props
-}: React.SVGProps<SVGSVGElement> & VariantProps<typeof spinnerVariants>) {
+}: LucideProps & VariantProps<typeof spinnerVariants>) {
   return (
     <Loader2Icon className={spinnerVariants({ size, className })} {...props} />
   );