feat(bounties): implements #1001 cleaning up bounties and adding a or…

…g label
stakwork · Dec 6, 2023 · a72cd8f · a72cd8f
1 parent 6fb4665
commit a72cd8f
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 43 deletions.
diff --git a/frontend/app/src/bounties/BountyDescription.tsx b/frontend/app/src/bounties/BountyDescription.tsx
@@ -2,6 +2,8 @@ import { EuiText } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { isString } from 'lodash';
+import { OrganizationText, OrganizationWrap } from 'people/utils/style';
+import { Link } from 'react-router-dom';
 import { colors } from '../config/colors';
 import { LanguageObject } from '../people/utils/languageLabelStyle';
 import NameTag from '../people/utils/NameTag';
@@ -26,12 +28,13 @@ const BountyDescriptionContainer = styled.div<bounty_description_props>`
   min-width: 519px;
   max-width: 519px;
   padding-left: 17px;
+  padding-right: 17px;
 `;
 
 const Header = styled.div`
   display: flex;
   flex-direction: row;
-  align-item: center;
+  justify-content: space-between;
   height: 32px;
   margin-top: 16px;
   .NameContainer {
@@ -43,7 +46,7 @@ const Header = styled.div`
 const Description = styled.div<bounty_description_props>`
   display: flex;
   flex-direction: row;
-  align-item: center;
+  align-items: center;
   justify-content: space-between;
   .DescriptionContainer {
     display: flex;
@@ -93,7 +96,7 @@ const CodingLabels = styled.div<codingLangProps>`
   margin-right: 4px;
   .LanguageText {
     font-size: 13px;
-    fontweight: 500;
+    font-weight: 500;
     text-align: center;
     font-family: 'Barlow';
     line-height: 16px;
@@ -104,7 +107,7 @@ const BountyDescription = (props: BountiesDescriptionProps) => {
   const [dataValue, setDataValue] = useState([]);
   const [replitLink, setReplitLink] = useState('');
   const [descriptionImage, setDescriptionImage] = useState('');
-
+  
   useEffect(() => {
     if (props.description) {
       const found = props?.description.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/);
@@ -148,6 +151,28 @@ const BountyDescription = (props: BountiesDescriptionProps) => {
               org_uuid={props.uuid}
             />
           </div>
+          {props.org_uuid && props.name && (
+            <Link to={`/org/bounties/${props.org_uuid}`} target="_blank">
+              <OrganizationWrap>
+                <img
+                  alt={`${props.name} logo`}
+                  src={props.img || '/static/person_placeholder.png'}
+                  style={{ borderRadius: '50%', width: '20px', height: '20px' }}
+                />
+                <OrganizationText>
+                  {props.name}
+                </OrganizationText>
+                <img
+                  className="buttonImage"
+                  src={'/static/github_ticket.svg'}
+                  alt={'github_ticket'}
+                  height={'10px'}
+                  width={'10px'}
+                  style={{ transform: 'translateY(1px)'}}
+                />
+              </OrganizationWrap>
+            </Link>
+          )}
         </Header>
         <Description isPaid={props?.isPaid} color={color}>
           <div

diff --git a/frontend/app/src/bounties/interfaces.ts b/frontend/app/src/bounties/interfaces.ts
@@ -15,6 +15,7 @@ export interface BountiesDescriptionProps {
   created?: number;
   name?: string;
   uuid?: string;
+  org_uuid?: string;
 }
 
 export interface BountiesPriceProps {

diff --git a/frontend/app/src/people/utils/AssignedUnassignedBounties.tsx b/frontend/app/src/people/utils/AssignedUnassignedBounties.tsx
@@ -1,6 +1,5 @@
 import { EuiText } from '@elastic/eui';
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
 import { BountiesProps } from 'people/interfaces';
@@ -12,7 +11,6 @@ import BountyProfileView from '../../bounties/BountyProfileView';
 import IconButton from '../../components/common/IconButton2';
 import ConnectCard from './ConnectCard';
 import StartUpModal from './StartUpModal';
-import { OrganizationWrap, OrganizationText } from './style';
 
 interface containerProps {
   unAssignedBackgroundImage?: string;
@@ -122,8 +120,6 @@ const Bounties = (props: BountiesProps) => {
     onPanelClick,
     widget,
     created,
-    org_uuid,
-    name
   } = props;
 
   const color = colors['light'];
@@ -137,13 +133,6 @@ const Bounties = (props: BountiesProps) => {
   const { ui } = useStores();
   return (
     <>
-      {org_uuid && name && (
-        <OrganizationWrap>
-          <Link to={`/org/bounties/${org_uuid}`} target="_blank">
-            <OrganizationText>{name}</OrganizationText>
-          </Link>
-        </OrganizationWrap>
-      )}
       {!!assignee?.owner_pubkey && !!assignee?.owner_alias ? (
         <BountyContainer
           onClick={onPanelClick}

diff --git a/frontend/app/src/people/utils/PaidBounty.tsx b/frontend/app/src/people/utils/PaidBounty.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { PaidBountiesProps } from 'people/interfaces';
-import { Link } from 'react-router-dom';
 import BountyDescription from '../../bounties/BountyDescription';
 import BountyPrice from '../../bounties/BountyPrice';
 import BountyProfileView from '../../bounties/BountyProfileView';
 import { colors } from '../../config/colors';
-import { OrganizationWrap, OrganizationText } from './style';
 
 interface PaidBountyProps {
   Price_User_Container_Border?: string;
@@ -39,17 +37,9 @@ const PriceUserContainer = styled.div<PaidBountyProps>`
 `;
 const PaidBounty = (props: PaidBountiesProps) => {
   const color = colors['light'];
-  const { org_uuid, name } = props;
 
   return (
     <>
-      {org_uuid && name && (
-        <OrganizationWrap>
-          <Link to={`/org/bounties/${org_uuid}`} target="_blank">
-            <OrganizationText>{name}</OrganizationText>
-          </Link>
-        </OrganizationWrap>
-      )}
       <BountyContainer
         onClick={props.onPanelClick}
         Bounty_Container_Background={color.pureWhite}

diff --git a/frontend/app/src/people/utils/style.ts b/frontend/app/src/people/utils/style.ts
@@ -47,22 +47,18 @@ export const InvoiceInput = styled.input`
   border: 0.5px solid black;
 `;
 export const OrganizationWrap = styled.div`
-  margin-left: 0px;
-  cursor: pointer;
-  padding: 0px;
-  background: white;
-  padding: 2px 10px;
-  max-width: 180px;
-  text-align: center;
-  border-radius: 0px;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
+  align-self: center;
+  padding: 2px 8px;
+  border: 1px solid #DDE1E5;
+  border-radius: 4px;
 `;
 export const OrganizationText = styled.span`
-  font-weight: bold;
-  font-size: 0.9rem;
+  font-weight: 500;
+  font-size: 0.8125rem;
   text-transform: capitalize;
-  color: #20c997;
+  color: #5F6368;
 `;
diff --git a/frontend/app/src/people/widgetViews/WantedView.tsx b/frontend/app/src/people/widgetViews/WantedView.tsx
@@ -20,7 +20,6 @@ const BountyBox = styled.div<styledProps>`
   min-height: 160px;
   max-height: auto;
   width: 1100px;
-  box-shadow: 0px 1px 6px ${(p: any) => p?.color && p?.color.black100};
   border: none;
 `;
 
@@ -49,7 +48,6 @@ function WantedView(props: WantedViews2Props) {
     show = true,
     paid = false
   } = props;
-
   const titleString = one_sentence_summary || title || '';
   const isMobile = useIsMobile();
   const { ui, main } = useStores();

diff --git a/frontend/app/src/people/widgetViews/WidgetSwitchViewer.tsx b/frontend/app/src/people/widgetViews/WidgetSwitchViewer.tsx
@@ -180,7 +180,7 @@ function WidgetSwitchViewer(props: any) {
               padding: 0,
               overflow: 'hidden',
               background: 'transparent',
-              minHeight: body.org_uuid ? '185px' : !isMobile ? '160px' : '',
+              minHeight: !isMobile ? '160px' : '',
               maxHeight: 'auto',
               boxShadow: 'none'
             }}