From c4f179b1610b96dc26788601c28149ab4c8edfe8 Mon Sep 17 00:00:00 2001
From: Chinnawat Chimdee <chinnawat.cpre@gmail.com>
Date: Mon, 2 Aug 2021 17:53:20 +0700
Subject: [PATCH] [Updated - v0.1.5] - [Edited] UI Responsive - [Edited]
 Changed `grid` into `flex`

---
 CHANGELOG.md                              |  5 +++++
 package.json                              |  2 +-
 src/App.js                                | 10 ++++++----
 src/components/Input/InputGroup.js        |  5 ++---
 src/components/Input/InputWithLabel.js    |  5 ++---
 src/components/Input/TextareaWithLabel.js |  5 ++---
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 530b6ce..3faa151 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.1.5
+
+- [Edited] UI Responsive
+- [Edited] Changed `grid` into `flex`
+
 ## v0.1.4
 
 - [Added] Footer and Version
diff --git a/package.json b/package.json
index 86da9bf..7a39964 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "encrypt-tools",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "homepage": "http://buildingwatsize.github.io/encrypt-tools",
   "dependencies": {
diff --git a/src/App.js b/src/App.js
index 2cfd138..94e4866 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,13 +47,14 @@ function App({ history }) {
   }
 
   return (
-    <div className="App h-screen w-full flex justify-center items-center bg-black">
-      <div className="divide-y divide-gray-300 w-100 max-w-prose bg-white-default py-4 rounded-2xl">
+    <div className="App h-screen w-screen flex justify-center items-center bg-black">
+      <div className="divide-y divide-gray-300 w-full sm:max-w-prose bg-white-default py-4 rounded-2xl m-4">
 
         <Title name="AES Encrypt & Decrypt Tools" />
         <Navbar mode={mode} />
-        <InputGroup grid="2">
+        <InputGroup>
           <InputWithLabel
+            className="w-1/2"
             name="key"
             label="Key:"
             value={key}
@@ -61,6 +62,7 @@ function App({ history }) {
             placeholder="Enter Key"
           />
           <InputWithLabel
+            className="w-1/2"
             name="iv"
             label="IV:"
             value={iv}
@@ -68,7 +70,7 @@ function App({ history }) {
             placeholder="Enter IV"
           />
           <TextareaWithLabel
-            span="2"
+            className="w-full"
             name="input"
             label="Input:"
             value={input}
diff --git a/src/components/Input/InputGroup.js b/src/components/Input/InputGroup.js
index c65d7f4..10e5541 100644
--- a/src/components/Input/InputGroup.js
+++ b/src/components/Input/InputGroup.js
@@ -1,10 +1,9 @@
 import React from 'react'
 
-function InputGroup({ children, grid = "" }) {
-  let gridCols = !!grid ? "grid-cols-" + grid : ""
+function InputGroup({ children }) {
   return (
     <div className="px-8 py-4">
-      <div className={`grid gap-4 ${gridCols}`}>
+      <div className="flex flex-wrap -mx-4">
         {children}
       </div>
     </div>
diff --git a/src/components/Input/InputWithLabel.js b/src/components/Input/InputWithLabel.js
index 56d89fd..fe78bd7 100644
--- a/src/components/Input/InputWithLabel.js
+++ b/src/components/Input/InputWithLabel.js
@@ -1,9 +1,8 @@
 import React from 'react'
 
-function InputWithLabel({ name, label, value, onChange, placeholder, span = "" }) {
-  let colSpan = `col-span-${!!span ? span : "1"}`
+function InputWithLabel({ name, label, value, onChange, placeholder, className = "" }) {
   return (
-    <div className={`${colSpan} pb-4`}>
+    <div className={`${className} pb-4 px-4`}>
       <label htmlFor={name} className="text-xl block font-bold pb-2">{label}</label>
       <input
         name={name}
diff --git a/src/components/Input/TextareaWithLabel.js b/src/components/Input/TextareaWithLabel.js
index 5ac3111..f59af14 100644
--- a/src/components/Input/TextareaWithLabel.js
+++ b/src/components/Input/TextareaWithLabel.js
@@ -1,9 +1,8 @@
 import React from 'react'
 
-function TextareaWithLabel({ name, label, value, onChange, placeholder, span = "" }) {
-  let colSpan = `col-span-${!!span ? span : "1"}`
+function TextareaWithLabel({ name, label, value, onChange, placeholder, className = "" }) {
   return (
-    <div className={`${colSpan} pb-4`}>
+    <div className={`${className} pb-4 px-4`}>
       <label htmlFor={name} className="text-xl block font-bold pb-2">{label}</label>
       <textarea
         rows={5}