Update link component

src/components/Link/index.tsx

@@ -15,14 +15,21 @@ type LinkProps = {
     | 'black'
     | 'white'
     | string;
+  selected?: boolean;
   className?: string;
   iconLeft?: React.SVGProps<SVGSVGElement>;
   onClick?: () => void;
 };
 
-const Link = ({ href, children, iconLeft, ...props }: LinkProps) => {
+const Link = ({
+  href,
+  children,
+  iconLeft,
+  selected = false,
+  ...props
+}: LinkProps) => {
   return (
-    <Wrapper {...props}>
+    <Wrapper {...props} selected={selected}>
       <RouterLink to={href}>
         {iconLeft && <span className='icon left'>{iconLeft}</span>}
         {children}

src/components/Link/styles.ts

@@ -12,6 +12,7 @@ type WrapperProps = {
     | 'black'
     | 'white'
     | string;
+  selected: boolean;
   iconLeft?: React.SVGProps<SVGSVGElement>;
 };
 
@@ -19,7 +20,7 @@ export const Wrapper = styled.div<WrapperProps>`
   display: inline;
 
   a {
-    text-decoration: none;
+    text-decoration: ${({ selected }) => (selected ? 'underline' : 'none')};
 
     &:hover {
       text-decoration: underline;
@@ -31,6 +32,10 @@ export const Wrapper = styled.div<WrapperProps>`
       return css`
         color: #3e66fb;
 
+        a {
+          color: #3e66fb;
+        }
+
         .icon svg path {
           stroke: #3e66fb;
         }
@@ -44,6 +49,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.client.main};
 
+          a {
+            color: ${theme.colors.client.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.client.main};
           }
@@ -56,6 +65,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.productOwner.main};
 
+          a {
+            color: ${theme.colors.productOwner.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.productOwner.main};
           }
@@ -68,6 +81,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.developer.main};
 
+          a {
+            color: ${theme.colors.developer.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.developer.main};
           }
@@ -80,6 +97,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.admin.main};
 
+          a {
+            color: ${theme.colors.admin.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.admin.main};
           }
@@ -92,6 +113,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.success.main};
 
+          a {
+            color: ${theme.colors.success.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.success.main};
           }
@@ -104,6 +129,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.warning.main};
 
+          a {
+            color: ${theme.colors.warning.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.warning.main};
           }
@@ -116,6 +145,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.error.main};
 
+          a {
+            color: ${theme.colors.error.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.error.main};
           }
@@ -128,6 +161,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.black.main};
 
+          a {
+            color: ${theme.colors.black.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.black.main};
           }
@@ -140,6 +177,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${theme.colors.white.main};
 
+          a {
+            color: ${theme.colors.white.main};
+          }
+
           .icon svg path {
             stroke: ${theme.colors.white.main};
           }
@@ -152,6 +193,10 @@ export const Wrapper = styled.div<WrapperProps>`
         return css`
           color: ${color};
 
+          a {
+            color: ${color};
+          }
+
           .icon svg path {
             stroke: ${color};
           }