From 7c443ed8d469e06e85c8d56d084f96586f4305ff Mon Sep 17 00:00:00 2001
From: abh1sh3kk <abhishekacharya171@gmail.com>
Date: Fri, 31 Mar 2023 23:21:13 +0545
Subject: [PATCH] almost done

---
 client/src/createTemplate.tsx            | 89 ++++++++++++++++++++----
 client/src/sendMail.tsx                  | 88 ++++++++++++-----------
 client/src/styles/Navbar.css             | 11 ---
 client/src/styles/TemplateManagement.css | 20 +++++-
 client/src/styles/index.css              | 19 +++--
 client/src/styles/sendMail.css           | 12 ++--
 6 files changed, 157 insertions(+), 82 deletions(-)

diff --git a/client/src/createTemplate.tsx b/client/src/createTemplate.tsx
index 3849460..46acacc 100644
--- a/client/src/createTemplate.tsx
+++ b/client/src/createTemplate.tsx
@@ -19,19 +19,20 @@ export const TemplateManagement = () => {
 
     return (
         <main class="template-page">
-            <section class="form-container2">
+            <section class="form-container">
                 <h1>Template Management Page</h1>
 
                 <form onsubmit={submitForm}>
-                    <div class="create-template">Create Template </div>
-                    <div>
-                        <div>HTML Template:</div>
-                        <textarea
-                            value={htmlBody()}
-                            class="textarea"
-                            onInput={(e) => setHtmlBody(e.target.value)}
-                        />
-                    </div>
+                    <label>
+                        <div class="create-template">Create HTML Template </div>
+                        <div>
+                            <textarea
+                                value={htmlBody()}
+                                class="textarea"
+                                onInput={(e) => setHtmlBody(e.target.value)}
+                            />
+                        </div>
+                    </label>
 
                     <label>
                         <div>Subject:</div>
@@ -54,13 +55,73 @@ export const TemplateManagement = () => {
                     <input class="btn" type="submit" value="Submit" />
                 </form>
             </section>
-            <section class="template-list">
+            <section class="template-list-container">
                 <h2>Templates</h2>
 
-                <ul>
-                    <For each={templates()}>
+                <ul class="template-list">
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    <li>Hi, I am Abhishek</li>
+                    {/* <For each={templates()}>
                         {(template) => <li>{template}</li>}
-                    </For>
+                    </For> */}
                 </ul>
             </section>
         </main>
diff --git a/client/src/sendMail.tsx b/client/src/sendMail.tsx
index 4a017c0..a5e1000 100644
--- a/client/src/sendMail.tsx
+++ b/client/src/sendMail.tsx
@@ -74,54 +74,58 @@ export const MailManagement = () => {
 
     return (
         <main class="mail-management-page">
-            <section class="form-container">
-                <h1>Mail Management Page</h1>
+            <div class="mail-management-container flex-center flex-column">
+                <section class="form-container">
+                    <h1>Mail Management Page</h1>
 
-                <form onsubmit={sendMail} class="mail-management-form">
-                    <label>
-                        <div>Sender</div>
-                        <input type="text" />
-                    </label>
+                    <form onsubmit={sendMail} class="mail-management-form">
+                        <label>
+                            <div>Sender</div>
+                            <input type="text" />
+                        </label>
 
-                    <label>
-                        <div>Template Name:</div>
-                        <input type="text" />
-                    </label>
+                        <label>
+                            <div>Template Name:</div>
+                            <input type="text" />
+                        </label>
+
+                        <div>Recipient List (CSV Only Accepted):</div>
+                        <label class="input-file-label">
+                            {/* <div>Enter .csv file here</div> */}
+                            <input
+                                type="file"
+                                accept=".csv"
+                                onChange={onCsvSubmit}
+                                class="input-file"
+                            />
+                        </label>
+
+                        {variables().length > 0 && (
+                            <>
+                                <div>
+                                    Receiver Email Column: <br />
+                                    <select onchange={onChangeReceiverColumn}>
+                                        <For each={variables()}>
+                                            {(variable) => (
+                                                <option value={variable}>
+                                                    {variable}
+                                                </option>
+                                            )}
+                                        </For>
+                                    </select>
+                                </div>
+                            </>
+                        )}
 
-                    <div>Recipient List (CSV Only Accepted):</div>
-                    <label class="input-file-label">
-                        {/* <div>Enter .csv file here</div> */}
                         <input
-                            type="file"
-                            accept=".csv"
-                            onChange={onCsvSubmit}
-                            class="input-file"
+                            type="submit"
+                            value="Send"
+                            class="btn btn-send"
                         />
-                    </label>
-
-                    {variables().length > 0 && (
-                        <>
-                            <div>
-                                Receiver Email Column: <br />
-                                <select onchange={onChangeReceiverColumn}>
-                                    <For each={variables()}>
-                                        {(variable) => (
-                                            <option value={variable}>
-                                                {variable}
-                                            </option>
-                                        )}
-                                    </For>
-                                </select>
-                            </div>
-                        </>
-                    )}
-
-                    <input type="submit" value="Send" class="btn btn-send" />
-                </form>
-            </section>
-            <div>
+                    </form>
+                </section>
                 <section>
-                    <table border={1} class="the-table">
+                    <table class="the-table">
                         <thead>
                             <tr>
                                 <For each={variables()}>
diff --git a/client/src/styles/Navbar.css b/client/src/styles/Navbar.css
index 3d0d2b3..75f822a 100644
--- a/client/src/styles/Navbar.css
+++ b/client/src/styles/Navbar.css
@@ -5,18 +5,7 @@ nav {
     display: flex;
     justify-content: center;
     align-items: center;
-
-    /* -------testing--------- */
-    /* position: fixed;
-    top: 0;
-    left: 0;
-    right: 0; */
-    /* -------testing--------- */
 }
-main {
-	/* margin-top: 64px; */
-}
-
 .nav-list {
     display: flex;
     gap: 3rem;
diff --git a/client/src/styles/TemplateManagement.css b/client/src/styles/TemplateManagement.css
index f223062..b14dafe 100644
--- a/client/src/styles/TemplateManagement.css
+++ b/client/src/styles/TemplateManagement.css
@@ -1,9 +1,21 @@
-.template-list {
-    border: 2px solid red;
+.template-list-container {
+    border: 2px solid gray;
     margin: 1rem;
+    padding: 0.5rem;
     align-self: center;
     min-width: 350px;
 }
+
+.template-list {
+	max-height: 500px;
+	overflow: scroll;
+
+}
+
+.template-list-container > h2 {
+	margin-bottom: 0.5rem;
+}
+
 .template-page {
     display: flex;
     flex-direction: row;
@@ -11,5 +23,9 @@
     gap: 2rem;
 }
 .form-container {
+    max-width: 600px;
     flex: 1;
 }
+.template-list > li {
+    margin-block: 0.5rem;
+}
diff --git a/client/src/styles/index.css b/client/src/styles/index.css
index 79ab7e6..a58469d 100644
--- a/client/src/styles/index.css
+++ b/client/src/styles/index.css
@@ -20,15 +20,22 @@ body {
 
 
 
-
-
-
-
-
-
 /* -----------Homepage----------------- */
 
 
+/* ---------------------------- */
+
+.flex-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+/* ---------------------------- */
 
 input,
 .textarea {
diff --git a/client/src/styles/sendMail.css b/client/src/styles/sendMail.css
index 13c4edf..1d63dae 100644
--- a/client/src/styles/sendMail.css
+++ b/client/src/styles/sendMail.css
@@ -7,7 +7,7 @@ main {
 }
 .form-container {
     min-width: 400px;
-    max-width: 900px;
+    max-width: 600px;
     border-radius: 0.3rem;
     padding: 1.5rem;
 
@@ -24,22 +24,20 @@ label {
 }
 
 .input-file {
+    display: none;
     border: 1px solid #ccc;
     display: inline-block;
-    padding: 6px 12px;
+    /* padding: 6px 12px; */
 
     outline: none;
-    display: none;
 }
 .input-file-label {
-    outline: 2px solid grey;
-    height: 100px;
+    /* outline: 2px solid grey; */
+    /* height: 100px; */
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     border-radius: 0.5rem;
-    
-
 }