customlink -> custom-link

web/components/answers/compatibility-questions-display.tsx

@@ -190,7 +190,7 @@ export function CompatibilityQuestionsDisplay(props: {
       ) : (
         <>
           {isCurrentUser && !fromProfilePage && (
-            <span className='customlink'>
+            <span className='custom-link'>
               {otherQuestions.length < 1 ? (
                 <span className="text-ink-600 text-sm">
                   You've already answered all the compatibility questions—

web/components/bio/editable-bio.tsx

@@ -28,7 +28,7 @@ Write a clear and engaging bio to help others understand who you are and the con
 
 export function BioTips() {
   return (
-    <ShowMore labelClosed="Tips" labelOpen="Hide info" className={'customlink text-sm'}>
+    <ShowMore labelClosed="Tips" labelOpen="Hide info" className={'custom-link text-sm'}>
       <ReactMarkdown>{tips}</ReactMarkdown>
       <Link href="/tips-bio" target="_blank">Read full tips for writing a high-quality bio</Link>
     </ShowMore>

web/components/markdown.tsx

@@ -29,7 +29,7 @@ export default function MarkdownPage({content, filename}: Props) {
   return (
     <LovePage trackPageView={filename} className={'col-span-8'}>
       <Col className="items-center">
-        <Col className='w-full rounded px-3 py-4 sm:px-6 space-y-4 customlink'>
+        <Col className='w-full rounded px-3 py-4 sm:px-6 space-y-4 custom-link'>
           <ReactMarkdown
             components={{
               a: ({node: _node, children, ...props}) => <MarkdownLink {...props}>{children}</MarkdownLink>

web/components/searches/button.tsx

@@ -180,7 +180,7 @@ function StarModal(props: {
                 {visibleUsers.map((user) => (
                   <li key={user.id}
                       className="items-center justify-between gap-2 list-item marker:text-ink-500 marker:font-bold">
-                    <a className={'customlink'}>
+                    <a className={'custom-link'}>
                       {user.name} (<Link
                       href={`/${user.username}`}
                       // style={{color: "#2563eb", textDecoration: "none"}}

web/components/votes/vote-info.tsx

@@ -54,7 +54,7 @@ export function VoteComponent() {
           </select>
         </div>
       </Row>
-      <p className={'customlink'}>
+      <p className={'custom-link'}>
         You can discuss any of those proposals through the <Link href={'/contact'}>contact form</Link>, the <Link href={formLink}>feedback form</Link>, or any of our <Link href={'/social'}>socials</Link>.
       </p>
 

web/components/votes/vote-item.tsx

@@ -33,9 +33,9 @@ export function VoteItem(props: {
           <Col className='text-sm text-gray-500 italic'>
             <Content className="w-full" content={vote.description as JSONContent}/>
           </Col>
-          <Row className={'gap-2 mt-2 items-center justify-between w-full customlink flex-wrap'}>
+          <Row className={'gap-2 mt-2 items-center justify-between w-full custom-link flex-wrap'}>
             {!!vote.priority ? <div>Priority: {vote.priority.toFixed(0)}%</div> : <p></p>}
-            {!vote.is_anonymous && creator?.username && <Link href={`/${creator.username}`} className="customlink">{creator.username}</Link>}
+            {!vote.is_anonymous && creator?.username && <Link href={`/${creator.username}`} className="custom-link">{creator.username}</Link>}
           </Row>
           <VoteButtons
             voteId={vote.id}

web/pages/about.tsx

@@ -61,7 +61,7 @@ export default function About() {
                 <AboutBlock
                   title="Democratic"
                   text={<span
-                    className="customlink">Governed and <Link href="/vote">voted</Link> by the community, while ensuring no drift through our <Link
+                    className="custom-link">Governed and <Link href="/vote">voted</Link> by the community, while ensuring no drift through our <Link
                     href="/constitution">constitution</Link>.</span>}
                 />
 
@@ -126,7 +126,7 @@ export default function About() {
                 </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
                   <h5 id="donate" className="font-bold mb-4 text-xl text-center">Donate</h5>
-                  <p className="mb-4 text-center customlink"><Link href="/support">Support</Link> our not-for-profit
+                  <p className="mb-4 text-center custom-link"><Link href="/support">Support</Link> our not-for-profit
                     infrastructure.</p>
                   <div className="flex flex-col gap-4 w-full items-center">
                     <a

web/pages/register.tsx

@@ -201,7 +201,7 @@ function RegisterComponent() {
                 </div>
 
                 <div>
-                  <p className="text-sm mt-2 text-center customlink">
+                  <p className="text-sm mt-2 text-center custom-link">
                     By signing up, I agree to the{" "}
                     <Link href="/terms">
                       Terms and Conditions
@@ -238,7 +238,7 @@ function RegisterComponent() {
                 </div>
               </form>
               <div className="my-8"/>
-              <div className="text-center customlink">
+              <div className="text-center custom-link">
                 <p className="">
                   Already have an account?{' '}
                   <Link href="/signin">

web/pages/signin.tsx

@@ -182,7 +182,7 @@ function RegisterComponent() {
               <GoogleButton onClick={handleGoogleSignIn} isLoading={isLoading}/>
             </div>
           </form>
-          <div className="text-center customlink">
+          <div className="text-center custom-link">
             <p className="">
               No account?{' '}
               <Link href="/register">

web/styles/globals.css

@@ -365,27 +365,27 @@ ul {
     padding-left: 1.25rem;
     margin-top: 0.5rem;
 }
-.customlink a,
-.customlink button{
+.custom-link a,
+.custom-link button{
     color: rgb(var(--color-primary-500));
     text-decoration: none;
     font-family: var(--font-main), serif;
 }
 
-.dark .customlink a,
-.dark .customlink button {
+.dark .custom-link a,
+.dark .custom-link button {
     color: rgb(var(--color-primary-600));
     text-decoration: none;
     font-family: var(--font-main), serif;
 }
 
-.customlink a:hover,
-.customlink button:hover {
+.custom-link a:hover,
+.custom-link button:hover {
     text-decoration: underline;
 }
 
-.dark .customlink a:hover,
-.dark .customlink button:hover {
+.dark .custom-link a:hover,
+.dark .custom-link button:hover {
     text-decoration: underline;
 }