From 2148903389e451a7b0d1662fd255487b403fa990 Mon Sep 17 00:00:00 2001
From: Siddhant Khare <siddhantkhare2694@gmail.com>
Date: Tue, 13 Apr 2021 12:13:58 +0530
Subject: added reposnvie design for small & mobile screen

---
 frontend/src/components/Options.js | 74 ++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 34 deletions(-)

(limited to 'frontend/src/components/Options.js')

diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index 97d3127..25484e3 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -1,39 +1,45 @@
-import React from 'react';
-import styled from 'styled-components'
-import { Password, Expiry, Language } from './Inputs'
+import React from "react";
+import styled from "styled-components";
+import { Password, Expiry, Language } from "./Inputs";
 
 const Flex = styled.div`
-    float: right;
-    display: flex;
-    flex-direction: row;
-    transform: translateY(0.2em);
-    
-    & > *:not(:first-child) {
-      margin-left: 2em;
-    }
+  float: right;
+  display: flex;
+  flex-direction: row;
+  transform: translateY(0.2em);
 
-    @media (max-width: 850px) {
-        float: none !important;
-    }
-`
+  & > *:not(:first-child) {
+    margin-left: 2em;
+  }
 
-const OptionsContainer = ({pass, lang, expiry, onPassChange, onLangChange, onExpiryChange}) => {
-    return (
-        <Flex>
-            <Password
-                value={pass}
-                onChange={onPassChange}
-                id="passwordInput" />
-            <Language
-                value={lang}
-                onChange={onLangChange}
-                id="langInput" />
-            <Expiry
-                value={expiry}
-                onChange={onExpiryChange}
-                id="expiryInput" />
-        </Flex>
-    );
-}
+  @media (max-width: 850px) {
+    position: auto;
+    display: inline-flex;
+  }
+  @media (max-width: 650px) {
+    position: relative;
+    float: none !important;
+    width: 100%;
+    display: inline-table;
+    text-align: center;
+  }
+`;
 
-export default OptionsContainer
\ No newline at end of file
+const OptionsContainer = ({
+  pass,
+  lang,
+  expiry,
+  onPassChange,
+  onLangChange,
+  onExpiryChange,
+}) => {
+  return (
+    <Flex>
+      <Password value={pass} onChange={onPassChange} id="passwordInput" />
+      <Language value={lang} onChange={onLangChange} id="langInput" />
+      <Expiry value={expiry} onChange={onExpiryChange} id="expiryInput" />
+    </Flex>
+  );
+};
+
+export default OptionsContainer;
-- 
cgit v1.2.3


From b8b1d6de343eb09a1906e17eec5261c684e5fef0 Mon Sep 17 00:00:00 2001
From: Siddhant Khare <siddhantkhare2694@gmail.com>
Date: Wed, 14 Apr 2021 22:34:21 +0530
Subject: Added Requested CSS chnages to fix textBox

---
 frontend/src/components/Options.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

(limited to 'frontend/src/components/Options.js')

diff --git a/frontend/src/components/Options.js b/frontend/src/components/Options.js
index 25484e3..3c55a20 100644
--- a/frontend/src/components/Options.js
+++ b/frontend/src/components/Options.js
@@ -8,20 +8,16 @@ const Flex = styled.div`
   flex-direction: row;
   transform: translateY(0.2em);
 
-  & > *:not(:first-child) {
-    margin-left: 2em;
+  @media (min-width: 650px) {
+    & > *:not(:first-child) {
+      margin-left: 2em;
+    }
   }
 
-  @media (max-width: 850px) {
-    position: auto;
-    display: inline-flex;
-  }
   @media (max-width: 650px) {
     position: relative;
     float: none !important;
-    width: 100%;
-    display: inline-table;
-    text-align: center;
+    flex-direction: column;
   }
 `;
 
-- 
cgit v1.2.3