diff --git a/components/CharLimitedFieldset/index.scss b/components/CharLimitedFieldset/index.scss index 5755fd4a..8f81bf3b 100644 --- a/components/CharLimitedFieldset/index.scss +++ b/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); } diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss index ec5a0774..6f810515 100644 --- a/components/PartyDetails/index.scss +++ b/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; diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx index d7f11131..e7410812 100644 --- a/components/PartyDetails/index.tsx +++ b/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) => {
{ (appSnapshot.party.name) ?

{appSnapshot.party.name}

: '' } { (appSnapshot.party.raid) ?
{appSnapshot.party.raid.name.en}
: '' } - { (appSnapshot.party.description) ?

{appSnapshot.party.description}

: '' } + { (appSnapshot.party.description) ?

{appSnapshot.party.description}

: '' }
) diff --git a/styles/variables.scss b/styles/variables.scss index 3b8264a3..cfd1c4c4 100644 --- a/styles/variables.scss +++ b/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;