[Updated - v0.1.5]

- [Edited] UI Responsive - [Edited] Changed `grid` into `flex`
owlsome-official · Aug 2, 2021 · c4f179b · c4f179b
1 parent 741a5d2
commit c4f179b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -47,28 +47,30 @@ 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}
             onChange={e => setKey(e.target.value)}
             placeholder="Enter Key"
           />
           <InputWithLabel
+            className="w-1/2"
             name="iv"
             label="IV:"
             value={iv}
             onChange={e => setIV(e.target.value)}
             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
@@ -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
@@ -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
@@ -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}