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

#1053) * feat(bounties): implements #1001 cleaning up bounties and adding a org label * fix(mobile): adding bottom border to mobile version of the bounty container * fix(prettier): run prettier script * fix(bounty): make sure org link uses the org image
stakwork · Dec 8, 2023 · 46b4184 · 46b4184
1 parent 8e1cfa5
commit 46b4184
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 44 deletions.
diff --git a/frontend/app/src/bounties/BountyDescription.tsx b/frontend/app/src/bounties/BountyDescription.tsx
@@ -2,6 +2,10 @@ 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 { useStores } from 'store';
+import { Organization } from 'store/main';
 import { colors } from '../config/colors';
 import { LanguageObject } from '../people/utils/languageLabelStyle';
 import NameTag from '../people/utils/NameTag';
@@ -26,12 +30,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 +48,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,19 +98,40 @@ 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;
   }
 `;
+
+const Img = styled.div<{
+  readonly src: string;
+}>`
+  background-image: url('${(p: any) => p.src}');
+  background-position: center;
+  background-size: cover;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+`;
+
 const BountyDescription = (props: BountiesDescriptionProps) => {
   const color = colors['light'];
   const [dataValue, setDataValue] = useState([]);
   const [replitLink, setReplitLink] = useState('');
   const [descriptionImage, setDescriptionImage] = useState('');
+  const [org, setOrg] = useState<Organization | undefined>(undefined);
+  const { main } = useStores();
+
+  const fetchOrg = async () => {
+    if (!props.org_uuid) return;
+    const org = await main.getUserOrganizationByUuid(props.org_uuid);
+    setOrg(org);
+  }
 
   useEffect(() => {
+    fetchOrg()
     if (props.description) {
       const found = props?.description.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))(?![^`]*`)/);
       setReplitLink(
@@ -148,6 +174,25 @@ 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
+                  title={`${props.name} logo`}
+                  src={org?.img || '/static/person_placeholder.png'}
+                />
+                <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;
@@ -121,9 +119,7 @@ const Bounties = (props: BountiesProps) => {
     person,
     onPanelClick,
     widget,
-    created,
-    org_uuid,
-    name
+    created
   } = 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
@@ -200,7 +200,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'
             }}

diff --git a/frontend/app/src/people/widgetViews/wantedViews/MobileView.tsx b/frontend/app/src/people/widgetViews/wantedViews/MobileView.tsx
@@ -50,7 +50,11 @@ function MobileView(props: any) {
   const color = colors['light'];
 
   return (
-    <div style={{ position: 'relative' }} onClick={onPanelClick} key={titleString}>
+    <div
+      style={{ borderBottom: '2px solid #EBEDEF', position: 'relative' }}
+      onClick={onPanelClick}
+      key={titleString}
+    >
       {paid && (
         <Img
           src={'/static/paid_ribbon.svg'}