From 96faadddd0be06ac80939d3114556221cde23a76 Mon Sep 17 00:00:00 2001
From: MathMan05 <mathmanrm@gmail.com>
Date: Tue, 13 Aug 2024 13:27:59 -0500
Subject: [PATCH] various CSS changes

---
 webpage/icons/settings.svg |  1 +
 webpage/index.html         |  2 +-
 webpage/style.css          | 75 +++++++++++++++++++++++---------------
 3 files changed, 47 insertions(+), 31 deletions(-)
 create mode 100644 webpage/icons/settings.svg

diff --git a/webpage/icons/settings.svg b/webpage/icons/settings.svg
new file mode 100644
index 0000000..896d8f7
--- /dev/null
+++ b/webpage/icons/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><g fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"><circle cx="90.7" cy="90" r="50.3" stroke-width="28"/><path stroke-width="22.4" d="M83.7 11.2h14v26.3h-14zm0 131.2h14v26.3h-14zm-44.8 8.3-10-9.9 18.7-18.6 9.9 9.9zM131.6 58l-9.9-10 18.6-18.6 10 10zm37.2 25.2v14h-26.3v-14zm-131.2 0v14H11.3v-14zm-8.3-44.8 9.9-10 18.6 18.7L48 57zm92.7 92.7 10-9.9 18.6 18.7-10 9.9z"/></g></svg>
\ No newline at end of file
diff --git a/webpage/index.html b/webpage/index.html
index 1e68613..e76f8d8 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -45,7 +45,7 @@
                 </div>
 
                 <div id="user-actions">
-                    <h2 id="settings">⚙</h2>
+                    <img id="settings" class="svgtheme" src="/icons/settings.svg"></img>
                 </div>
             </div>
         </div>
diff --git a/webpage/style.css b/webpage/style.css
index 6a26adf..caa5def 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -353,14 +353,14 @@ p {
 }
 
 input {
+	border-width: 0;
 	background-color: var(--message-bg-hover);
 	color: var(--primary-text);
 	height: .4in;
 	width: 97.5%;
-	border-color: var(--settings-hover);
-	border-width:0 0 .04in 0;
 	border-radius:.05in;
 	font-size: 1rem;
+	box-shadow: inset 0in 0in .04in black;
 }
 
 div {
@@ -647,7 +647,10 @@ textarea {
 	width: 3.5in;
 	resize: none;
 	height: 1.5in;
-	font-size: .75rem;
+	font-size: 1rem;
+	font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	border-radius: .05in;
+	padding: .04in;
 }
 input[type=text]:focus-visible,
 input[type=password]:focus-visible,
@@ -697,8 +700,8 @@ textarea:focus-visible,
 	justify-content: space-evenly;
 	flex-shrink: 0;
 	box-sizing: border-box;
-	box-shadow: 0 0 .1in .01in var(--black);
 	z-index: 2;
+	border-bottom: solid .03in color-mix(in srgb, var(--black) 30%, transparent);
 }
 
 .channeleffects {
@@ -772,24 +775,7 @@ textarea:focus-visible,
 	flex-shrink: 1;
 }
 
-#user-actions {
-	display: flex;
-	flex-wrap: wrap;
-}
-#user-actions h2 {
-	cursor: pointer;
-	user-select: none;
-	border-radius: .3in;
-	transition: color .5s;
-	text-align: center;
-	overflow: visible;
-	width: .28in;
-	height: .28in;
-}
-#user-actions h2:hover, #user-actions h2:focus {
-	background: var(--settings-hover);
-	color: var(--timestamp-color);
-}
+
 
 #userinfo {
 	position:relative;
@@ -852,6 +838,7 @@ input::file-selector-button {
 }
 input[type="file"] {
   background:transparent;
+  box-shadow: none;
 }
 select{
 	transition: background .1s ease-in-out;
@@ -1278,13 +1265,14 @@ span {
 }
 .settingbuttons{
 	padding-top:.075in;
-	width: 1.75in;
-	border-right: solid var(--message-bg-hover);
+	width: 2in;
+	border-right: solid .02in var(--message-bg-hover);
 	gap:.04in;
 	flex-grow: 0;
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
+	background: var(--channels-bg);
 }
 .setting{
 	background:var(--user-info-bg);
@@ -1299,6 +1287,7 @@ span {
 }
 .flexspace{
 	gap:.1in;
+	padding: .05in;
 }
 .titlediv{
 	height:100%;
@@ -1309,16 +1298,17 @@ span {
 .settingstitle{
 	font-weight:900;
 	font-size:.25in;
-	border-bottom:solid var(--message-bg-hover);
+	border-bottom: solid .03in var(--message-bg-hover);
 	background: var(--primary-bg);
-	padding: .02in .1in;
+	padding: .06in .2in;
+	background: var(--server-bg);
 }
 .exitsettings{
 	position:absolute;
 	top:.05in;
 	right:.05in;
-	background:var(--channel-hover);
-	width:.3in;
+	background: transparent;
+	width:.35in;
 	height:.3in;
 	display:flex;
 	border-radius:1in;
@@ -1326,9 +1316,13 @@ span {
 	align-items: center;
 	font-size:.2in;
 	cursor:pointer;
-	border:solid .04in black;
+	border: solid .015in var(--black);
+	transition:background .2s;
+	box-shadow: inset .0in .0in .04in var(--black);
+}
+.exitsettings:hover{
+	background:var(--profile-bg);
 }
-
 .tritoggle{
 	display:inline-block;
 	input{
@@ -1474,6 +1468,7 @@ span {
 	flex-wrap: wrap;
 	gap: 10px;
 	max-width: 700px;
+	flex-direction: column;
 }
 #connection-container div, #app-list-container div {
 	padding: 5px 10px;
@@ -1705,4 +1700,24 @@ form div{
 	box-sizing: border-box;
 	margin: 0;
 	margin-bottom: .03in;
+	border: 0;
+	padding: .075in;
+	border-radius: .075in;
+	border: solid .03in black;
+	height: .4in;
+}
+#user-actions {
+	display: flex;
+	flex-wrap: wrap;
+	width:fit-content;
+	margin-right:.01in;
+	border-radius:.3in;
+	cursor:pointer;
+}
+#user-actions:hover, #user-actions:focus {
+	background: var(--settings-hover);
+}
+#settings{
+	width:.225in;
+	margin:.05in;
 }
\ No newline at end of file