header in dashboard: size, logo, fixed

smart-hut/src/components/HeaderController.js

@@ -2,43 +2,45 @@ import React from "react";
 import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
 import { Segment, Image } from 'semantic-ui-react'
 
-const ImageExampleWrapped = () => (
-    <Image src='avatar3.png' size='tiny' centered
-        
+const AvatarImage = () => (
+    <Image 
+      src='avatar3.png' 
+      style={{width: '25px', height: 'auto'}}
+      centered
     />
   )
 
-  const ImageExampleWrapped2 = () => (
+  const IconHomeImage = () => (
     <Image 
         src='smart-home.png' 
-        size='tiny' 
+        style={{width: '50px', height: 'auto'}} 
         centered
         as='a'
         href='/'
     />
   )  
 
-const ImageExampleWrapped3 = () => (
-    <Image src='title6.png' size='medium' centered/>
+const TitleImage = () => (
+    <Image src='title7.png' size='medium' centered/>
   ) 
 
 
 
 const GridExampleInverted = (props) => (
-    <Grid columns='equal' divided inverted padded >
-      <Grid.Row color='black' textAlign='center'>
-        <Grid.Column width={2}>
+    <Grid columns='equal' divided inverted padded>
+      <Grid.Row color='black' textAlign='center' >
+        <Grid.Column width={3} height={0.5}>
           <Segment color='black' inverted>
-          <ImageExampleWrapped2 /> 
+          <IconHomeImage /> 
           </Segment>
         </Grid.Column>
         <Grid.Column>
           <Segment color='black' inverted>
-          <ImageExampleWrapped3 />
+          <TitleImage />
           </Segment>
         </Grid.Column>
-        <Grid.Column width={3}>
-        <ImageExampleWrapped /> 
+        <Grid.Column width={2} heigth={1}>
+        <AvatarImage /> 
         <Divider />
         <Dropdown item icon='setting' size='huge'>
         <Dropdown.Menu>