updated some styling on th editor page

Remote-Text · May 4, 2023 · ab96239 · ab96239
1 parent 2587693
commit ab96239
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/src/pages/editor.js b/src/pages/editor.js
@@ -86,6 +86,7 @@ async function saveToBranch(fileData, branchData) {
 			branchView.innerHTML = branchList
 			histData.refs.forEach(b => {
 				document.getElementById(b.hash).addEventListener("click", () => {saveFile(fileData, branchData, b.name)})
+				document.getElementById(b.hash).className = styles.editorButtons
 			})
 		})
 }
@@ -146,13 +147,18 @@ export default function Editor() {
 				<h2>RemoteText Editor: {fileData.name}</h2>
 				<div id="toolbar">
 					<button className={styles.editorButtons} id="SaveFile" onClick={() => saveToBranch(fileData, branchData)}>Save File</button>
-					<div id="branchList"></div>
-					<div id="createBranch" hidden={true}>
-						<label htmlFor="branchName">New branch:</label>
-						<input type="text" id="branchName" name="branchName" required minLength="1" maxLength="64" size="10"></input>
-						<button id="saveToBranch" onClick={() => saveNew(fileData, branchData, document.getElementById("branchName").value)}>Create new branch</button>
-						<p id="invalidBranchName" hidden={true}>Not a valid branch name.</p>
-						<button onClick={() => document.getElementById("createBranch").hidden = true}>Cancel</button>
+					<div class={styles.indented} id="createBranch" hidden={true}>
+						<div className={styles.branchName}>
+							<p>Click a branch name to save to that branch, or enter a new branch name</p>
+							<div id="branchList"></div>
+							<div className={styles.newBranchName}>
+								<label htmlFor="branchName">New branch name:</label>
+								<input type="text" id="branchName" name="branchName" required minLength="1" maxLength="64" size="10"></input>
+								<button className={styles.editorButtons} id="saveToBranch" onClick={() => saveNew(fileData, branchData, document.getElementById("branchName").value)}>Save to new branch</button>
+								<p id="invalidBranchName" hidden={true}>Not a valid branch name.</p>
+							</div>
+							<button onClick={() => document.getElementById("createBranch").hidden = true}>Cancel</button>
+						</div>
 					</div>
 					<button className={styles.editorButtons} id="previewButton" onClick={() => openPreview(fileData, branchData)}>Preview File</button>
 					<div id="previewResponse"></div>

diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -63,8 +63,29 @@
 
 }
 
+.indented {
+	padding-left: 20px;
+}
 
+.branchName{
+	background: Gray;
+	  border: 2px solid #ccc; /* border style */
+	margin-top: 30px;
+	margin-bottom: 30px;
+  font-family: inherit;
+  border-radius: 10px; /* border radius to make it rounded */
+  padding: 10px; 
+}
 
+.newBranchName{
+	background: DarkGray;
+	  border: 2px solid #ccc; /* border style */
+	margin-top: 30px;
+	margin-bottom: 30px;
+  font-family: inherit;
+  border-radius: 10px; /* border radius to make it rounded */
+  padding: 10px; 
+}
 .rd3t-label__title {
   fill: white !important;
   stroke: none;