Some Ribbon and Link style fixes

src/components/Ribbon/Ribbon.scss

@@ -6,25 +6,15 @@
   align-items: flex-end;
   text-align: center;
   justify-content: center;
-  width: 100%;
+  margin: auto;
 
   p {
-    display: flex;
     color: $white;
-    margin: 0 1rem;
     font-size: 2rem;
-    font-weight: 300;
+    font-weight: 100;
     line-height: 30px;
-  }
-
-  a {
-    display: flex;
-    color: $white;
-    margin: 0 1rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    margin-top: 10px;
+    margin-block-start: 0;
+    margin-block-end: 0;
   }
 
   @media screen and (max-width: 600px - 1px) {

src/components/TextAnchor/TextAnchor.scss

@@ -1,7 +1,6 @@
 @import "../../assets/scss/globals";
 
 .text-anchor {
-  color: $blue;
   text-decoration: underline;
   font-weight: 600;
 
@@ -9,11 +8,15 @@
     color: $blue;
   }
 
-  &.sm {
-    font-size: 1em;
-  }
+  &.no-weight {
+    font-weight: 100;
 
-  &.lg {
-    font-size: 2em;
+    &.small {
+      text-decoration: none;
+      margin: 0 1rem;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      margin-top: 10px;
+    }
   }
 }

src/components/TextAnchor/TextAnchor.tsx

@@ -5,32 +5,37 @@ import { Link } from "react-router-dom";
 export enum TextSize {
   Small,
   Large,
+  Ribbon,
+  SmallRibbon,
 }
 
 const sizes = new Map<TextSize, string>([
   [TextSize.Small, "sm"],
   [TextSize.Large, "lg"],
+  [TextSize.SmallRibbon, "no-weight sosso"],
+  [TextSize.Ribbon, "no-weight"],
 ]);
 
 export interface TextAnchorProps {
   size?: TextSize;
   to: string;
+  style?: any;
 }
 export interface TextAnchorState {}
 
 class TextAnchor extends React.Component<TextAnchorProps, TextAnchorState> {
   render() {
-    const { children, size, to } = this.props;
+    const { children, size, to, style } = this.props;
     const className = `text-anchor ${sizes.get(size ? size : TextSize.Small)}`;
     if (to.startsWith("/")) {
     return (
-      <Link to={to} className={className}>
+      <Link style={style} to={to} className={className}>
         {children}
       </Link>
     );
     } else {
       return (
-        <a href={to} className={className}>
+        <a style={style} href={to} className={className}>
           {children}
         </a>
       );

src/pages/FrontPage/FrontPage.tsx

@@ -20,6 +20,8 @@ import Button, { ButtonType } from "../../components/Button";
 import Ribbon from "../../components/Ribbon";
 import SponsorReel from "../../components/SponsorReel";
 import HeroAsideItem from "../../components/HeroAsideItem";
+import TextAnchor from "../../components/TextAnchor/index";
+import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -147,7 +149,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         <PageSection backgroundColor={PageSectionColor.Orange}>
           <Ribbon>
             <p>Sössöä vuodesta 1969.</p>
-            <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</a>
+            <TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</TextAnchor>
           </Ribbon>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} bottomBorder cardSection>

src/pages/GuildPage/GuildPage.tsx

@@ -14,6 +14,7 @@ import { BackgroundColor as PageSectionColor } from "../../components/PageSectio
 import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
 import Accordion from "../../components/Accordion";
 import TextAnchor from "../../components/TextAnchor/index";
+import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
 export interface GuildPageProps {}
 export interface GuildPageState {}
@@ -158,7 +159,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           </PageSection>
           <PageSection backgroundColor={PageSectionColor.DarkBlue}>
             <Ribbon>
-              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor to="/jaokset">jaokset</TextAnchor>.</p>
+              <p>Kiltatoimintaa järjestää ja ylläpitää kilta-aktiivit, <TextAnchor size={TextSize.Ribbon} to="/toimikunnat">toimikunnat</TextAnchor> ja <TextAnchor size={TextSize.Ribbon} to="/jaokset">jaokset</TextAnchor>.</p>
             </Ribbon>
           </PageSection>
           <div style={{ display: "flex", }}>