Align title and subtitle for subject page to left for the Responsive case of Tablets (#142)

* fixes #117

* json added to prettier

Author: Md Zubair Ahmed

components/learn/subject-banner.js

@@ -5,8 +5,6 @@ import { Flex, Box } from 'grid-emotion';
 
 import { baseContainer, Title, SubTitle, Button, breakpoints } from '../../utils/base.styles';
 
-// For changing background of banner
-// background-image: url('https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png');
 const BannerSection = styled.section`
   ${space};
   background: #374355;
@@ -16,7 +14,6 @@ const BannerSection = styled.section`
 const Container = styled.section`
   ${baseContainer};
   & .logo {
-    text-align: center;
     padding: 10px 15px;
     font-size: 10rem;
     background: #fff;
@@ -25,13 +22,14 @@ const Container = styled.section`
       font-size: 4.5rem;
     }
   }
-  & .titles {
+  & .title {
     text-align: left;
-    & .domain {
-      margin-left: 0px;
-      margin-right: 0px;
-      margin-bottom: 0px;
-    }
+  }
+  & .subtitle {
+    text-align: left;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
   }
   & .edit {
     display: block;
@@ -50,13 +48,12 @@ export default ({ title, subTitle, icon }) => (
             <i className={icon} />
           </div>
         </Box>
-        <Box flex={'1 1 auto'} className="titles" px={[2]}>
-          <Title>{title}</Title>
-          <SubTitle className="domain">{subTitle}</SubTitle>
+        <Box flex={'1 1 auto'} px={[2, 2, 3]}>
+          <Title className="title">{title}</Title>
+          <SubTitle className="subtitle">{subTitle}</SubTitle>
         </Box>
         <Box flex={['0 1 auto']}>
-          <Button inverted medium className="edit
-            }">
+          <Button inverted medium className="edit">
             EDIT
           </Button>
         </Box>

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "xo && jest",
-    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
+    "lint":
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' '*.json' --write && xo && markdownlint .",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -17,32 +18,19 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": [
-      "prettier",
-      "prettier/react",
-      "plugin:react/recommended"
-    ],
-    "env": [
-      "browser",
-      "node"
-    ],
+    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
+    "env": ["browser", "node"],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": [
-      "next.config.js"
-    ],
+    "ignores": ["next.config.js"],
     "overrides": [
       {
         "files": "**/__tests__/*.test.js",
-        "globals": [
-          "describe",
-          "it",
-          "expect"
-        ]
+        "globals": ["describe", "it", "expect"]
       }
     ]
   },
@@ -53,16 +41,8 @@
       "jest --findRelatedTests",
       "git add"
     ],
-    "**/*.md": [
-      "prettier",
-      "markdownlint",
-      "git add"
-    ],
-    ".github/CONTRIBUTING.md": [
-      "doctoc",
-      "prettier",
-      "git add"
-    ]
+    "**/*.md": ["prettier", "markdownlint", "git add"],
+    ".github/CONTRIBUTING.md": ["doctoc", "prettier", "git add"]
   },
   "dependencies": {
     "babel-plugin-emotion": "^8.0.10",