chore: update link styles

web/src/components/BetaBadge.tsx

@@ -10,7 +10,9 @@ const BetaBadge: React.FC<Props> = (props: Props) => {
 
   return (
     <span
-      className={`mx-1 px-1 leading-5 text-xs border dark:border-zinc-600 rounded-full text-gray-500 dark:text-gray-400 ${className ?? ""}`}
+      className={`mx-1 px-1 leading-5 text-xs border font-normal dark:border-zinc-600 rounded-full text-gray-500 dark:text-gray-400 ${
+        className ?? ""
+      }`}
     >
       {t("common.beta")}
     </span>

web/src/components/CreateMemoRelationDialog.tsx

@@ -96,7 +96,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
               {memoList.map((memo) => (
                 <div
-                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-full cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
                   key={memo.id}
                   onClick={() => handleDeleteMemoRelation(memo)}
                 >

web/src/components/MemoEditor/RelationListView.tsx

@@ -38,7 +38,7 @@ const RelationListView = (props: Props) => {
             return (
               <div
                 key={memo.id}
-                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <Icon.Link className="w-4 h-auto shrink-0 opacity-80" />

web/src/components/MemoRelationListView.tsx

@@ -40,7 +40,7 @@ const MemoRelationListView = (props: Props) => {
             return (
               <div key={memo.id} className="block w-auto max-w-[50%]">
                 <Link
-                  className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
                 >
                   <Tooltip title="Reference" placement="top">
@@ -60,7 +60,7 @@ const MemoRelationListView = (props: Props) => {
             return (
               <div key={memo.id} className="block w-auto max-w-[50%]">
                 <Link
-                  className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
                 >
                   <Tooltip title="Backlink" placement="top">

web/src/components/Settings/SSOSection.tsx

@@ -107,10 +107,10 @@ const SSOSection = () => {
       ))}
 
       <div className="w-full mt-8">
-        <p className="text-sm">{t("common.learn-more")}</p>
+        <p className="text-sm">{t("common.learn-more")}:</p>
         <List component="ul" marker="disc" size="sm">
           <ListItem>
-            <Link className="text-sm hover:underline hover:text-blue-600" to="https://www.usememos.com/docs/advanced-settings/keycloak">
+            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/docs/advanced-settings/keycloak">
               Configuring Keycloak for Authentication
             </Link>
           </ListItem>

web/src/components/Settings/StorageSection.tsx

@@ -124,21 +124,15 @@ const StorageSection = () => {
         ))}
       </div>
       <div className="w-full mt-4">
-        <p className="text-sm">{t("common.learn-more")}</p>
+        <p className="text-sm">{t("common.learn-more")}:</p>
         <List component="ul" marker="disc" size="sm">
           <ListItem>
-            <Link
+            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/docs/advanced-settings/local-storage">
-              className="text-sm hover:underline hover:text-blue-600"
-              to="https://www.usememos.com/docs/advanced-settings/local-storage"
-            >
               Docs - Local storage
             </Link>
           </ListItem>
           <ListItem>
-            <Link
+            <Link className="text-sm text-blue-600 hover:underline" to="https://www.usememos.com/blog/choosing-a-storage-for-your-resource">
-              className="text-sm hover:underline hover:text-blue-600"
-              to="https://www.usememos.com/blog/choosing-a-storage-for-your-resource"
-            >
               Choosing a Storage for Your Resource: Database, S3 or Local Storage?
             </Link>
           </ListItem>