Implemented Linkify in PartyDetails

components/CharLimitedFieldset/index.scss

@@ -8,7 +8,7 @@
     padding-right: $unit * 2;
 
     &:focus-within {
-        border: 2px solid #275DC5;
+        border: 2px solid $blue;
         box-shadow: 0 2px rgba(255, 255, 255, 1);
     }
 

components/PartyDetails/index.scss

@@ -2,6 +2,7 @@
     display: none; // This breaks transition, find a workaround
     opacity: 0;
     margin: 0 auto;
+    margin-bottom: 100px;
     max-width: $unit * 95;
     position: relative;
 
@@ -51,6 +52,14 @@
             margin-bottom: $unit;
         }
 
+        a {
+            color: $blue;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
         .Raid {
             color: $grey-50;
             font-size: $font-regular;

components/PartyDetails/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import Head from 'next/head'
 import { useSnapshot } from 'valtio'
+import Linkify from 'react-linkify'
 import classNames from 'classnames'
 
 import CharLimitedFieldset from '~components/CharLimitedFieldset'
@@ -101,7 +102,7 @@ const PartyDetails = (props: Props) => {
         <section className={readOnlyClasses}>
             { (appSnapshot.party.name) ? <h1>{appSnapshot.party.name}</h1> : '' }
             { (appSnapshot.party.raid) ? <div className="Raid">{appSnapshot.party.raid.name.en}</div> : '' }
-            { (appSnapshot.party.description) ? <p>{appSnapshot.party.description}</p> : '' }
+            { (appSnapshot.party.description) ? <p><Linkify>{appSnapshot.party.description}</Linkify></p> : '' }
         </section>
     )
 

styles/variables.scss

@@ -18,7 +18,7 @@ $grey-90: #F5F5F5;
 $grey-100:#FAFAFA;
 $background-color: $grey-90;
 
-$blue: #61B3FF;
+$blue: #275DC5;
 $red: #FF6161;
 $error: #D13A3A;