From 30ee7083437c230b6a866f47afc9c710e1d095e6 Mon Sep 17 00:00:00 2001
From: Evgeny Taktarov <je.mouth@gmail.com>
Date: Tue, 15 Aug 2023 15:58:13 +0700
Subject: [PATCH 1/3] feat: add version to footer

---
 shared/components/footer/footer.tsx | 12 ++++++++++++
 shared/components/footer/styles.tsx | 17 +++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/shared/components/footer/footer.tsx b/shared/components/footer/footer.tsx
index d71abaac1..3f2531a27 100644
--- a/shared/components/footer/footer.tsx
+++ b/shared/components/footer/footer.tsx
@@ -1,24 +1,36 @@
 import { FC } from 'react';
+import { version } from 'build-info.json';
 
 import {
   FooterStyle,
   FooterLink,
   LogoLidoStyle,
   FooterDivider,
+  Version,
+  LinkDivider,
 } from './styles';
 
+const widgetVersion =
+  version === 'REPLACE_WITH_VERSION' ? 'dev' : `v${version}`;
+
 export const Footer: FC = () => (
   <FooterStyle size="full" forwardedAs="footer">
     <LogoLidoStyle />
     <FooterLink data-testid="termsOfUse" href="https://lido.fi/terms-of-use">
       Terms of Use
     </FooterLink>
+    <LinkDivider />
     <FooterLink
       data-testid="privacyNotice"
       href="https://lido.fi/privacy-notice"
     >
       Privacy Notice
     </FooterLink>
+    <Version
+      href={`https://github.com/lidofinance/ethereum-staking-widget/releases/${version}`}
+    >
+      {widgetVersion}
+    </Version>
     <FooterDivider />
   </FooterStyle>
 );
diff --git a/shared/components/footer/styles.tsx b/shared/components/footer/styles.tsx
index dbab07e78..f59010843 100644
--- a/shared/components/footer/styles.tsx
+++ b/shared/components/footer/styles.tsx
@@ -1,5 +1,6 @@
-import { Container, Link } from '@lidofinance/lido-ui';
 import styled from 'styled-components';
+
+import { Container, Link } from '@lidofinance/lido-ui';
 import { LogoLido } from 'shared/components/logos/logos';
 import { NAV_MOBILE_MEDIA } from '../header/components/navigation/styles';
 
@@ -35,12 +36,12 @@ export const FooterLink = styled(Link)`
       opacity: 1;
     }
   }
+`;
 
-  &:not(:last-of-type)::after {
-    content: '';
-    border-right: 1px solid var(--lido-color-textSecondary);
-    margin: 0 6px;
-  }
+export const LinkDivider = styled.div`
+  background: var(--lido-color-textSecondary);
+  width: 1px;
+  margin: 2px 6px;
 `;
 
 export const LogoLidoStyle = styled(LogoLido)`
@@ -64,3 +65,7 @@ export const FooterDivider = styled.div`
     display: none;
   }
 `;
+
+export const Version = styled(FooterLink)`
+  margin-left: auto;
+`;

From 63937b7a88f32410bafb0ae04b1b284f71481221 Mon Sep 17 00:00:00 2001
From: Evgeny Taktarov <je.mouth@gmail.com>
Date: Wed, 16 Aug 2023 14:47:41 +0700
Subject: [PATCH 2/3] feat: update design

---
 shared/components/footer/footer.tsx | 29 +++++++++++++++++++++--------
 shared/components/footer/styles.tsx |  4 ++++
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/shared/components/footer/footer.tsx b/shared/components/footer/footer.tsx
index 3f2531a27..c36fb4b80 100644
--- a/shared/components/footer/footer.tsx
+++ b/shared/components/footer/footer.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { version } from 'build-info.json';
+import { version, branch } from 'build-info.json';
 
 import {
   FooterStyle,
@@ -10,8 +10,25 @@ import {
   LinkDivider,
 } from './styles';
 
-const widgetVersion =
-  version === 'REPLACE_WITH_VERSION' ? 'dev' : `v${version}`;
+const getVersionInfo = () => {
+  const repoBaseUrl = 'https://github.com/lidofinance/ethereum-staking-widget';
+  if (version === 'REPLACE_WITH_VERSION')
+    return {
+      label: 'dev',
+      link: repoBaseUrl,
+    };
+  if (version === branch + ':-unknown')
+    return {
+      label: 'preview',
+      link: `${repoBaseUrl}/tree/${branch}`,
+    };
+  return {
+    label: `v${version}`,
+    link: `${repoBaseUrl}/releases/tag/${version}`,
+  };
+};
+
+const { label, link } = getVersionInfo();
 
 export const Footer: FC = () => (
   <FooterStyle size="full" forwardedAs="footer">
@@ -26,11 +43,7 @@ export const Footer: FC = () => (
     >
       Privacy Notice
     </FooterLink>
-    <Version
-      href={`https://github.com/lidofinance/ethereum-staking-widget/releases/${version}`}
-    >
-      {widgetVersion}
-    </Version>
+    <Version href={link}>{label}</Version>
     <FooterDivider />
   </FooterStyle>
 );
diff --git a/shared/components/footer/styles.tsx b/shared/components/footer/styles.tsx
index f59010843..4d22e6e7e 100644
--- a/shared/components/footer/styles.tsx
+++ b/shared/components/footer/styles.tsx
@@ -68,4 +68,8 @@ export const FooterDivider = styled.div`
 
 export const Version = styled(FooterLink)`
   margin-left: auto;
+  padding: 2px 5px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.xs}px;
+  background: rgba(122, 138, 160, 0.1);
+  color: var(--lido-color-secondary);
 `;

From b732eb985da9bceea89dcbbf85028d8e15479f1e Mon Sep 17 00:00:00 2001
From: Evgeny Taktarov <je.mouth@gmail.com>
Date: Wed, 16 Aug 2023 15:38:48 +0700
Subject: [PATCH 3/3] fix: style

---
 shared/components/footer/styles.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/shared/components/footer/styles.tsx b/shared/components/footer/styles.tsx
index 4d22e6e7e..87776dbcd 100644
--- a/shared/components/footer/styles.tsx
+++ b/shared/components/footer/styles.tsx
@@ -71,5 +71,4 @@ export const Version = styled(FooterLink)`
   padding: 2px 5px;
   border-radius: ${({ theme }) => theme.borderRadiusesMap.xs}px;
   background: rgba(122, 138, 160, 0.1);
-  color: var(--lido-color-secondary);
 `;