From d2cad8274cbf16edece08ac6b75710129d0b64c7 Mon Sep 17 00:00:00 2001 From: Corantin Date: Thu, 27 Jan 2022 14:06:06 -0500 Subject: [PATCH 01/10] Quest detail one scroll + creation time +display claim even if bounty not available --- packages/react-app/src/collapsable-block.tsx | 68 +++++++++---------- .../react-app/src/components/claim-list.tsx | 11 +-- .../field-input/amount-field-input.tsx | 10 +-- .../components/field-input/field-input.tsx | 5 +- .../components/field-input/icon-tooltip.tsx | 30 ++++---- .../field-input/text-field-input.tsx | 5 ++ .../react-app/src/components/main-view.tsx | 1 + .../components/modals/execute-claim-modal.tsx | 3 +- .../src/components/modals/fund-modal.tsx | 12 ++-- .../modals/resolve-challenge-modal.tsx | 26 +++++-- packages/react-app/src/components/quest.tsx | 51 ++++++++------ .../src/components/side-content-layout.tsx | 29 +++++--- .../src/components/views/quest-detail.tsx | 12 +++- packages/react-app/src/models/quest.model.ts | 1 + .../src/queries/quest-entity.query.ts | 3 + .../react-app/src/services/quest.service.ts | 1 + 16 files changed, 155 insertions(+), 113 deletions(-) diff --git a/packages/react-app/src/collapsable-block.tsx b/packages/react-app/src/collapsable-block.tsx index aded861e..89e11d90 100644 --- a/packages/react-app/src/collapsable-block.tsx +++ b/packages/react-app/src/collapsable-block.tsx @@ -66,40 +66,38 @@ export function CollapsableBlock(props: Props) { }, [props, props.children]); return ( -
- 
-        
-           setVisible(!isVisible)}>
-            
-              {isVisible ? (
-                <>
-                  
-                  
-                
-              ) : (
-                <>
-                  
-                  
-                
-              )}
-            
-            
-              {isVisible ? 'Hide ' : 'Show '}
-              {props.label}
-            
-          
-          {isVisible && (
-             copyCode(content)}
-              icon={}
-              size="small"
-              label="Copy"
-              display="icon"
-            />
-          )}
-        
-        {isVisible && content ? {content} : <>}
-
-
+ 
+      
+         setVisible(!isVisible)}>
+          
+            {isVisible ? (
+              <>
+                
+                
+              
+            ) : (
+              <>
+                
+                
+              
+            )}
+          
+          
+            {isVisible ? 'Hide ' : 'Show '}
+            {props.label}
+          
+        
+        {isVisible && (
+           copyCode(content)}
+            icon={}
+            size="small"
+            label="Copy"
+            display="icon"
+          />
+        )}
+      
+      {isVisible && content ? {content} : <>}
+
); } diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx index d5945192..b7daad27 100644 --- a/packages/react-app/src/components/claim-list.tsx +++ b/packages/react-app/src/components/claim-list.tsx @@ -43,7 +43,7 @@ type Props = { questData: QuestModel; newClaim: number; challengeDeposit: TokenAmountModel; - questTotalBounty?: TokenAmountModel; + questTotalBounty?: TokenAmountModel | null; }; export default function ClaimList({ @@ -134,14 +134,7 @@ export default function ClaimList({ ) : ( All available diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx index a44b4d88..b9248709 100644 --- a/packages/react-app/src/components/field-input/amount-field-input.tsx +++ b/packages/react-app/src/components/field-input/amount-field-input.tsx @@ -24,7 +24,6 @@ import { floorNumber } from 'src/utils/math.utils'; import { includesCaseInsensitive } from 'src/utils/string.util'; import { isAddress } from 'src/utils/web3.utils'; import styled from 'styled-components'; -import { Outset } from '../utils/spacer-util'; import { FieldInput } from './field-input'; // #region StyledComponents @@ -57,7 +56,6 @@ const AmountTokenWrapperStyled = styled.div` justify-content: flex-start; align-items: center; ${(props: any) => (props.wide ? 'width:100%' : '')}; - ul[role='listbox'] { max-height: 200px; overflow-y: auto; @@ -69,6 +67,10 @@ const IconEditStyled = styled(IconEdit)` padding-left: ${GUpx()}; `; +const SpacerStyled = styled.div` + padding-right: ${GUpx()}; +`; + // #endregion type Props = { @@ -215,7 +217,7 @@ function AmountFieldInput({ ) : ( {amount !== undefined && ( - + {isEdit ? ( + )} {token?.token ? ( diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx index 21549305..a8d45ef5 100644 --- a/packages/react-app/src/components/field-input/field-input.tsx +++ b/packages/react-app/src/components/field-input/field-input.tsx @@ -29,8 +29,9 @@ const LineStyled = styled.div` const ContentWrapperStyled = styled.div` display: flex; align-items: center; - ${(props: any) => (!props.compact ? 'min-height: 45px;' : '')} - div { + ${(props: any) => (!props.compact ? 'min-height: 40px;' : '')} + padding-left: ${GUpx()}; + & > div { max-width: 100%; } `; diff --git a/packages/react-app/src/components/field-input/icon-tooltip.tsx b/packages/react-app/src/components/field-input/icon-tooltip.tsx index e8fbfd35..af5dd655 100644 --- a/packages/react-app/src/components/field-input/icon-tooltip.tsx +++ b/packages/react-app/src/components/field-input/icon-tooltip.tsx @@ -1,7 +1,7 @@ import { Help, IconQuestion, useTheme } from '@1hive/1hive-ui'; import { ReactNode } from 'react'; +import { GUpx } from 'src/utils/css.util'; import styled from 'styled-components'; -import { Outset } from '../utils/spacer-util'; // #region Styled @@ -30,12 +30,14 @@ const TooltipWrapperStyled = styled.div` const HelpWrapperStyled = styled.div` width: 16px; + display: inline-block; + padding-left: ${GUpx()}; `; // #endregion type Props = { - tooltip: string; + tooltip?: string; tooltipDetail?: ReactNode; icon?: ReactNode; children?: ReactNode; @@ -44,18 +46,16 @@ type Props = { export const IconTooltip = ({ tooltip, tooltipDetail, icon, children }: Props) => { const theme = useTheme(); return ( - - - {tooltipDetail || children ? ( - - - {tooltipDetail ?? children} - - - ) : ( - {icon ?? } - )} - - + + {tooltipDetail || children ? ( + + + {tooltipDetail ?? children} + + + ) : ( + {icon ?? } + )} + ); }; diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx index a253cc20..8cfde7b4 100644 --- a/packages/react-app/src/components/field-input/text-field-input.tsx +++ b/packages/react-app/src/components/field-input/text-field-input.tsx @@ -71,7 +71,12 @@ export default function TextFieldInput({ content={value} markdownToJsxOptions={(o: any) => ({ ...o, + wrapper: 'div', + overrides: { + p: { + component: 'div', + }, pre: { component: CollapsableBlock, props: { diff --git a/packages/react-app/src/components/main-view.tsx b/packages/react-app/src/components/main-view.tsx index c346668c..e82ef1f8 100644 --- a/packages/react-app/src/components/main-view.tsx +++ b/packages/react-app/src/components/main-view.tsx @@ -70,6 +70,7 @@ function MainView({ children, toggleTheme, currentTheme }: Props) { main={children} side={page === ENUM_PAGES.List ? : undefined} footer={