From c406e1e822dc78d916bae3f94728f0720ec09e00 Mon Sep 17 00:00:00 2001
From: Sherali <sherali.uz@gmail.com>
Date: Sun, 28 Jul 2019 12:25:41 +0500
Subject: [PATCH 1/2] feat(MainLayout): tabs, shadows and other css changes

---
 src/components/editor/EditorComponent.tsx | 11 +----
 src/components/icons/LogoSVG.tsx          | 10 ++++-
 src/components/layout/Footer.tsx          |  2 +-
 src/components/layout/Header.tsx          |  5 ++-
 src/components/layout/MainLayout.tsx      |  7 +++-
 src/pages/index.tsx                       | 51 ++++++++++++++++-------
 src/pages/policy.tsx                      |  2 -
 7 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/components/editor/EditorComponent.tsx b/src/components/editor/EditorComponent.tsx
index bd9783f..cf6cbe0 100644
--- a/src/components/editor/EditorComponent.tsx
+++ b/src/components/editor/EditorComponent.tsx
@@ -159,7 +159,7 @@ function EditorComponent({
                                         }
                                     }}
             >
-                <CloseSVG  color="#8d9aaf"/>
+                <CloseSVG color="#8d9aaf"/>
             </button>}
             {hasCloneBtn && <FlexBox className="editor-actions">
                 <button>
@@ -174,12 +174,10 @@ function EditorComponent({
             </FlexBox>}
             <style>{`
                 .editor-box{
-                   width: 50%;
                    background-color: white;
                    position: relative;
-                   margin-right: 7px;
-                   box-shadow: 0 1px 3px -1px rgba(0,0,0,0.1);
                    border-radius: 4px;
+                   box-shadow: 0 2px 5px #eff3fb, 0 10px 20px #eff3fb;
                 }
                 .editor-box p{
                     margin:0;
@@ -192,11 +190,6 @@ function EditorComponent({
                 .editor-box button:focus{
                     outline: none;
                 }
-                    
-                .editor-box + .editor-box {
-                    margin-left: 7px;
-                    margin-right: 0;
-                }
                 .editor-box .editor{
                     border-radius: 4px
                 }
diff --git a/src/components/icons/LogoSVG.tsx b/src/components/icons/LogoSVG.tsx
index 1e840ae..a87acf0 100644
--- a/src/components/icons/LogoSVG.tsx
+++ b/src/components/icons/LogoSVG.tsx
@@ -1,8 +1,14 @@
 import React from "react";
 
-export default function LogoSVG(): JSX.Element {
+const RATIO = 3.431818181818181;
+
+interface IProps {
+    height: number
+}
+
+export default function LogoSVG({height}: IProps): JSX.Element {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="151" height="44" viewBox="0 0 151 44">
+        <svg xmlns="http://www.w3.org/2000/svg" width={height * RATIO} height={height} viewBox="0 0 151 44">
             <g fill="none" fillRule="evenodd">
                 <path fill="#FFBB4B" d="M12 11a6 6 0 1 1-12 0 6 6 0 0 1 12 0"/>
                 <path fill="#FF4E4E" d="M32.619 11a6 6 0 1 1-12 0 6 6 0 0 1 12 0"/>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index a783f61..5d42053 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -19,7 +19,7 @@ export default function Footer() {
             </ContainerBox>
             <style jsx>{`
                         .main-footer {
-                          height: 92px;
+                          height: 70px;
                           display:flex;
                           align-items:center;
                           background-color: #ffffff;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 2f0990d..4acea9b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -11,17 +11,18 @@ export default function Header() {
                 <FlexBox>
                     <Link href="/">
                         <a>
-                            <LogoSVG/>
+                            <LogoSVG height={36}/>
                         </a>
                     </Link>
                 </FlexBox>
             </ContainerBox>
             <style jsx>{`
                         .main-header {
-                          height: 92px;
+                          height: 70px;
                           display:flex;
                           align-items:center;
                           background-color: #ffffff;
+                          box-shadow: 0 2px 2px #eff3fb,0 10px 15px #eff3fb;
                         }
                     `}</style>
         </header>
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index ea3b698..7ec7744 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -33,13 +33,18 @@ export default function MainLayout({pageTitle, customHead, children}: IProps): J
                 {`
                     body {
                         margin: 0;
+                        color: #6a7990;
+                        font-size: 1rem;
+                      font-family: Roboto,Arial,Helvetica,sans-serif;
+                      font-weight: 400;
+                      line-height: 1.5;
+                      background-color: #fbfcfe;
                     }
                     html,
                     input,
                     textarea {
                         font-family: "Roboto", sans-serif;
                         line-height: 1.4;
-                        background: #FDFDFD;
                     }
                      p {
                         margin: 0 0 15px;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0c41fbd..112decd 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,6 +6,8 @@ import initialJson from "../components/editor/editor_value.json"
 import MainLayout from "../components/layout/MainLayout"
 import * as editorUtils from "../helpers/editorUtils"
 import FlexBox from "../components/box/FlexBox"
+import Link from "next/link";
+
 const initialValue = Value.fromJSON(initialJson)
 
 export default function IndexPage(): JSX.Element {
@@ -32,21 +34,42 @@ export default function IndexPage(): JSX.Element {
     return (
         <MainLayout pageTitle="Tekshir.uz">
             <FlexBox style={{justifyContent: "space-between"}}>
-                <EditorComponent
-                    editor={leftEditor}
-                    onClear={onClearEditors}
-                    placeholder="Matnni bu yerga kiriting"
-                    autoFocus={true}
-                    hasClearBtn={true}
-                    value={leftValue}
-                    onChange={onLeftChange}
-                    onContentChange={convertToRight}
-                />
-                <EditorComponent
-                    placeholder="Oʻgirilgan matn bu yerda chiqadi"
-                    editor={rightEditor}
-                    value={rightValue}
+                <FlexBox direction={"column"} style={{width:"49%"}}>
+                    <FlexBox className="editor-header">
+                        <Link href="/">Avtomatik tarzda</Link>
+                        <Link href="/?type=lat2cyr">Lotin</Link>
+                        <Link href="/?type=cyr2lat">Kiril</Link>
+                    </FlexBox>
+                    <EditorComponent
+                        editor={leftEditor}
+                        onClear={onClearEditors}
+                        placeholder="Matnni bu yerga kiriting"
+                        autoFocus={true}
+                        hasClearBtn={true}
+                        value={leftValue}
+                        onChange={onLeftChange}
+                        onContentChange={convertToRight}
+                    />
+                </FlexBox>
+
+                <FlexBox direction={"column"} style={{width:"49%"}}>
+                    <FlexBox className="editor-header">
+                        <Link href="/?type=lat2cyr">Kiril</Link>
+                        <Link href="/?type=cyr2lat">Lotin</Link>
+                    </FlexBox>
+                    <EditorComponent
+                        placeholder="Oʻgirilgan matn bu yerda chiqadi"
+                        editor={rightEditor}
+                        value={rightValue}
                     />
+                </FlexBox>
+                <style>{`
+                    .editor-header a{
+                        color: #8d9aaf;
+                        text-decoration: none;
+                        padding: 10px
+                    }
+                `}</style>
             </FlexBox>
         </MainLayout>
     )
diff --git a/src/pages/policy.tsx b/src/pages/policy.tsx
index bed87eb..b04817c 100644
--- a/src/pages/policy.tsx
+++ b/src/pages/policy.tsx
@@ -1,11 +1,9 @@
 import React from "react"
-import Link from "next/link"
 import MainLayout from "../components/layout/MainLayout"
 
 interface IProps {}
 
 export default function IndexPage(props: IProps): JSX.Element {
-    // console.log(props)
     return (
         <MainLayout pageTitle={"Loyiha haqida"}>
             <h2>Loyiha haqida</h2>

From d049eb4478be1bf237b3be2896f656b9e48403b7 Mon Sep 17 00:00:00 2001
From: Sherali <sherali.uz@gmail.com>
Date: Sun, 28 Jul 2019 12:47:06 +0500
Subject: [PATCH 2/2] feat(index.tsx): left editor tabs links

---
 src/components/editor/EditorComponent.tsx | 10 ++++-
 src/pages/index.tsx                       | 48 +++++++++++++++++++----
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/EditorComponent.tsx b/src/components/editor/EditorComponent.tsx
index cf6cbe0..2480514 100644
--- a/src/components/editor/EditorComponent.tsx
+++ b/src/components/editor/EditorComponent.tsx
@@ -159,11 +159,11 @@ function EditorComponent({
                                         }
                                     }}
             >
-                <CloseSVG color="#8d9aaf"/>
+                <CloseSVG/>
             </button>}
             {hasCloneBtn && <FlexBox className="editor-actions">
                 <button>
-                    <CopySVG color="#8d9aaf"/>
+                    <CopySVG/>
                     <style>{`
                     .editor-actions{
                         padding: 0 20px 15px;
@@ -193,6 +193,12 @@ function EditorComponent({
                 .editor-box .editor{
                     border-radius: 4px
                 }
+                .editor-box svg{
+                    opacity: .5;
+                }
+                .editor-box button:hover svg{
+                    opacity: 1;
+                }
                 .editor-box .close-button{
                     position:absolute;
                     top: 17px;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 112decd..2ef4ef5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useRef, useState} from "react"
-import {debounce} from "lodash"
+import {debounce, isEqual} from "lodash"
 import EditorComponent from "../components/editor/EditorComponent"
 import {Value} from "slate"
 import initialJson from "../components/editor/editor_value.json"
@@ -10,7 +10,30 @@ import Link from "next/link";
 
 const initialValue = Value.fromJSON(initialJson)
 
-export default function IndexPage(): JSX.Element {
+interface IProps {
+    url: any
+}
+
+const TABS = [
+    {
+        code: "auto",
+        query: {},
+        title: "Avtomatik aniqlash"
+    },
+    {
+        code: "lat2cyr",
+        query: {tab: "lat2cyr"},
+        title: "Lotin"
+    },
+    {
+        code: "cyr2lat",
+        query: {tab: "cyr2lat"},
+        title: "Kiril"
+    },
+]
+
+export default function IndexPage({url}: IProps): JSX.Element {
+    console.log("test === ", url)
     const [leftValue, setLeftValue] = useState<Value>(initialValue)
     const [rightValue, setRightValue] = useState<Value>(initialValue)
     const leftEditor = useRef<any>()
@@ -34,11 +57,15 @@ export default function IndexPage(): JSX.Element {
     return (
         <MainLayout pageTitle="Tekshir.uz">
             <FlexBox style={{justifyContent: "space-between"}}>
-                <FlexBox direction={"column"} style={{width:"49%"}}>
+                <FlexBox direction={"column"} style={{width: "49%"}}>
                     <FlexBox className="editor-header">
-                        <Link href="/">Avtomatik tarzda</Link>
-                        <Link href="/?type=lat2cyr">Lotin</Link>
-                        <Link href="/?type=cyr2lat">Kiril</Link>
+                        {TABS.map(tab =>
+                            <Link href={{pathname: "/", query: tab.query}}>
+                                <a className={isEqual(url.query, tab.query) ? 'active' : 'no-active'}>
+                                    {tab.title}
+                                </a>
+                            </Link>
+                        )}
                     </FlexBox>
                     <EditorComponent
                         editor={leftEditor}
@@ -52,7 +79,7 @@ export default function IndexPage(): JSX.Element {
                     />
                 </FlexBox>
 
-                <FlexBox direction={"column"} style={{width:"49%"}}>
+                <FlexBox direction={"column"} style={{width: "49%"}}>
                     <FlexBox className="editor-header">
                         <Link href="/?type=lat2cyr">Kiril</Link>
                         <Link href="/?type=cyr2lat">Lotin</Link>
@@ -67,7 +94,12 @@ export default function IndexPage(): JSX.Element {
                     .editor-header a{
                         color: #8d9aaf;
                         text-decoration: none;
-                        padding: 10px
+                        padding: 10px;
+                        
+                    }
+                    .editor-header a.active{
+                        border-bottom: 2px solid rgba(0,0,0,0.5);
+                        
                     }
                 `}</style>
             </FlexBox>