From df4948d0faeb114cab98e2d029e9f2e1391410d2 Mon Sep 17 00:00:00 2001
From: Alex <argeares97@gmail.com>
Date: Wed, 27 Sep 2023 17:22:42 +0300
Subject: [PATCH] feat: added branding component

---
 public/images/icons/twitterX.svg              |  11 ++
 public/images/icons/web.svg                   |  10 ++
 .../proposal/ProposalVotingPower.tsx          |   4 -
 src/ui/components/Branding.tsx                | 111 ++++++++++++++++++
 src/ui/layouts/MainLayout.tsx                 |   3 +
 src/ui/utils/GlobalStyles.tsx                 |  36 ++++++
 6 files changed, 171 insertions(+), 4 deletions(-)
 create mode 100644 public/images/icons/twitterX.svg
 create mode 100644 public/images/icons/web.svg
 create mode 100644 src/ui/components/Branding.tsx

diff --git a/public/images/icons/twitterX.svg b/public/images/icons/twitterX.svg
new file mode 100644
index 00000000..465a20ac
--- /dev/null
+++ b/public/images/icons/twitterX.svg
@@ -0,0 +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_2352_24675)">
+<path d="M5.99963 0.00622845C9.3099 0.00622845 11.9934 2.68973 11.9934 6C11.9934 9.31027 9.3099 11.9938 5.99963 11.9938C2.68936 11.9938 0.00585938 9.31027 0.00585938 6C0.00585938 2.68973 2.68936 0.00622845 5.99963 0.00622845Z" fill="#CDC8E1"/>
+<path d="M2.3081 9.47266L5.17305 5.64201L2.29004 2.52751H2.93894L5.46307 5.25436L7.50242 2.52751H9.7105L6.68429 6.57358L9.36781 9.47266H8.7189L6.39439 6.96136L4.51618 9.47266H2.3081ZM3.26233 8.99473H4.27672L8.75614 3.00544H7.74175L3.26233 8.99473Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2352_24675">
+<rect width="12" height="12" fill="white" transform="matrix(1 0 0 -1 0 12)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/icons/web.svg b/public/images/icons/web.svg
new file mode 100644
index 00000000..ab2265ff
--- /dev/null
+++ b/public/images/icons/web.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2352_24679)">
+<path d="M6 12C9.30857 12 12 9.30857 12 6C12 2.69143 9.30857 6.33299e-08 6 6.33299e-08C2.69143 6.33299e-08 6.33299e-08 2.69143 6.33299e-08 6C6.33299e-08 9.30857 2.69143 12 6 12ZM7.77061 10.1069C8.13551 9.59755 8.48816 8.95592 8.73061 8.16735H9.91102C9.43347 9.02694 8.67918 9.71265 7.77061 10.1069ZM10.2882 4.73143C10.4082 5.13306 10.4718 5.55918 10.4718 6C10.4718 6.44082 10.4057 6.86694 10.2882 7.26857H8.94122C9.00735 6.87429 9.04653 6.45306 9.04653 6C9.04653 5.54694 9.00735 5.12571 8.94122 4.73143H10.2882ZM9.91102 3.83265H8.73061C8.48816 3.04408 8.13551 2.40245 7.77061 1.89306C8.67918 2.28735 9.43347 2.97306 9.91102 3.83265ZM6.44816 1.72408C6.88163 2.16245 7.42531 2.85796 7.77796 3.83265H6.44816V1.72408ZM6.44816 4.73143H8.02531C8.10122 5.12082 8.14776 5.54204 8.14776 6C8.14776 6.45796 8.10367 6.87918 8.02776 7.26857H6.44816V4.73143ZM6.44816 8.16735H7.78286C7.4302 9.15184 6.88408 9.84735 6.44816 10.2833V8.16735ZM2.08898 8.16735H3.26939C3.51184 8.95592 3.86449 9.59755 4.22939 10.1069C3.32082 9.71265 2.56653 9.02694 2.08898 8.16735ZM5.55184 10.2759C5.11837 9.83755 4.57469 9.14204 4.22204 8.16735H5.55184V10.2759ZM5.55184 7.26857H3.97469C3.89878 6.87918 3.85224 6.45796 3.85224 6C3.85224 5.54204 3.89633 5.12082 3.97225 4.73143H5.55184V7.26857ZM5.55184 3.83265H4.21714C4.5698 2.84816 5.11592 2.15265 5.55184 1.71673V3.83265ZM4.22939 1.89306C3.86449 2.40245 3.51184 3.04408 3.26939 3.83265H2.08898C2.56653 2.97306 3.32082 2.28735 4.22939 1.89306ZM1.52816 6C1.52816 5.55918 1.59429 5.13306 1.71184 4.73143H3.05878C2.99265 5.12571 2.95347 5.54694 2.95347 6C2.95347 6.45306 2.99265 6.87429 3.05878 7.26857H1.71184C1.59184 6.86694 1.52816 6.44082 1.52816 6Z" fill="#CDC8E1"/>
+</g>
+<defs>
+<clipPath id="clip0_2352_24679">
+<rect width="12" height="12" fill="white" transform="matrix(-1 0 0 -1 12 12)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/proposals/components/proposal/ProposalVotingPower.tsx b/src/proposals/components/proposal/ProposalVotingPower.tsx
index ec340dcd..567c298d 100644
--- a/src/proposals/components/proposal/ProposalVotingPower.tsx
+++ b/src/proposals/components/proposal/ProposalVotingPower.tsx
@@ -115,10 +115,6 @@ export function ProposalVotingPower({
               display: 'inline-flex',
               alignItems: 'center',
               position: 'relative',
-              top: 2,
-              [theme.breakpoints.up('xl')]: {
-                top: 1,
-              },
             }}>
             <RepresentationIcon
               address={representative.address}
diff --git a/src/ui/components/Branding.tsx b/src/ui/components/Branding.tsx
new file mode 100644
index 00000000..4f7c27b4
--- /dev/null
+++ b/src/ui/components/Branding.tsx
@@ -0,0 +1,111 @@
+import { Box, useTheme } from '@mui/system';
+
+import XIcon from '/public/images/icons/twitterX.svg';
+import WebIcon from '/public/images/icons/web.svg';
+
+import { IconBox } from '../primitives/IconBox';
+import { Link } from './Link';
+
+const brandingLinks = [
+  {
+    href: 'https://twitter.com/bgdlabs',
+    icon: XIcon,
+  },
+  {
+    href: 'https://bgdlabs.com',
+    icon: WebIcon,
+  },
+];
+
+export function Branding() {
+  const theme = useTheme();
+
+  return (
+    <Box
+      className="Branding"
+      sx={{
+        mt: 34,
+        [theme.breakpoints.up('sm')]: {
+          mt: 0,
+          position: 'absolute',
+          right: 5,
+          top: 5,
+          zIndex: 101,
+        },
+        [theme.breakpoints.up('md')]: {
+          right: 40,
+        },
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          [theme.breakpoints.up('sm')]: { flexDirection: 'row' },
+        }}>
+        <Box
+          className="Branding__text"
+          sx={{
+            typography: 'body',
+            color: '$textDisabled',
+            [theme.breakpoints.up('sm')]: { mr: 6 },
+          }}>
+          by BGD Labs
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mt: 10,
+            [theme.breakpoints.up('sm')]: { mt: 0 },
+          }}>
+          {brandingLinks.map((link, index) => (
+            <Link
+              href={link.href}
+              inNewWindow
+              key={index}
+              css={{
+                transition: 'all 0.2s ease',
+                ml: 10,
+                '&:first-of-type': {
+                  ml: 0,
+                },
+                [theme.breakpoints.up('sm')]: { ml: 6 },
+                hover: { opacity: 0.7 },
+              }}>
+              <IconBox
+                className="Branding__icon"
+                sx={{
+                  width: 20,
+                  height: 20,
+                  [theme.breakpoints.up('sm')]: {
+                    width: 14,
+                    height: 14,
+                  },
+                  '> svg': {
+                    width: 20,
+                    height: 20,
+                    path: {
+                      '&:last-of-type': {
+                        fill: theme.palette.$appBackground,
+                      },
+                      '&:first-of-type': {
+                        fill: theme.palette.$textDisabled,
+                      },
+                    },
+                    [theme.breakpoints.up('sm')]: {
+                      width: 14,
+                      height: 14,
+                    },
+                  },
+                }}>
+                {link.icon()}
+              </IconBox>
+            </Link>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/ui/layouts/MainLayout.tsx b/src/ui/layouts/MainLayout.tsx
index dfdf3b31..232ae8a3 100644
--- a/src/ui/layouts/MainLayout.tsx
+++ b/src/ui/layouts/MainLayout.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode, useEffect } from 'react';
 import { useStore } from '../../store';
 import { isForIPFS } from '../../utils/appConfig';
 import { AppLoading } from '../components/AppLoading';
+import { Branding } from '../components/Branding';
 import NoSSR from '../primitives/NoSSR';
 import { setRelativePath } from '../utils/relativePath';
 import { AppHeader } from './AppHeader';
@@ -85,6 +86,8 @@ export function MainLayout({ children }: MainLayoutProps) {
           </>
         )}
       </Box>
+
+      <Branding />
     </Box>
   );
 }
diff --git a/src/ui/utils/GlobalStyles.tsx b/src/ui/utils/GlobalStyles.tsx
index 1d48098f..7505f4df 100644
--- a/src/ui/utils/GlobalStyles.tsx
+++ b/src/ui/utils/GlobalStyles.tsx
@@ -205,6 +205,24 @@ export function GlobalStyles() {
         borderTopColor: '#101423',
         borderLeftColor: '#101423',
       },
+
+      '.Branding': {
+        '.Branding__text': {
+          color: '#C6C3D1',
+        },
+        '.Branding__icon': {
+          '> svg': {
+            path: {
+              '&:last-of-type': {
+                fill: '#EDF0FC',
+              },
+              '&:first-of-type': {
+                fill: '#C6C3D1',
+              },
+            },
+          },
+        },
+      },
     },
     "[data-theme='dark']": {
       body: {
@@ -327,6 +345,24 @@ export function GlobalStyles() {
         borderTopColor: '#ADAECF',
         borderLeftColor: '#ADAECF',
       },
+
+      '.Branding': {
+        '.Branding__text': {
+          color: '#47557C',
+        },
+        '.Branding__icon': {
+          '> svg': {
+            path: {
+              '&:last-of-type': {
+                fill: '#1C2445',
+              },
+              '&:first-of-type': {
+                fill: '#47557C',
+              },
+            },
+          },
+        },
+      },
     },
   };