fixed the avatar to ease the updation and viewing simultaneously

package.json

@@ -9,9 +9,9 @@
     "history": "^4.7.2",
     "lodash": "^4.17.19",
     "prop-types": "^15.7.2",
-    "react": "^17.0.0",
+    "react": "^18.2.0",
     "react-bootstrap": "^1.6.1",
-    "react-dom": "^17.0.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-scripts-ts": "^3.1.0",
     "react-url-query": "^1.2.0",
@@ -30,9 +30,9 @@
     "@types/lodash": "^4.14.172",
     "@types/node": "^8.0.53",
     "@types/prop-types": "^15.5.2",
-    "@types/react": "^17.0.18",
+    "@types/react": "^18.0.21",
     "@types/react-bootstrap": "^0.32.26",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.0",
     "import-sort-style-renke": "^3.0.0",
     "tslint-config-prettier": "^1.18.0",
@@ -59,5 +59,9 @@
     "trailingComma": "es5",
     "bracketSpacing": true,
     "jsxBracketSameLine": true
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2"
   }
 }

public/index.html

@@ -10,7 +10,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
     <link href="%PUBLIC_URL%/favicon.png" rel="icon" sizes="32x32" type="image/png">
     <link rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
@@ -40,9 +40,9 @@
     </noscript>
     <div class="container">
 
-      <div id="root">
+      <div id="root" style="position: relative;">
         <header class='header clearfix'> 
-          <h2 class='text-muted' style="color: #6A39D7 !important;">avataaars generator</h2> 
+          <h2 class='text-muted' style="color: #6A39D7 !important; ">avataaars generator</h2> 
         </header> 
       </div>
 

public/manifest.json

@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
+      "sizes": "16x16" ,
       "type": "image/png"
     }
   ],

src/components/App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import Main from './Main'
 import history from '../history'
 
@@ -10,6 +9,11 @@ export default class App extends React.Component {
   }
 
   render () {
-    return <Main />
+    return (
+      <div>
+      <Main/>
+      </div>
+
+    );
   }
 }

src/components/AvatarForm.tsx

@@ -13,6 +13,7 @@ interface SelectProps {
   controlId: string
   label: string
   value: string
+  children: React.ReactNode
   onChange?: (value: string) => void
 }
 
@@ -26,10 +27,13 @@ const serializeQuery = function (obj: any) {
   }
   return str.join('&')
 }
-
+export interface AuxProps  { 
+  children: React.ReactNode
+}
+
 class OptionSelect extends React.Component<SelectProps> {
   render() {
-    const { controlId, label, value, children } = this.props
+    const { controlId, label, value, children} = this.props
     return (
       <FormGroup className='row' controlId={controlId}>
         <Col as={FormLabel} sm={3}>
@@ -104,7 +108,8 @@ export default class AvatarForm extends React.Component<Props> {
     const labelCol = 3
     const inputCol = 9
     return (
-      <Form>
+
+      <Form >
         <FormGroup className='row' controlId='avatar-style'>
           <Col as={FormLabel} sm={3}>
             Avatar Style

src/components/ComponentCode.tsx

@@ -14,7 +14,9 @@ export default class ComponentCode extends React.Component<Props> {
   private textArea: HTMLTextAreaElement | null = null
 
   private get optionContext(): OptionContext {
-    return this.context.optionContext
+    return  this.optionContext
+
+
   }
 
   UNSAFE_componentWillMount() {

src/components/ComponentImg.tsx

@@ -14,7 +14,7 @@ export default class ComponentCode extends React.Component<Props> {
   private textArea: HTMLTextAreaElement | null = null
 
   private get optionContext(): OptionContext {
-    return this.context.optionContext
+    return this.optionContext;
   }
 
   UNSAFE_componentWillMount() {
@@ -42,7 +42,7 @@ export default class ComponentCode extends React.Component<Props> {
 />`
     return (
       <div>
-        <h3 style={{ color: '#6A39D7' }}>
+        <h3 style={{ color: '#FFFFFF' }}>
           &lt;img&gt; Code{' '}
           <a
             href='https://github.com/gkoberger/avataaars'

src/components/Main.tsx

@@ -6,7 +6,7 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Avatar, AvatarStyle, OptionContext, allOptions } from 'avataaars'
 import { Button } from 'react-bootstrap'
-import { Helmet } from 'react-helmet'
+// import { Helmet } from 'react-helmet'
 import {
   UrlQueryParamTypes,
   UrlUpdateTypes,
@@ -98,6 +98,7 @@ export class Main extends React.Component<Props, State> {
     const title = 'Avataaars Generator - Generate your own avataaars!'
     const imageURL = process.env.REACT_APP_IMG_RENDERER_URL + location.search
     return (
+      <>
       <main role='main'>
         <header className='header clearfix'>
           <h2 style={{ color: '#6A39D7' }}>
@@ -112,7 +113,7 @@ export class Main extends React.Component<Props, State> {
             </Button>
           </h2>
         </header>
-        <Helmet>
+        {/* <Helmet> */}
           <meta property='og:title' content={title} />
           <meta property='og:site_name' content='Avataaars Generator' />
           <meta property='og:url' content={document.location.href} />
@@ -126,11 +127,13 @@ export class Main extends React.Component<Props, State> {
           <meta name='twitter:title' content={title} />
           <meta name='twitter:image' content={imageURL} />
           <meta name='twitter:url' content={document.location.href} />
-        </Helmet>
-        <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
-          <Avatar ref={this.onAvatarRef} avatarStyle={avatarStyle} />
-        </div>
-        <AvatarForm
+        {/* </Helmet> */}
+        <div>
+          <div style={{position:"fixed",left:"20px",top:"100px",border:"9px solid green"}}> 
+            <Avatar ref={this.onAvatarRef} avatarStyle={avatarStyle} />
+           </div>
+           <div style={{position:"relative",textAlign:"center"}}>
+           <AvatarForm 
           optionContext={this.optionContext}
           avatarStyle={avatarStyle}
           displayingCode={displayComponentCode}
@@ -142,7 +145,7 @@ export class Main extends React.Component<Props, State> {
           onToggleImg={this.onToggleImg}
         />
         {displayComponentImg ? (
-          <ComponentImg avatarStyle={avatarStyle} />
+          <ComponentImg  avatarStyle={avatarStyle} />
         ) : null}
         {displayComponentCode ? (
           <ComponentCode avatarStyle={avatarStyle} />
@@ -153,7 +156,13 @@ export class Main extends React.Component<Props, State> {
           height='560'
           ref={this.onCanvasRef}
         />
+           </div>
+        </div>
+
+
       </main>
+      </>
+
     )
   }
 
@@ -262,4 +271,5 @@ export class Main extends React.Component<Props, State> {
   }
 }
 
+
 export default addUrlProps({ urlPropsQueryConfig })(Main)