From 2c2f79e1cd324430690bafaca23aa87a70438f40 Mon Sep 17 00:00:00 2001
From: realaravinth <realaravinth@batsense.net>
Date: Wed, 21 Jul 2021 14:46:31 +0530
Subject: [PATCH] settings page styling

---
 templates/_vars.scss                         |  8 ++
 templates/components/showPassword/index.html |  4 +-
 templates/components/showPassword/main.scss  |  2 +
 templates/mobile.ts                          |  1 +
 templates/panel/help-banner/main.scss        | 10 ---
 templates/panel/help-banner/mobile.scss      |  7 ++
 templates/panel/settings/index.html          | 90 +++++++++++++-------
 templates/panel/settings/main.scss           | 85 +++++++++++++++++-
 templates/panel/settings/mobile.scss         | 20 +++++
 9 files changed, 184 insertions(+), 43 deletions(-)
 create mode 100644 templates/panel/settings/mobile.scss

diff --git a/templates/_vars.scss b/templates/_vars.scss
index ac422022..d9aaebda 100644
--- a/templates/_vars.scss
+++ b/templates/_vars.scss
@@ -32,3 +32,11 @@ $blue-link: rgb(3, 102, 214);
 
 $form-content-width: 90%;
 $form-input-height: 40px;
+
+@mixin light-text-icon-filter {
+  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(325deg)
+    brightness(105%) contrast(101%);
+  opacity: 0.8;
+}
+
+$red: #d10028;
diff --git a/templates/components/showPassword/index.html b/templates/components/showPassword/index.html
index 81f7b369..5a2ef845 100644
--- a/templates/components/showPassword/index.html
+++ b/templates/components/showPassword/index.html
@@ -1,6 +1,6 @@
 <span class="show-password-container">
   <img class="show-password--show" src="<.=
-  crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="" />
+  crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="Show Password" />
   <img class="show-password--hide" src="<.=
-  crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="" />
+  crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="Hide Password" />
 </span>
diff --git a/templates/components/showPassword/main.scss b/templates/components/showPassword/main.scss
index aa1a20f3..bb8c40d6 100644
--- a/templates/components/showPassword/main.scss
+++ b/templates/components/showPassword/main.scss
@@ -38,6 +38,8 @@ $img-width: #{$form-input-height * $img-height};
   position: relative;
   top: -#{$form-input-height * ($img-height * 1.15)};
   left: #{$form-content-width * 0.99};
+  display: block;
+  margin-bottom: -30px;
 }
 
 .show-password-container:hover {
diff --git a/templates/mobile.ts b/templates/mobile.ts
index b0b10e53..87d68662 100644
--- a/templates/mobile.ts
+++ b/templates/mobile.ts
@@ -19,6 +19,7 @@ import './mobile.scss';
 import './auth/css/mobile.scss';
 import './components/details-footer/mobile.scss';
 import './panel/css/mobile.scss';
+import './panel/settings/mobile.scss';
 import './panel/header/taskbar/mobile.scss';
 import './panel/navbar/mobile.scss';
 import './panel/help-banner/mobile.scss';
diff --git a/templates/panel/help-banner/main.scss b/templates/panel/help-banner/main.scss
index 4841bfd8..a92c4e6f 100644
--- a/templates/panel/help-banner/main.scss
+++ b/templates/panel/help-banner/main.scss
@@ -29,18 +29,8 @@
   margin-top: 40px;
 }
 
-li.help-text__instructions::marker {
-  background-color: $violet;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-}
-
 .help-text__instructions {
   font-size: 19px;
   font-weight: 500;
-  padding: 10px;
   margin: auto;
 }
diff --git a/templates/panel/help-banner/mobile.scss b/templates/panel/help-banner/mobile.scss
index 96bd261e..322c8e8f 100644
--- a/templates/panel/help-banner/mobile.scss
+++ b/templates/panel/help-banner/mobile.scss
@@ -20,4 +20,11 @@
 
 .help-text {
   flex-direction: column;
+  justify-content: normal;
+  padding: 10px;
+  margin: 20px auto;
+}
+
+.help-text__instructions {
+  width: 86%;
 }
diff --git a/templates/panel/settings/index.html b/templates/panel/settings/index.html
index 7d32af8a..5d38306e 100644
--- a/templates/panel/settings/index.html
+++ b/templates/panel/settings/index.html
@@ -17,39 +17,71 @@
 	<h1 class="form__title">
 		<.= PAGE .>
 	</h1>
-	<form action="<.= crate::V1_API_ROUTES.account.update_email .>" method="post">
-      <label class="sitekey-form__label" for="description">
+      <form class="settings__form "
+        action="<.= crate::V1_API_ROUTES.account.update_email .>" 
+        method="post">
+        <label class="settings-form__label" for="email">
           Email
-        <input
-          class="sitekey-form__input"
-          type="email"
-          name="email"
-          id="email"
-          <. if let Some(email) = email { .>
-              <. if !email.trim().is_empty() { .>
-              value="<.= email .>"
-              <. } .>
-          <. } .>
-        />
+          <input
+            class="settings-form__input"
+            type="email"
+            name="email"
+            id="email"
+            <. if let Some(email) = email { .>
+                <. if !email.trim().is_empty() { .>
+                value="<.= email .>"
+                <. } .>
+            <. } .>
+          />
+        </label>
+        <button class="settings__submit-btn" type="submit">Update</button>
+      </form>
+
+      <form 
+        class="settings__form"
+        action="<.= crate::V1_API_ROUTES.account.update_secret .>"
+        method="post"> 
+        <label class="settings-form__label" for="secret">
+          <div class="settings__label-group">
+            Secret
+            <. include!("../../components/clipboard/index.html"); .>
+          </div>
+          <input
+            class="settings-form__input"
+            type="password"
+            name="secret-password"
+            readonly='readonly'
+            id="secret"
+            value="<.= secret .>"
+          />  
+        <. include!("../../components/showPassword/index.html"); .>
       </label>
-      <button class="sitekey-form__submit" type="submit">Update</button>
+      <button class="settings__submit-btn" type="submit">
+		Refresh
+        <img 
+          class="settings__refresh-sitekey"
+          src="<.=crate::FILES.get("./static/cache/img/svg/refresh.svg").unwrap() .>" 
+          alt="Refresh Secret"
+        />
+      </button>
 	</form>
 
-    <label class="sitekey-form__label" for="secret">
-		Cooldown Duratoin(in seconds)
-	  <input
-		class="sitekey-form__input"
-		type="password"
-		name="secret-password"
-		id="secret"
-		value="<.= secret .>"
-	  />
-      <. include!("../../components/showPassword/index.html"); .>
-      <. include!("../../components/clipboard/index.html"); .>
-	</label>
-    <a class="settings__delete-account-link" href="<.= crate::PAGES.panel.sitekey.add .>">
-        <button class="settings__delete-account-btn" type="submit">Delete Account</button>
-    </a>
+	<form 
+      class="settings__form"
+      action="<.= crate::V1_API_ROUTES.account.update_secret .>"
+      method="post">
+        <label class="settings-form__label--danger" for="delete-account">
+          <b>Delete your account</b>
+          <button id="delete-account" class="settings__submit-btn--danger" type="submit">
+            Delete Account
+            <img 
+              class="settings__delete-account-icon"
+              src="<.=crate::FILES.get("./static/cache/img/svg/trash.svg").unwrap() .>" 
+              alt="Delete Account"
+            />
+          </button>
+		</label>
+	</form>
   </div>
   </div>
   <!-- end of container -->
diff --git a/templates/panel/settings/main.scss b/templates/panel/settings/main.scss
index ccdd2e38..453835c0 100644
--- a/templates/panel/settings/main.scss
+++ b/templates/panel/settings/main.scss
@@ -14,17 +14,98 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-
 @import '../../components/clipboard/copy';
+@import '../../components/forms';
+@import '../../components/button';
 
 .settings__secret-copy {
   @include copy-icon;
 }
 
-.settings__secret-copy:hover .settings__secret-copy-done:hover {
+.settings__secret-copy:hover,
+.settings__secret-copy-done:hover {
   @include copy-icon-hover;
 }
 
 .settings__secret-copy-done {
   @include copy-done-icon;
 }
+
+.settings-form__input {
+  @include form-input;
+  width: 100%;
+}
+
+.settings-form__label {
+  @include form-label;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-form__label--danger {
+  color: $red;
+}
+
+.settings__label-group {
+  display: flex;
+  width: 15%;
+  align-items: center;
+  align-content: center;
+}
+
+.settings__secret-copy-container {
+  width: 20%;
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+
+.label-text {
+  margin: auto;
+}
+
+.settings__submit-btn {
+  align-self: end;
+  display: flex;
+  text-align: center;
+  display: inline;
+  align-content: center;
+  align-items: center;
+  vertical-align: middle;
+  margin: auto 0;
+}
+
+.settings__form {
+  display: flex;
+  width: 90%;
+  flex-direction: column;
+}
+
+.settings__delete-account-icon {
+  margin: auto;
+  @include light-text-icon-filter;
+}
+
+.settings__refresh-sitekey {
+  @include light-text-icon-filter;
+  margin: auto;
+}
+
+.settings__submit-btn {
+  @include violet-button;
+  margin-top: 20px;
+}
+
+.settings__submit-btn:hover {
+  cursor: pointer;
+}
+
+.settings__submit-btn--danger {
+  @include violet-button;
+  background-color: $red;
+  width: 200px;
+  margin-top: 20px;
+  display: flex;
+  padding: 10px;
+}
diff --git a/templates/panel/settings/mobile.scss b/templates/panel/settings/mobile.scss
new file mode 100644
index 00000000..76583ce3
--- /dev/null
+++ b/templates/panel/settings/mobile.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.settings__form {
+	margin: 10px 0;
+}