feat: added branding component

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}

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>
+  );
+}

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>
   );
 }

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',
+              },
+            },
+          },
+        },
+      },
     },
   };