Added device icons near the title and some style cleanups

desktop-app/app/app.global.css

@@ -71,6 +71,15 @@ a:hover {
   cursor: pointer;
 }
 
+.react-tabs__tab {
+  display: flex;
+  align-items: center;
+}
+
+.react-tabs__tab-list {
+  display: flex;
+}
+
 /*
 {
 	"$schema": "vscode://schemas/color-theme",

desktop-app/app/app.html

@@ -36,8 +36,6 @@
           scripts.push('../dll/renderer.dev.dll.js');
         }
 
-        console.log('process.env.HOT', process.env.HOT);
-
         // Dynamically insert the bundled app script in the renderer process
         const port = process.env.PORT || 1212;
         scripts.push(
@@ -66,7 +64,7 @@
           'https://cdn.headwayapp.co/widget.js'
         );
         document.head.appendChild(headwayScript);
-      }, 1000);
+      }, 2000);
     </script>
   </body>
 </html>

desktop-app/app/components/DevicesPreviewer/index.js

@@ -11,6 +11,7 @@ import {
   INDIVIDUAL_LAYOUT,
 } from '../../constants/previewerLayouts';
 import {isDeviceEligible} from '../../utils/filterUtils';
+import {getDeviceIcon} from '../../utils/iconUtils';
 
 export default function DevicesPreviewer(props) {
   const {
@@ -33,7 +34,12 @@ export default function DevicesPreviewer(props) {
                 if (!isDeviceEligible(device, props.browser.filters)) {
                   return null;
                 }
-                return <Tab tabId={device.id}>{device.name}</Tab>;
+                return (
+                  <Tab tabId={device.id}>
+                    {getDeviceIcon(device.type)}
+                    {device.name}
+                  </Tab>
+                );
               })
               .filter(Boolean)}
           </TabList>

desktop-app/app/components/LeftIconsPane/index.js

@@ -18,33 +18,41 @@ import {
 const LeftIconsPane = props => {
   const iconProps = {
     color: iconsColor,
-    height: 25,
-    width: 25,
+    style: {fontSize: 30},
+    height: 30,
+    width: 30,
   };
   return (
     <div className={styles.iconsContainer}>
       <div className={cx(styles.icon, styles.logo)}>
         <Logo width={40} height={40} />
       </div>
-      <Grid container spacing={1} direction="column" alignItems="center">
+      <Grid
+        container
+        spacing={1}
+        direction="column"
+        alignItems="center"
+        className={cx(styles.utilitySection)}
+      >
         <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
           <div onClick={() => props.openDrawerAndSetContent(DEVICE_MANAGER)}>
             <DevicesIcon {...iconProps} />
           </div>
         </Grid>
-        <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
+        {/*<Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
           <div
             onClick={() => props.openDrawerAndSetContent(SCREENSHOT_MANAGER)}
           >
             <PhotoLibraryIcon {...iconProps} />
           </div>
-        </Grid>
-        <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-          <div id="headway">
-            <Icon type="gift" color={iconsColor} />
-          </div>
-        </Grid>
+        </Grid>*/}
       </Grid>
+      <div
+        id="headway"
+        className={cx(styles.updates, commonStyles.icons, commonStyles.enabled)}
+      >
+        <Icon type="gift" color={iconsColor} />
+      </div>
     </div>
   );
 };

desktop-app/app/components/LeftIconsPane/styles.css

@@ -1,6 +1,7 @@
 .iconsContainer {
   display: flex;
   flex-flow: column;
+  flex: 1;
 }
 
 .icon {
@@ -9,8 +10,16 @@
   margin: 3px;
 }
 
+.utilitySection {
+  flex: 1;
+}
+
 .logo {
   background: white;
   border-radius: 9%;
   margin-bottom: 50px;
 }
+
+.updates {
+  text-align: center;
+}

desktop-app/app/components/Renderer/index.js

@@ -6,12 +6,14 @@ import Spinner from '../Spinner';
 import TickAnimation from '../icons/TickAnimation';
 
 import styles from './style.module.css';
+import {getDeviceIcon} from '../../utils/iconUtils';
 
 function Renderer(props) {
   const [loading, setLoading] = useState(true);
   return (
     <div className={cx(styles.container, {[styles.hidden]: props.hidden})}>
       <div className={styles.titleContainer}>
+        {getDeviceIcon(props.device.type)}
         <span className={cx(styles.deviceTitle)}>{props.device.name}</span>
         {loading && <Spinner size={16} />}
       </div>

desktop-app/app/utils/iconUtils.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DesktopIcon from '@material-ui/icons/DesktopWindows';
+import MobileIcon from '@material-ui/icons/SmartPhone';
+import TabletIcon from '@material-ui/icons/TabletMac';
+import {DEVICE_TYPE} from '../constants/devices';
+import {iconsColor} from '../constants/colors';
+
+export const getDeviceIcon = deviceType => {
+  const iconProps = {
+    color: iconsColor,
+    style: {fontSize: 'inherit', paddingRight: 2},
+  };
+  switch (deviceType) {
+    case DEVICE_TYPE.phone:
+      return <MobileIcon {...iconProps} />;
+    case DEVICE_TYPE.tablet:
+      return <TabletIcon {...iconProps} />;
+    case DEVICE_TYPE.desktop:
+      return <DesktopIcon {...iconProps} />;
+    default:
+      return null;
+  }
+};

desktop-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Responsively-App",
   "productName": "ResponsivelyApp",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "description": "A developer-friendly browser for developing responsive web apps",
   "scripts": {
     "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
@@ -109,7 +109,9 @@
     }
   },
   "repository": {},
-  "author": {},
+  "author": {
+    "email": "p.manoj.vivek@gmail.com"
+  },
   "contributors": [],
   "license": "MIT",
   "bugs": {},