feat: added support links

This commit is contained in:
Anusree Subash 2022-10-16 17:55:27 +05:30
parent 6380797f92
commit 890c79b013
6 changed files with 86 additions and 12 deletions

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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>

View File

@ -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">
<IconBrandChrome size={18} strokeWidth={2}/><span className="label ml-2">Chrome Extension</span>
<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">
<IconDeviceDesktop size={18} strokeWidth={2}/><span className="label ml-2">Desktop App</span>
<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">
<IconSpeakerphone size={18} strokeWidth={2}/><span className="label ml-2">Report Issues</span>
<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">
<img src='/github.svg' style={{width: '18px'}}/>
<span className="label ml-2">Github</span>
<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>

View File

@ -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;