feat: use classes.link

mythal · Sep 2, 2024 · 5696004 · 5696004
1 parent 731f25d
commit 5696004
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 23 deletions.
diff --git a/apps/site/src/app/[lang]/account/login/Footer.tsx b/apps/site/src/app/[lang]/account/login/Footer.tsx
@@ -3,6 +3,7 @@ import { ChevronLeft } from '@boluo/icons';
 import { FormattedMessage } from 'react-intl';
 import { ButtonLink } from '../../../../components/ButtonLink';
 import Link from 'next/link';
+import * as classes from '@boluo/ui/classes';
 
 interface Props {}
 
@@ -15,7 +16,7 @@ export function Footer(props: Props) {
       </ButtonLink>
 
       <div>
-        <Link className="link" href="/account/reset">
+        <Link className={classes.link} href="/account/reset">
           <FormattedMessage defaultMessage="Forgot password?" />
         </Link>
       </div>

diff --git a/apps/site/src/app/[lang]/account/reset/confirm/[token]/ConfirmResetPassword.tsx b/apps/site/src/app/[lang]/account/reset/confirm/[token]/ConfirmResetPassword.tsx
@@ -3,13 +3,14 @@
 import { TextInput } from '@boluo/ui/TextInput';
 import { isUuid } from '@boluo/utils';
 import Link from 'next/link';
-import { FC, useId, useState } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { type FC, useId, useState } from 'react';
+import { type SubmitHandler, useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import * as validators from '../../../../../../validations';
 import { Button } from '@boluo/ui/Button';
 import { post } from '@boluo/api-browser';
 import { useRouter } from 'next/navigation';
+import * as classes from '@boluo/ui/classes';
 
 interface Props {
   token: string;
@@ -52,7 +53,7 @@ export const ConfirmResetPassword: FC<Props> = ({ token }) => {
           <FormattedMessage defaultMessage="Unable to reset your password, invalid reset link." />
         </div>
         <div className="">
-          <Link href={`/${intl.locale}/account/reset`} className="link">
+          <Link href={`/${intl.locale}/account/reset`} className={classes.link}>
             <FormattedMessage defaultMessage="Try again" />
           </Link>
         </div>

diff --git a/apps/site/src/app/[lang]/page.tsx b/apps/site/src/app/[lang]/page.tsx
@@ -1,7 +1,8 @@
-import { LangParams, getIntl } from '@boluo/common/server';
+import { type LangParams, getIntl } from '@boluo/common/server';
 import Link from 'next/link';
-import { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 import { UserOperations } from '../../components/UserOperations';
+import * as classes from '@boluo/ui/classes';
 
 const Card: FC<{ children: ReactNode; className?: string }> = ({ children, className = '' }) => {
   return (
@@ -48,7 +49,7 @@ export default function Page({ params }: { params: LangParams }) {
             defaultMessage:
               'This is latest version of Boluo, which is still under active development. If you perfer the legacy version, please visit',
           })}{' '}
-          <Link className="link" href="https://old.boluo.chat">
+          <Link className={classes.link} href="https://old.boluo.chat">
             old.boluo.chat
           </Link>
         </Para>

diff --git a/apps/site/src/app/[lang]/space/create/page.tsx b/apps/site/src/app/[lang]/space/create/page.tsx
@@ -1,10 +1,11 @@
-import { Metadata } from 'next';
-import { getIntl, LangParams } from '@boluo/common/server';
+import { type Metadata } from 'next';
+import { getIntl, type LangParams } from '@boluo/common/server';
 import { CreateSpaceForm } from '../../../../components/CreateSpaceForm';
 import Link from 'next/link';
 import Icon from '@boluo/ui/Icon';
 import { ChevronLeft } from '@boluo/icons';
 
+import * as classes from '@boluo/ui/classes';
 export function generateMetadata({ params }: { params: LangParams }): Metadata {
   const intl = getIntl(params);
 
@@ -19,7 +20,7 @@ export default function Page({ params }: { params: LangParams }) {
   return (
     <main className="bg-card-bg shadow-1 border-card-border shadow-card-shadow container max-w-md rounded-sm border p-6">
       <div>
-        <Link href={`/${params.lang}`} className="link">
+        <Link href={`/${params.lang}`} className={classes.link}>
           <Icon icon={ChevronLeft} />
           {intl.formatMessage({ defaultMessage: 'Boluo' })}
         </Link>

diff --git a/apps/site/src/app/[lang]/space/invite/[spaceId]/[token]/AcceptButton.tsx b/apps/site/src/app/[lang]/space/invite/[spaceId]/[token]/AcceptButton.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import type { FC } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@boluo/ui/Button';
+import * as classes from '@boluo/ui/classes';
 
 interface Props {
   spaceId: string;
@@ -22,7 +23,7 @@ export const AcceptButton: FC<Props> = ({ spaceId, token }) => {
   };
   const loginLink = (
     <span>
-      <Link href="/account/login" className="link">
+      <Link href="/account/login" className={classes.link}>
         <FormattedMessage defaultMessage="log in" />
       </Link>
     </span>

diff --git a/apps/site/src/app/not-found.tsx b/apps/site/src/app/not-found.tsx
@@ -1,5 +1,6 @@
-import { Metadata } from 'next';
+import { type Metadata } from 'next';
 import Link from 'next/link';
+import * as classes from '@boluo/ui/classes';
 
 export const metadata: Metadata = {
   title: 'Not Found - Boluo',
@@ -14,7 +15,7 @@ export default function NotFound() {
 
           <p className="">
             This page could not be found.{' '}
-            <Link href="/" className="link">
+            <Link href="/" className={classes.link}>
               Back
             </Link>
           </p>

diff --git a/apps/site/src/components/UserOperations.tsx b/apps/site/src/components/UserOperations.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useLogout } from '../hooks/useLogout';
 import { LoadingText } from '@boluo/ui/LoadingText';
+import * as classes from '@boluo/ui/classes';
 
 export const UserOperations = () => {
   const intl = useIntl();
@@ -28,12 +29,12 @@ export const UserOperations = () => {
           defaultMessage="You are not logged in, {signUp} or {login}."
           values={{
             signUp: (
-              <Link className="link" href="/account/sign-up">
+              <Link className={classes.link} href="/account/sign-up">
                 Sign Up
               </Link>
             ),
             login: (
-              <Link className="link" href="/account/login">
+              <Link className={classes.link} href="/account/login">
                 Login
               </Link>
             ),
@@ -45,13 +46,13 @@ export const UserOperations = () => {
     <div className="flex flex-col gap-4">
       <div>
         <FormattedMessage defaultMessage="Hi, {username}!" values={{ username: currentUser.nickname }} /> (
-        <a href="#" className="link" onClick={logout}>
+        <a href="#" className={classes.link} onClick={logout}>
           <FormattedMessage defaultMessage="Logout" />
         </a>
         )
       </div>
-      <div>
-        <Link className="link text-lg" href={`${appUrl}/${intl.locale}`} target="_blank">
+      <div className="text-lg">
+        <Link className={classes.link} href={`${appUrl}/${intl.locale}`} target="_blank">
           Open Boluo
         </Link>
       </div>

diff --git a/apps/spa/components/compose/MediaLine.tsx b/apps/spa/components/compose/MediaLine.tsx
@@ -8,6 +8,7 @@ import { FormattedMessage } from 'react-intl';
 import { mediaUrl } from '@boluo/api-browser';
 import { showFileSize } from '@boluo/utils';
 import { mediaMaxSizeByte, supportedMediaType } from '../../media';
+import * as classes from '@boluo/ui/classes';
 
 export const MediaLine: FC = () => {
   const { composeAtom } = useChannelAtoms();
@@ -37,7 +38,7 @@ export const MediaLine: FC = () => {
     );
   } else {
     content = (
-      <a href={mediaUrl(composeMedia)} target="_blank" className="link">
+      <a href={mediaUrl(composeMedia)} target="_blank" className={classes.link}>
         <FormattedMessage defaultMessage="Link" />
       </a>
     );

diff --git a/apps/spa/components/pane-channel-export/PaneChannelExport.tsx b/apps/spa/components/pane-channel-export/PaneChannelExport.tsx
@@ -77,7 +77,7 @@ const ExportForm: FC<{ channel: Channel }> = ({ channel }) => {
       const url = URL.createObjectURL(blob);
       const link = linkRef.current;
       if (!link) {
-        throw new Error('link element is not found');
+        throw new Error('The link node for export is not found');
       }
       link.href = url;
       link.download = filename;

diff --git a/packages/ui/tailwind.css b/packages/ui/tailwind.css
@@ -52,9 +52,6 @@
 }
 
 @layer components {
-  .link {
-    @apply text-link-normal hover:text-link-hover active:text-link-active no-underline;
-  }
 }
 
 @layer utilities {
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,9 +52,6 @@ @@
     }
     @layer components {
-      .link {
-        @apply text-link-normal hover:text-link-hover active:text-link-active no-underline;
-      }
     }
     @layer utilities {
@@ Expand Down @@