Migrate 2FA codes container to tailwind

Levminer · Jan 8, 2022 · b02203c · b02203c
1 parent 7ad2118
commit b02203c
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 215 deletions.
diff --git a/.tailwindrc.js b/.tailwindrc.js
@@ -37,6 +37,7 @@ module.exports = {
 
 			screens: {
 				lg: "1400px",
+				md: "200px",
 			},
 
 			stroke: (theme) => ({

diff --git a/app/application/index.html b/app/application/index.html
@@ -121,7 +121,7 @@ <h5 class="mx-3 flex flex-row m-0 font-bold build-content text-center">You are r
 		<!-- content -->
 		<div class="bg-gray-700 w-3/5 mx-auto mt-20 mb-60 rounded-2xl relative text-center content p-1">
 			<h1 class="h1 mb-5">Authme</h1>
-			<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 pb-5" id="choose">
+			<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 pb-5 hidden" id="choose">
 				<h3 class="pt-3">Please choose your import file!</h3>
 				<h4>If you don't have an import file containing your 2FA codes please create one!</h4>
 				<div class="flex flex-row flex-wrap gap-3 items-center justify-center">
@@ -139,7 +139,7 @@ <h4>If you don't have an import file containing your 2FA codes please create one
 					</button>
 				</div>
 			</div>
-			<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 pb-5" id="starting">
+			<div class="mx-auto rounded-2xl bg-gray-800 w-2/3 pb-5 hidden" id="starting">
 				<h3 class="pt-3">Getting started</h3>
 				<h4>Importing files</h4>
 				<div class="flex flex-row flex-wrap gap-3 items-center justify-center">
@@ -173,7 +173,7 @@ <h4>Useful options</h4>
 					</button>
 				</div>
 			</div>
-			<div class="save_container flex justify-center" id="save">
+			<div class="save_container justify-center hidden mb-5" id="save">
 				<div class="mx-auto rounded-2xl bg-gray-800 mb-8 w-2/3 pb-5">
 					<h3 class="pt-3">Save codes</h3>
 					<h4>Save your 2FA codes to your computer for future use.</h4>
@@ -207,7 +207,7 @@ <h4>Save your 2FA codes to your computer for future use.</h4>
 					</div>
 				</div>
 			</div>
-			<!-- grid -->
+			<!-- codes -->
 		</div>
 	</body>
 </html>
diff --git a/app/application/src/css/index.css b/app/application/src/css/index.css
@@ -2,124 +2,7 @@
 	overflow-y: scroll !important;
 }
 
-h4 {
-	font-size: 1.5rem;
-}
-
-/* grid */
-.grid {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: repeat(2, 1fr);
-	grid-column-gap: 0px;
-	grid-row-gap: 0px;
-	justify-items: center;
-
-	background-color: rgb(10, 10, 10);
-	margin-top: 50px;
-	border-radius: 30px;
-	margin: 0 auto;
-	margin-top: 20px;
-	width: 66.666667%;
-	height: 270px;
-}
-
-@media (max-width: 1199.98px) {
-	.grid {
-		width: 90%;
-	}
-}
-
-.grid:last-child {
-	margin-bottom: 50px;
-}
-
-.div1 {
-	grid-area: 1 / 1 / 2 / 2;
-}
-
-.div2 {
-	grid-area: 1 / 2 / 2 / 3;
-}
-
-.div3 {
-	grid-area: 1 / 3 / 2 / 4;
-}
-
-.div4 {
-	grid-area: 2 / 1 / 3 / 4;
-	align-items: center;
-}
-
-.div4 button {
-	position: relative;
-	top: 20px;
-}
-
 #search:hover ~ .searchIcon {
 	transition: 0.2s ease-in;
 	stroke: white;
 }
-
-#search {
-	line-height: 1.75rem !important;
-}
-
-#save {
-	display: none;
-	margin-bottom: 20px;
-	margin: 0 auto;
-}
-
-.text3 {
-	position: relative;
-	top: 10px;
-}
-
-a {
-	color: white;
-	text-decoration: underline;
-}
-
-#docs {
-	position: relative;
-	right: 20px;
-}
-
-#sample {
-	position: relative;
-	left: 20px;
-}
-
-#starting,
-#choose {
-	display: none;
-}
-
-.name {
-	background-color: rgb(20, 20, 20);
-	padding-right: 10px;
-	padding-left: 10px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-	border-radius: 30px;
-	user-select: all;
-	margin-bottom: 10px;
-	font-size: 24px;
-}
-
-.text2 {
-	font-size: 24px !important;
-}
-
-.dropdown-content {
-	width: 12rem;
-	left: 253px;
-	top: 75px;
-}
-
-.dropdown-content a:hover {
-	background-color: white;
-	color: black;
-	cursor: default;
-}