Added onionUrl icon Close btcpayserver#199

vaibhavgarg237 · Sep 27, 2022 · 6c10792 · 6c10792
1 parent a820f43
commit 6c10792
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 24 deletions.
diff --git a/src/components/Directory/Directory.scss b/src/components/Directory/Directory.scss
@@ -67,27 +67,37 @@
       .item-content {
         margin-bottom: 10px;
 
-        a {
-          // color: $mediumGrey;
-          color: $black;
-          font-size: 1rem;
-          text-decoration: none;
-          font-weight: bold;
-          transition: all 0.2s ease-out;
-
+        .icon-title-tor{
           display: flex;
-          align-items: center;
-
-          @media (max-width: $thirdBreak) {
-            font-size: 0.9rem;
-          }
-
-          &:hover {
-            color: $primaryGreen;
+          a {
+            // color: $mediumGrey;
+            color: $black;
+            font-size: 1rem;
+            text-decoration: none;
+            font-weight: bold;
+            transition: all 0.2s ease-out;
+
+            display: flex;
+            align-items: center;
+
+            @media (max-width: $thirdBreak) {
+              font-size: 0.9rem;
+            }
+
+            &:hover {
+              color: $primaryGreen;
+            }
+
+            svg {
+              margin-right: 5px;
+            }
           }
 
-          svg {
-            margin-right: 5px;
+          .onionIcon {
+            margin-left: auto;
+            svg{
+              width: 40px;
+            }
           }
         }
 

diff --git a/src/components/Directory/DirectoryItem.js b/src/components/Directory/DirectoryItem.js
@@ -1,18 +1,29 @@
 import React from "react";
 import "./Directory.scss";
 import { icons } from "./Icons";
+import iconSprite from "../../images/icon-sprite.svg";
 
 function DirectoryItem(props) {
   const formattedTwitter = props.user.twitter ? props.user.twitter.slice(1) : '';
   return (
     <div className="item">
       <div className="item-content">
-        <a href={props.user.url} target="_blank" rel="noopener noreferrer">
-          {props.user.subType
-            ? icons[props.user.subType]
-            : icons[props.user.type]}
-          {props.user.name}
-        </a>
+        <div className="icon-title-tor">
+          <a href={props.user.url} target="_blank" rel="noopener noreferrer">
+            {props.user.subType
+              ? icons[props.user.subType]
+              : icons[props.user.type]}
+            {props.user.name}
+          </a>
+
+          {props.user.onionUrl !== undefined && (
+              <a href={props.user.onionUrl} className="onionIcon" rel="noopener noreferrer">
+                <svg viewBox="0 0 1000 500">
+                  <use href={iconSprite + "#onion"} />
+                </svg>
+              </a>
+            )}
+        </div>
         <p>{props.user.description}</p>
         <div className="separator" />
         <div className='social-media-icons'>