Web: Files: Public: fixed styles

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js

@@ -220,7 +220,13 @@ const LinkRow = (props) => {
       <Avatar
         size="min"
         source={LinkReactSvgUrl}
-        roleIcon={expiryDate ? <ClockReactSvg /> : null}
+        roleIcon={
+          expiryDate ? (
+            <div className="clock-icon">
+              <ClockReactSvg />
+            </div>
+          ) : null
+        }
         withTooltip={expiryDate}
         tooltipContent={tooltipContent}
       />

packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/Styled.js

@@ -97,18 +97,32 @@ const StyledLinkRow = styled.div`
     `}
   }
 
+  .clock-icon {
+    svg {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+    }
+
+    width: 12px;
+    height: 12px;
+    border: ${(props) => `1px solid ${props.theme.backgroundColor}`};
+    border-radius: 50%;
+  }
+
   .avatar_role-wrapper {
     ${({ isExpired, theme }) => css`
       svg {
-        border: ${(props) => `1px solid ${props.theme.backgroundColor}`};
-        border-radius: 50%;
-
         path {
           fill: ${isExpired
             ? theme.infoPanel.links.iconErrorColor
             : theme.infoPanel.links.iconColor};
         }
       }
+
+      circle {
+        fill: ${(props) => props.theme.backgroundColor};
+      }
     `}
   }
 `;

public/images/clock.react.svg

@@ -1,9 +1,11 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2052_18287)">
+<g clip-path="url(#clip0_5080_185586)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6ZM6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0ZM5 3V6C5 6.37877 5.214 6.72504 5.55279 6.89443L7.55279 7.89443L8.44721 6.10557L7 5.38197V3H5Z" fill="#657077"/>
+<circle cx="6" cy="6" r="6" fill="white"/>
+<path d="M5 3V6C5 6.37877 5.214 6.72504 5.55279 6.89443L7.55279 7.89443L8.44721 6.10557L7 5.38197V3H5Z" fill="#F24724"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0ZM2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6Z" fill="#F24724"/>
 </g>
 <defs>
-<clipPath id="clip0_2052_18287">
+<clipPath id="clip0_5080_185586">
 <rect width="12" height="12" fill="white"/>
 </clipPath>
 </defs>