update: initial draft of Question and Answer widget

src/__text-engine__/view.style.tsx

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components';
+
+const sharedWidgetStyles = css`
+  padding: 10px;
+  border-radius: 8px;
+  max-width: 80%;
+  margin: 5px 0;
+`;
+
+const QuestionWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`;
+
+const QuestionWidget = styled.p`
+  background-color: ${({ theme }) => theme.colors.neutral400};
+  color: ${({ theme }) => theme.colors.white400};
+  ${sharedWidgetStyles}
+`;
+
+const AnswerWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const AnswerWidget = styled.p`
+  background-color: ${({ theme }) => theme.colors.white400};
+  color: ${({ theme }) => theme.colors.dark500};
+  ${sharedWidgetStyles}
+`;
+
+export { QuestionWrapper, QuestionWidget, AnswerWrapper, AnswerWidget };

src/__text-engine__/view.tsx

@@ -1,13 +1,26 @@
 import React from 'react';
 
-import { useSearchWidgetContext, Heading3 } from 'shared/components';
+import { useSearchWidgetContext } from 'shared/components';
+
+import { QuestionWidget, QuestionWrapper, AnswerWrapper, AnswerWidget } from './view.style';
 
 export function TextEngineView() {
   const { searchQuery } = useSearchWidgetContext();
 
+  const isValidQuery = !!searchQuery.trim().length;
+
   return (
     <div data-testid="textEngineView">
-      <Heading3>{searchQuery}</Heading3>
+      {isValidQuery && (
+        <QuestionWrapper>
+          <QuestionWidget>{searchQuery}</QuestionWidget>
+        </QuestionWrapper>
+      )}
+      {isValidQuery && (
+        <AnswerWrapper>
+          <AnswerWidget>Realtime answer coming soon</AnswerWidget>
+        </AnswerWrapper>
+      )}
     </div>
   );
 }

src/design-system/global-styles.ts

@@ -94,6 +94,7 @@ const GlobalStyles = createGlobalStyle<Theme>`
         display: flex;
         display: -webkit-flex;
         flex-direction: column;
+        line-height: 1.7;
     }
 
     body main#main {

src/shared/components/headings/index.component.tsx

@@ -6,34 +6,30 @@ const sharedHeadingStyles = css`
 `;
 
 const Heading1 = styled.h1`
-  color: ${({ theme }) => theme.colors.secondary400};
+  color: ${({ theme }) => theme.colors.white400};
   font-weight: ${({ theme }) => theme.typography.title1.fontWeight};
   font-size: ${({ theme }) => theme.typography.title1.fontSize};
-  line-height: ${({ theme }) => theme.typography.lineHeight.xxs};
   ${sharedHeadingStyles}
 `;
 
 const Heading2 = styled.h2`
-  color: ${({ theme }) => theme.colors.secondary400};
+  color: ${({ theme }) => theme.colors.white400};
   font-weight: ${({ theme }) => theme.typography.title2.fontWeight};
   font-size: ${({ theme }) => theme.typography.title2.fontSize};
-  line-height: ${({ theme }) => theme.typography.lineHeight.xxs};
   ${sharedHeadingStyles}
 `;
 
 const Heading3 = styled.h3`
-  color: ${({ theme }) => theme.colors.secondary400};
+  color: ${({ theme }) => theme.colors.white400};
   font-weight: ${({ theme }) => theme.typography.title3.fontWeight};
   font-size: ${({ theme }) => theme.typography.title3.fontSize};
-  line-height: ${({ theme }) => theme.typography.lineHeight.xxs};
   ${sharedHeadingStyles}
 `;
 
 const Heading4 = styled.h4`
-  color: ${({ theme }) => theme.colors.secondary400};
+  color: ${({ theme }) => theme.colors.white400};
   font-weight: ${({ theme }) => theme.typography.bodyText.fontWeight};
   font-size: ${({ theme }) => theme.typography.bodyText.fontSize};
-  line-height: ${({ theme }) => theme.typography.lineHeight.xxs};
   ${sharedHeadingStyles}
 `;
 

src/shared/components/search-widget/index.component.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useRef } from 'react';
-import { FilePlusIcon } from '@radix-ui/react-icons';
+import { CameraIcon } from '@radix-ui/react-icons';
 
 import { useComposeRefs } from 'shared/hooks';
 
@@ -37,7 +37,7 @@ export const SearchWidget = React.forwardRef<SearchWidgetElement, SearchWidgetPr
           onChange={handleSearchQueryChange}
         ></ChatBox>
         <ImageInputLabel htmlFor={imgSearchId}>
-          <FilePlusIcon height="25px" width="25px" />
+          <CameraIcon height="25px" width="25px" />
         </ImageInputLabel>
         <ImageInput
           id={imgSearchId}

src/shared/components/search-widget/useSearchWidget.ts

@@ -3,8 +3,10 @@ import { useCallback, useEffect } from 'react';
 type OnSubmit = <P>(formData: Record<string, FormDataEntryValue>) => Promise<P>;
 export function useSearchWidget(formRef: React.RefObject<HTMLFormElement>, onSubmit?: OnSubmit) {
   useEffect(() => {
-    if (formRef.current?.scrollIntoView) formRef.current.scrollIntoView({ behavior: 'smooth' });
-  }, [formRef]);
+    if (window) {
+      window.scrollTo(0, document.body.scrollHeight);
+    }
+  });
 
   return useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {

src/shared/layouts/header/mobile/index.styles.tsx

@@ -6,6 +6,11 @@ const Header = styled.header`
   background-color: ${({ theme }) => theme.colors.dark400};
   min-height: 100px;
   padding: 1.5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: ${({ theme }) => theme.typography.zIndexes.max};
 `;
 
 const Logo = styled.img`

src/shared/layouts/main/index.styles.tsx

@@ -5,8 +5,10 @@ import { SearchWidget } from 'shared/components';
 import { Container } from '../container/index.layout';
 
 const MainNode = styled(Container)`
-  padding: 1.5rem;
+  padding: 3rem 1.5rem;
   position: relative;
+  margin-top: 120px;
+  margin-bottom: 50px;
 `;
 
 const SearchWidgetNode = styled(SearchWidget)`