From 0c92a492fcf26d86d5e6eda12a698dc9bb361b8d Mon Sep 17 00:00:00 2001 From: Sophie Turner Date: Thu, 11 Jul 2024 19:32:34 +0500 Subject: [PATCH 1/2] fix(chat-interface): modify ui search interface --- public/svg-icons/HelpIcon.svg | 3 + src/components/App/UniverseQuestion/index.tsx | 109 ++++++++++++------ src/components/Icons/HelpIcon.tsx | 19 +++ src/utils/colors/index.tsx | 2 + 4 files changed, 95 insertions(+), 38 deletions(-) create mode 100644 public/svg-icons/HelpIcon.svg create mode 100644 src/components/Icons/HelpIcon.tsx diff --git a/public/svg-icons/HelpIcon.svg b/public/svg-icons/HelpIcon.svg new file mode 100644 index 000000000..111e22a55 --- /dev/null +++ b/public/svg-icons/HelpIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/App/UniverseQuestion/index.tsx b/src/components/App/UniverseQuestion/index.tsx index 2e05c0c32..4c1139e39 100644 --- a/src/components/App/UniverseQuestion/index.tsx +++ b/src/components/App/UniverseQuestion/index.tsx @@ -6,6 +6,7 @@ import { Button } from '@mui/material' import { useEffect, useState } from 'react' import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon' import ExploreIcon from '~/components/Icons/ExploreIcon' +import HelpIcon from '~/components/Icons/HelpIcon' import { getAboutData } from '~/network/fetchSourcesData' import { useAppStore } from '~/stores/useAppStore' import { useDataStore } from '~/stores/useDataStore' @@ -25,7 +26,9 @@ export const UniverseQuestion = () => { const response = await getAboutData() if (response.seed_questions) { - setSeedQuestions(response.seed_questions) + const shuffledQuestions = shuffleArray(response.seed_questions) + + setSeedQuestions(shuffledQuestions) } } catch (error) { console.error('Error fetching seed questions:', error) @@ -57,38 +60,55 @@ export const UniverseQuestion = () => { await handleSubmitQuestion(seedQuestion) } + const shuffleArray = (inputArray: string[]) => { + const array = [...inputArray] + let i = array.length - 1 + + while (i > 0) { + const j = Math.floor(Math.random() * (i + 1)) + + ;[array[i], array[j]] = [array[j], array[i]] + i -= 1 + } + + return array + } + + const displayedSeedQuestions = shuffleArray([...seedQuestions]).slice(0, 4) + return ( - - Ideas have shape - - setQuestion(e.target.value)} - placeholder="Enter your question" - value={question} - /> - } - onClick={() => handleSubmitQuestion(question)} - variant="contained" - > - Search - - - {seedQuestions.length > 0 && ( - - {seedQuestions.map((seedQuestion) => ( - handleSeedQuestionClick(seedQuestion)}> - {seedQuestion} - - ))} - - )} - }> - Explore graph - - + + Ideas have shape + + setQuestion(e.target.value)} + placeholder="Enter your question" + value={question} + /> + } + onClick={() => handleSubmitQuestion(question)} + variant="contained" + > + Search + + + {displayedSeedQuestions.length > 0 && ( + + {displayedSeedQuestions.map((seedQuestion) => ( + handleSeedQuestionClick(seedQuestion)}> + + {seedQuestion} + + ))} + + )} + }> + Explore graph + + ) } @@ -164,17 +184,30 @@ const SeedQuestionsWrapper = styled.div` const SeedQuestion = styled.div` background: ${colors.BG1}; color: ${colors.white}; - padding: 15px 20px; + padding: 15px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; - justify-content: center; - text-align: center; + justify-content: flex-start; + text-align: left; font-family: Barlow; - font-size: 13px; - font-weight: 500; + font-size: 14px; + font-weight: 400; + gap: 10px; &:hover { - background: ${colors.DROPDOWN_SELECTED}; + background: ${colors.SEEDQUESTION_HOVER}; + } + + &:active { + background: ${colors.SEEDQUESTION}; + } + svg { + width: 20px; + height: 20px; + } + + path { + fill: ${colors.modalWhiteOverlayBg}; } ` diff --git a/src/components/Icons/HelpIcon.tsx b/src/components/Icons/HelpIcon.tsx new file mode 100644 index 000000000..c472e71cd --- /dev/null +++ b/src/components/Icons/HelpIcon.tsx @@ -0,0 +1,19 @@ +/* eslint-disable */ +import React from 'react'; + +const HelpIcon: React.FC> = (props) => ( + + + +); + +export default HelpIcon; diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx index 2e89b8380..6c5c5dd05 100644 --- a/src/utils/colors/index.tsx +++ b/src/utils/colors/index.tsx @@ -95,6 +95,8 @@ export const colors = { TOPIC: 'rgba(255, 255, 255, 0.85)', THING: 'rgba(150, 39, 119, 1)', SUCESS: 'rgba(73, 201, 152, 1)', + SEEDQUESTION: 'rgba(47, 58, 89, 1)', + SEEDQUESTION_HOVER: 'rgba(38, 42, 58, 1)', } as const export type ColorName = keyof typeof colors From 45af57fb353bdb180150bb13232e3eddf0ceb1a1 Mon Sep 17 00:00:00 2001 From: Sophie Turner Date: Thu, 11 Jul 2024 23:29:36 +0500 Subject: [PATCH 2/2] fix(chat-interface): search Bar ui clean up --- public/svg-icons/ArrowForwardIcon.svg | 11 +-- src/components/App/UniverseQuestion/index.tsx | 99 ++++++++++++------- src/components/Icons/ArrowForwardIcon.tsx | 18 +--- 3 files changed, 69 insertions(+), 59 deletions(-) diff --git a/public/svg-icons/ArrowForwardIcon.svg b/public/svg-icons/ArrowForwardIcon.svg index 36e5d47c1..e824ecb5d 100644 --- a/public/svg-icons/ArrowForwardIcon.svg +++ b/public/svg-icons/ArrowForwardIcon.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/src/components/App/UniverseQuestion/index.tsx b/src/components/App/UniverseQuestion/index.tsx index 4c1139e39..fcc948bed 100644 --- a/src/components/App/UniverseQuestion/index.tsx +++ b/src/components/App/UniverseQuestion/index.tsx @@ -74,53 +74,66 @@ export const UniverseQuestion = () => { return array } - const displayedSeedQuestions = shuffleArray([...seedQuestions]).slice(0, 4) + const displayedSeedQuestions = seedQuestions.slice(0, 4) + + const isValidText = !!question && question.trim().length > 0 return ( - - Ideas have shape - - setQuestion(e.target.value)} - placeholder="Enter your question" - value={question} - /> - } - onClick={() => handleSubmitQuestion(question)} - variant="contained" - > - Search - - - {displayedSeedQuestions.length > 0 && ( - - {displayedSeedQuestions.map((seedQuestion) => ( - handleSeedQuestionClick(seedQuestion)}> - - {seedQuestion} - - ))} - - )} - }> - Explore graph - - + + Ideas have shapes + + setQuestion(e.target.value)} + placeholder="What do you want to know?" + value={question} + /> + handleSubmitQuestion(question)} + variant="contained" + > + {isValidText ? ( + <> + Search + + ) : ( + + )} + + + {displayedSeedQuestions.length > 0 && ( + + {displayedSeedQuestions.map((seedQuestion) => ( + handleSeedQuestionClick(seedQuestion)}> + + {seedQuestion} + + ))} + + )} + }> + Explore Graph + + ) } -const StyledTextarea = styled(TextareaAutosize)` +const StyledTextarea = styled(TextareaAutosize).attrs({ + minRows: 5, +})` background: ${colors.BG1}; max-width: 702px; width: 702px; color: ${colors.white}; padding: 16px 8px; - border: none; + border: 1px solid ${colors.modalShield}; + resize: none; outline: none; border-radius: 12px; + font-family: 'Barlow'; + font-size: 16px; + font-weight: 400; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.5); &:-moz-placeholder, /* Firefox 18- */ @@ -151,15 +164,27 @@ const Wrapper = styled(Flex)` font-style: normal; font-weight: 700; line-height: 16px; + font-family: 'Barlow'; ` const StyledButton = styled(Button)` && { position: absolute; - bottom: 20px; - right: 20px; + bottom: 26px; + right: 14px; height: 32px; border-radius: 16px; + min-width: 32px; + padding: 2px; + } + + &&.MuiButton-root { + padding: 10px; + } + + svg { + width: 12px; + height: 12px; } ` diff --git a/src/components/Icons/ArrowForwardIcon.tsx b/src/components/Icons/ArrowForwardIcon.tsx index 07265517d..a4faa4668 100644 --- a/src/components/Icons/ArrowForwardIcon.tsx +++ b/src/components/Icons/ArrowForwardIcon.tsx @@ -2,19 +2,11 @@ import React from 'react' const ArrowForwardIcon: React.FC> = (props) => ( - - - - - - - - - + + )