css changes

natmegs · Jan 8, 2019 · 3954b2b · 3954b2b
2 parents 0c189cb + db0426d
commit 3954b2b
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
+    "@babel/polyfill": "^7.2.5",
     "classnames": "^2.2.6",
     "firebase": "^5.5.6",
     "node-sass-chokidar": "^1.3.4",

diff --git a/src/App.js b/src/App.js
@@ -102,16 +102,16 @@ class App extends Component {
                   Git <span>Command</span> Explorer
                 </h2>
                 <p className="content__subtitle dark-grey">
-                  Find the right commands you need without digging through the web
+                  Find the right commands you need without digging through the web.
                 </p>
 
                 <div className="options">
                   <h4 className="options__title">I want to:</h4>
 
                   <Select
                     placeholder="..."
-                    className="options__select"
-                    classNamePrefix="options__select"
+                    className="options-select"
+                    classNamePrefix="options-select"
                     isSearchable={true}
                     onChange={this.onFirstChange}
                     value={firstOption}
@@ -121,8 +121,8 @@ class App extends Component {
                   {showSecond ? (
                     <Select
                       placeholder="..."
-                      className="options__select"
-                      classNamePrefix="options__select"
+                      className="options-select"
+                      classNamePrefix="options-select"
                       isSearchable={true}
                       onChange={this.onSecondChange}
                       value={secondOption}
@@ -133,8 +133,8 @@ class App extends Component {
                   {showThird ? (
                     <Select
                       placeholder="..."
-                      className="options__select"
-                      classNamePrefix="options__select"
+                      className="options-select"
+                      classNamePrefix="options-select"
                       isSearchable={true}
                       onChange={this.onThirdChange}
                       value={thirdOption}
@@ -143,31 +143,32 @@ class App extends Component {
                   ) : null}
                 </div>
               </div>
-              <div className="col-7">
-                <h2 className="board__title  dark-white">Usage</h2>
-
-                <div className="board board--1">
-                  <pre>
-                    {usage.length ? (
-                      <Typist avgTypingDelay={50} cursor={{ show: false }}>
-                        {usage}
-                      </Typist>
-                    ) : null}
-                  </pre>
-                </div>
-
-                {nb ? (
-                  <React.Fragment>
-                    <h2 className="board__title  dark-white">Note</h2>
-                    <div className="board board--2">
-                      <pre className="faded">
+              <div className="col-7 boards">
+                <div className="board__group">
+                  <h2 className="board__title  dark-white">Usage</h2>
+                  <div className="board board--1">
+                    <pre>
+                      {usage.length ? (
                         <Typist avgTypingDelay={50} cursor={{ show: false }}>
-                          {nb}
+                          {usage}
                         </Typist>
-                      </pre>
+                      ) : null}
+                    </pre>
+                  </div>
+
+                  {nb ? (
+                    <div className="board__group board__group--2">
+                      <h2 className="board__title  dark-white">Note</h2>
+                      <div className="board board--2">
+                        <pre className="faded">
+                          <Typist avgTypingDelay={50} cursor={{ show: false }}>
+                            {nb}
+                          </Typist>
+                        </pre>
+                      </div>
                     </div>
-                  </React.Fragment>
-                ) : null}
+                  ) : null}
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,16 +1,24 @@
 import React from 'react';
+// import github from 'assets/svg/github.svg';
+// import githubGreen from 'assets/svg/github-green.svg';
 import PropTypes from 'prop-types';
 
 const Footer = () => (
   <footer className="footer">
-    <a
-      href="http://www.summitech.ng"
-      target="_blank"
-      rel="noopener noreferrer"
-      className="footer__copyright  dark-white"
-    >
-      Made with <span>❤</span> by Summitech
-    </a>
+    {/* <div className="logo">
+      {props.dark ? (
+        <img src={githubGreen} alt="Github Logo" className="logo--github" />
+      ) : (
+        <img src={github} alt="Github Logo" className="logo--github" />
+      )}
+    </div> */}
+    <p className="footer__copyright  dark-white">
+      Made with <span>❤</span> by{' '}
+      <a href="https://www.summitech.ng" target="_blank" rel="noopener noreferrer">
+        Summitech
+      </a>
+      .
+    </p>
   </footer>
 );
 

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -12,17 +12,6 @@ class Nav extends React.Component {
   render() {
     return (
       <nav className="nav">
-        {/* <div className="language">
-          <p className="language__title dark-white">Language</p>
-          <Select
-            className="language__select"
-            classNamePrefix="language__select"
-            isSearchable={false}
-            value={selectedOption}
-            options={options}
-          />
-        </div> */}
-
         <div className="toggle">
           <p className="toggle__option toggle__option--left  dark-white">Light Mode</p>
           <div className="toggler">

diff --git a/src/constants/primary-options.js b/src/constants/primary-options.js
@@ -7,7 +7,6 @@ const options = [
   { value: 'delete', label: 'delete/remove' },
   { value: 'compareCommits', label: 'compare two commits' },
   { value: 'configure', label: 'configure' },
-  { value: 'exit', label: 'exit' },
   { value: 'clone', label: 'clone' },
   { value: 'ignore', label: 'ignore' },
   // { value: 'correct', label: 'correct' },

diff --git a/src/constants/secondary-options.js b/src/constants/secondary-options.js
@@ -30,14 +30,6 @@ export const secondaryOptions = {
     }
   ],
 
-  exit: [
-    {
-      value: 'exit-log',
-      label: 'git log',
-      usage: 'Type q in the terminal to exit the logs'
-    }
-  ],
-
   revert: [
     {
       value: 'specific-commit',
@@ -70,7 +62,8 @@ export const secondaryOptions = {
     {
       value: 'logs',
       label: 'commit logs/history',
-      usage: 'git log'
+      usage: 'git log',
+      nb: 'Type q in the terminal to exit the logs'
     },
     {
       value: 'uncommittedChanges',

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from 'App';

diff --git a/src/scss/components/_footer.scss b/src/scss/components/_footer.scss
@@ -1,5 +1,4 @@
 .footer {
-  margin-top: 5rem;
   &__copyright {
     display: block;
     @include text();
@@ -12,11 +11,25 @@
     &:hover {
       color: initial;
     }
+
+    a {
+      color: inherit;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 
   .logo {
     display: flex;
     justify-content: flex-end;
+
+    @include respond('as') {
+      justify-content: center;
+      margin-bottom: 1rem;
+    }
+
     &--github {
       width: 4rem;
       height: 4rem;

diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss
@@ -1,20 +1,20 @@
 .nav {
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: flex-end;
 
-  @include respond("xs") {
+  @include respond('xs') {
+    align-items: center;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-end;
   }
 
   .language {
-    display: flex;
     align-items: center;
+    display: flex;
     margin-right: 4rem;
 
-    @include respond("xs") {
+    @include respond('xs') {
       margin-right: 0;
       margin-bottom: 2rem;
     }

diff --git a/src/scss/components/_toggle.scss b/src/scss/components/_toggle.scss
@@ -1,4 +1,4 @@
-$width: 35px;
+$width: 45px;
 $height: 10px;
 
 .toggle {
@@ -9,10 +9,10 @@ $height: 10px;
     @include text();
     transition: all 0.3s;
     &--left {
-      margin-right: 1.5rem;
+      margin-right: 1rem;
     }
     &--right {
-      margin-left: 1.5rem;
+      margin-left: 1rem;
     }
   }
 }
@@ -25,11 +25,11 @@ $height: 10px;
   height: $height;
   text-align: center;
   position: relative;
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     display: none;
     &:checked ~ .button {
       background: $color-white;
-      left: ($width - ($height * 1.4 - $height) / 2) - $height;
+      left: $width - ($height * 2);
       transition: 0.5s;
     }
     &:checked ~ .switch {
@@ -56,7 +56,7 @@ $height: 10px;
     background: white;
     position: absolute;
     top: ($height * 2 - $height) / -2;
-    left: ($height * 2 - $height) / -2;
+    left: 0;
     box-shadow: 0 $width / 50 $width / 25 rgba(black, 0.4);
     transition: 0.5s;
     cursor: pointer;