PageLink use TextAnchor

src/components/PageLink/PageLink.scss

@@ -25,5 +25,7 @@
     color: color(dark-blue);
     margin-left: 1rem;
     display: flex;
+    text-decoration: none;
+    font-weight: normal;
   }
 }

src/components/PageLink/PageLink.tsx

@@ -1,20 +1,21 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
 import "./PageLink.scss";
+import TextAnchor from "../TextAnchor";
+import { TextSize } from "../TextAnchor/TextAnchor";
 
 export interface PageLinkProps {
   to: string;
   desc: string;
 }
-export interface PageLinkState {}
+export interface PageLinkState { }
 
 class PageLink extends React.Component<PageLinkProps, PageLinkState> {
   render() {
-    const {to, desc} = this.props;
+    const { to, desc } = this.props;
     return (
       <div className="page-link">
         <p>{this.props.children}</p>
-        <Link to={to}>{desc}</Link>
+        <TextAnchor to={to}>{desc}</TextAnchor>
       </div>
     );
   }

src/components/TextAnchor/TextAnchor.scss

@@ -4,15 +4,15 @@
   text-decoration: underline;
   font-weight: 600;
 
-  &.no-weight {
+  &__no-weight {
     font-weight: 100;
+  }
 
-    &.small {
-      text-decoration: none;
-      margin: 0 1rem;
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      margin-top: 10px;
-    }
+  &__small {
+    text-decoration: none;
+    margin: 0 1rem;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    margin-top: 10px;
   }
 }

src/components/TextAnchor/TextAnchor.tsx

@@ -5,6 +5,7 @@ import { ColorEnum, getColor, getHoverColor } from "../ColorDiv/ColorDiv";
 
 
 export enum TextSize {
+  Normal,
   Small,
   Large,
   Ribbon,
@@ -12,10 +13,11 @@ export enum TextSize {
 }
 
 const sizes = new Map<TextSize, string>([
-  [TextSize.Small, "sm"],
-  [TextSize.Large, "lg"],
-  [TextSize.SmallRibbon, "no-weight small"],
-  [TextSize.Ribbon, "no-weight"],
+  [TextSize.Normal, ""],
+  [TextSize.Small, "text-anchor__small"],
+  [TextSize.Large, "text-anchor__large"],
+  [TextSize.SmallRibbon, "text-anchor__no-weight text-anchor__small"],
+  [TextSize.Ribbon, "text-anchor__no-weight"],
 ]);
 
 export interface TextAnchorProps {
@@ -32,7 +34,7 @@ class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
     const { children, size, to, style, textColor, hoverColor } = this.props;
     const classColor = textColor !== undefined ? getColor(textColor) : getColor(ColorEnum.DarkBlue);
     const classHoverColor = hoverColor !== undefined ? getHoverColor(hoverColor) : getHoverColor(ColorEnum.Blue);
-    const classSize = size !== undefined ? sizes.get(size) : sizes.get(TextSize.Small);
+    const classSize = size !== undefined ? sizes.get(size) : sizes.get(TextSize.Normal);
     const className = `text-anchor ${classSize} ${classColor} ${classHoverColor}`;
     if (to.startsWith("/")) {
       return (

src/pages/FrontPage/FrontPage.tsx

@@ -190,7 +190,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
               Lue tuoreimmat uutiset
             </PageLink>
-            <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+            <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
               Kuvia tapahtumista
             </PageLink>
           </div>