Feature/support links (#30)

* feat: added support links
* chore: fixed lint issues

packages/bruno-app/src/components/BrunoSupport/StyledWrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  color: var(--color-text);
+  .collection-options {
+    svg {
+      position: relative;
+      top: -1px;
+    }
+
+    .label {
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/BrunoSupport/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import Modal from "components/Modal/index";
+import {IconSpeakerphone, IconBrandTwitter} from "@tabler/icons";
+import StyledWrapper from "./StyledWrapper";
+
+const BrunoSupport = ({onClose}) => {
+  return (
+    <StyledWrapper>
+      <Modal
+        size="sm"
+        title={"Support"}
+        handleCancel={onClose}
+        hideFooter={true}
+      >
+        <div className="collection-options">
+          <div className="mt-2">
+            <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-center">
+            <IconSpeakerphone size={18} strokeWidth={2}/><span className="label ml-2">Report Issues</span>
+            </a>
+          </div>
+          <div className="mt-2">
+            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
+              <img src="/github.svg" style={{width: "18px"}}/>
+              <span className="label ml-2">Github</span>
+            </a>
+          </div>
+          <div className="mt-2">
+            <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-center">
+              <IconBrandTwitter size={18} strokeWidth={2}/><span className="label ml-2">Twitter</span>
+            </a>
+          </div>
+        </div>
+      </Modal>
+    </StyledWrapper>
+  );
+}
+
+export default BrunoSupport;
+

packages/bruno-app/src/components/Sidebar/MenuBar/index.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconCode, IconFiles, IconUser, IconUsers, IconSettings, IconChevronsLeft, IconLifebuoy} from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
+import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app';
+import BrunoSupport from 'components/BrunoSupport';
 import StyledWrapper from './StyledWrapper';
 
 const MenuBar = () => {
   const router = useRouter();
   const dispatch = useDispatch();
+  const [openBrunoSupport, setOpenBrunoSupport] = useState(false);
 
   const getClassName = (menu) => {
     return router.pathname === menu ? "active menu-item": "menu-item";
@@ -38,12 +40,13 @@ const MenuBar = () => {
           </div>
         </Link> */}
         <div className="menu-item">
-          <IconLifebuoy size={28} strokeWidth={1.5}/>
+          <IconLifebuoy size={28} strokeWidth={1.5} onClick={() => setOpenBrunoSupport(true)}/>
         </div>
         <div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
           <IconChevronsLeft size={28} strokeWidth={1.5}/>
         </div>
       </div>
+      {openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)}/>}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Sidebar/index.js

@@ -103,6 +103,9 @@ const Sidebar = () => {
                 {/* <IconLayoutGrid size={20} strokeWidth={1.5} className="mr-2"/> */}
                 {/* Need to ut github stars link here */}
               </div>
+              <div className='pl-1'>
+                <iframe src="https://ghbtns.com/github-btn.html?user=usebruno&repo=bruno&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20" title="GitHub"></iframe>   
+              </div>
               <div className="flex flex-grow items-center justify-end text-xs mr-2">
                 v1.25.2
               </div>

packages/bruno-app/src/components/Welcome/index.js

@@ -112,21 +112,29 @@ const Welcome = () => {
 
       <div className="uppercase font-semibold create-request mt-10 pt-6">Links</div>
       <div className="mt-4 flex flex-col collection-options select-none">
-        <div className="flex items-center">
+        <div>
+          <a href="https://www.usebruno.com/downloads" target="_blank" className="flex items-center">
             <IconBrandChrome size={18} strokeWidth={2}/><span className="label ml-2">Chrome Extension</span>
+          </a>
         </div>
-        <div className="flex items-center mt-2">
+        <div className="mt-2">
+          <a href="https://www.usebruno.com/downloads" target="_blank" className="flex items-center">
             <IconDeviceDesktop size={18} strokeWidth={2}/><span className="label ml-2">Desktop App</span>
+          </a>
         </div>
-        <div className="flex items-center mt-2">
+        <div className="mt-2">
+          <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-center">
             <IconSpeakerphone size={18} strokeWidth={2}/><span className="label ml-2">Report Issues</span>
+          </a>
         </div>
         {/* <div className="flex items-center mt-2">
           <IconBook size={18} strokeWidth={2}/><span className="label ml-2">Docs</span>
         </div> */}
-        <div className="flex items-center mt-2">
+        <div className="mt-2">
+          <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
             <img src='/github.svg' style={{width: '18px'}}/>
             <span className="label ml-2">Github</span>
+          </a>
         </div>
       </div>
 

packages/bruno-app/src/styles/globals.css

@@ -1,6 +1,7 @@
 
 :root {
   --color-brand: #546de5;
+  --color-text: rgb(52 52 52);
   --color-sidebar-collection-item-active-indent-border: #d0d0d0;
   --color-sidebar-collection-item-active-background: #e1e1e1;
   --color-sidebar-background: #f3f3f3;