chore(Everywhere): Various UI Tweaks, adds secondary-darker var (#1480)

Co-authored-by: Sara Tavares <29093946+stavares843@users.noreply.github.com> Co-authored-by: sdwoodbury <stuartwoodbury@protonmail.ch>
Satellite-im · Nov 9, 2023 · e0e7eea · e0e7eea
1 parent a44720d
commit e0e7eea
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 66 deletions.
diff --git a/common/locales/en-US/main.ftl b/common/locales/en-US/main.ftl
@@ -136,7 +136,8 @@ friends = Friends
     .copied-did = Copied ID to clipboard!
     .unblock = Unblock
     .request-exist = Friend request is already pending!
-    .add-name = ➕  Add { $name }
+    .add-name = Add { $name }
+    .already-friends = Already Friends
     .nothing-to-see-here = Nothing to see here
     .share = Share DID
     .select-chat = Select Chat

diff --git a/kit/src/components/context_menu/style.scss b/kit/src/components/context_menu/style.scss
@@ -1,7 +1,7 @@
 .context-menu {
 	position: fixed;
 	border-radius: var(--border-radius-more);
-	background-color: var(--secondary-dark);
+	background-color: var(--secondary-darker);
 	backdrop-filter: blur(20px);
 	-webkit-backdrop-filter: blur(20px);
 	z-index: 1000;

diff --git a/kit/src/components/embeds/file_embed/style.scss b/kit/src/components/embeds/file_embed/style.scss
@@ -30,7 +30,12 @@
     max-width: 350px;
     height: 100%;
     max-height: 350px;
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-inner);
+    transition: border-radius var(--animation-time);
+
+    &:hover {
+      border-radius: var(--border-radius);
+    }
     &.big {
       max-height: 700px;
       max-width: 700px;

diff --git a/kit/src/components/embeds/identity_embed/mod.rs b/kit/src/components/embeds/identity_embed/mod.rs
diff --git a/kit/src/components/message/mod.rs b/kit/src/components/message/mod.rs
@@ -664,7 +664,7 @@ pub fn IdentityMessage(cx: Scope<IdentityMessageProps>) -> Element {
                     .friend_identities()
                     .iter()
                     .any(|req| req.did_key().eq(&identity.did_key()));
-            return cx.render(rsx!(div {
+            return cx.render(rsx!(div { // TODO: This needs to be moved to kit/src/components/embeds/identity_embed/mod.rs.
                 class: "embed-identity",
                 IdentityHeader {
                     sender_did: identity.did_key(),
@@ -702,7 +702,16 @@ pub fn IdentityMessage(cx: Scope<IdentityMessageProps>) -> Element {
                     onpress: move |_| {
                         ch.send(IdentityCmd::SentFriendRequest(identity.did_key().to_string(), state.read().outgoing_fr_identities()));
                     },
-                    text: get_local_text_with_args("friends.add-name", vec![("name", identity.username())]),
+                    icon: if disabled {
+                        Icon::Check
+                    } else {
+                        Icon::Plus
+                    },
+                    text: if disabled {
+                        get_local_text("friends.already-friends")
+                    } else {
+                        get_local_text_with_args("friends.add-name", vec![("name", identity.username())])
+                    },
                     appearance: crate::elements::Appearance::Primary
                 }
             }));

diff --git a/kit/src/components/message/style.scss b/kit/src/components/message/style.scss
@@ -5,7 +5,7 @@
 	min-height: var(--height-input);
 	display: inline-flex;
 	align-items: center;
-	padding: var(--padding-less) var(--padding);
+	padding: var(--padding-less);
 	width: fit-content;
 	align-self: flex-end;
 	overflow: hidden;
@@ -57,7 +57,7 @@
 .message.remote {
 	align-self: flex-start;
 	align-items: flex-start;
-	background: var(--secondary-dark);
+	background: var(--secondary-darker);
 	border-radius: var(--border-radius-more);
 	border-bottom-left-radius: var(--border-radius);
 }
@@ -120,33 +120,12 @@
 .embed-identity {
 	display: flex;
 	flex-direction: column;
-	.profile-container {
-		max-width: 300px;
-	}
-	.empty-profile {
-		margin-left: 0;
-	}
-	.unknown-user {
-		.text {
-			font-size: var(--text-size-more);
-		  }
-	}
-	.unknown-user-did {
-		.text {
-			font-size: var(--text-size-less);
-		  }
-	}
+
 	.btn-wrap {
-		padding-top: var(--padding-less);
+		padding-top: var(--gap);
+		width: 100%;
 		.btn {
-			max-width: calc(var(--height-input) * 2 + 300px);
 			width: 100%;
-			.btn-text {
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-				color: var(--text-color-dark);
-			}
 		}
 	}
 }
diff --git a/kit/src/components/message_reply/style.scss b/kit/src/components/message_reply/style.scss
@@ -10,6 +10,7 @@
 	align-items: flex-end;
 	position: relative;
 	flex-direction: column;
+	opacity: var(--opacity-modifier);
 	.user-image {
 		transform: scale(0.75);
 		opacity: var(--opacity-modifier);
@@ -25,7 +26,7 @@
     	flex-direction: column;
 		color: var(--text-color);
 		background-color: var(--primary);
-		padding: var(--gap-less) var(--gap);
+		padding: var(--padding-less) var(--padding);
 		font-size: var(--text-size-less);
 		border-radius: var(--border-radius-more);
 		border-bottom-right-radius: var(--border-radius-less);

diff --git a/kit/src/layout/chatbar/style.scss b/kit/src/layout/chatbar/style.scss
@@ -5,7 +5,7 @@
 .chatbar {
 	width: 100%;
 	border-top: 1px solid transparent;
-	padding: var(--padding);
+	padding: var(--padding) var(--gap);
 	position: relative;
 	.input-group {
 		flex: 1;
@@ -33,9 +33,6 @@
 	border: 1px solid var(--border-subtle-color);
 	background: var(--secondary-dark);
 
-	label {
-		color: var(--text-color-dark);
-	}
 	.content {
 		display: inline-flex;
 		padding: 0;

diff --git a/kit/src/layout/sidebar/style.scss b/kit/src/layout/sidebar/style.scss
@@ -12,6 +12,9 @@
     padding: var(--gap);
     border-bottom: 1px solid transparent;
 		flex-direction: row;
+    .input {
+      padding: 0 var(--gap);
+    }
   }
   .children {
     flex: 1;

diff --git a/kit/src/style.scss b/kit/src/style.scss
@@ -247,6 +247,7 @@ pre code {
   --secondary: #343a40;
   --secondary-light: #4c555d;
   --secondary-dark: #212529;
+  --secondary-darker: #16191c;
   --background: #000000;
   --background-light: var(--secondary-light);
   --background-dark: #161a21;

diff --git a/ui/src/layouts/chats/presentation/quick_profile/mod.rs b/ui/src/layouts/chats/presentation/quick_profile/mod.rs
@@ -5,7 +5,7 @@ use futures::{channel::oneshot, StreamExt};
 
 use kit::{
     components::context_menu::{ContextItem, ContextMenu, IdentityHeader},
-    elements::{input::Input, range::Range},
+    elements::{input::Input, label::Label, range::Range},
 };
 
 use common::{
@@ -368,6 +368,30 @@ pub fn QuickProfileContext<'a>(cx: Scope<'a, QuickProfileProps<'a>>) -> Element<
                     })
                 } else {
                     rsx!(
+                    if state.read().configuration.developer.experimental_features && in_vc {
+                        rsx!(
+                            div {
+                                class: "range-container",
+                                Label {
+                                    text: get_local_text("quickprofile.volume")
+                                },
+                                Range {
+                                    aria_label: "range-quick-profile-speaker".into(),
+                                    initial_value: volume,
+                                    min: USER_VOL_MIN,
+                                    max: USER_VOL_MAX,
+                                    step: 0.1,
+                                    no_num: true,
+                                    icon_left: Icon::Speaker,
+                                    icon_right: Icon::SpeakerWave,
+                                    onchange: move |val| {
+                                        ch.send(QuickProfileCmd::AdjustVolume(did_cloned.clone(), val));
+                                    }
+                                }
+                            },
+                            hr{}
+                        )
+                    }
                         /*ContextItem {
                         icon: Icon::UserCircle,
                         text: get_local_text("quickprofile.profile"),
@@ -407,29 +431,6 @@ pub fn QuickProfileContext<'a>(cx: Scope<'a, QuickProfileProps<'a>>) -> Element<
                             }
                         )
                     }
-                    if state.read().configuration.developer.experimental_features && in_vc {
-                        rsx!(
-                            p {
-                                class: "text",
-                                aria_label: "user-volume-label",
-                                get_local_text("quickprofile.volume")
-                            },
-                            Range {
-                                aria_label: "range-quick-profile-speaker".into(),
-                                initial_value: volume,
-                                min: USER_VOL_MIN,
-                                max: USER_VOL_MAX,
-                                step: 0.1,
-                                no_num: true,
-                                icon_left: Icon::Speaker,
-                                icon_right: Icon::SpeakerWave,
-                                onchange: move |val| {
-                                    ch.send(QuickProfileCmd::AdjustVolume(did_cloned.clone(), val));
-                                }
-                            }
-                        )
-                    }
-                    hr{},
                     if is_friend {
                         rsx!(ContextItem {
                             icon: Icon::UserMinus,

diff --git a/ui/src/layouts/chats/style.scss b/ui/src/layouts/chats/style.scss
@@ -626,11 +626,27 @@
 }
 
 .profile-context-items {
-  margin: var(--padding-less);
   display: inline-flex;
   gap: var(--gap);
   flex-direction: column;
 
+  .input {
+    border-radius: var(--border-radius-more);
+  }
+
+  .range-container {
+    padding: var(--padding-less);
+
+    .range {
+      margin-top: var(--gap);  
+      .range-value {
+          display: inline-flex;
+          background-color: var(--secondary-light);
+      }
+    }
+  }
+
+
   .context-item {
     width: 100%;
   }
@@ -673,12 +689,12 @@
 }
 
 .scroll-bottom-btn {
-  color: var(--text-color);
-  background-color: var(--secondary);
-  border-radius: var(--border-radius);
+  color: var(--text-color-dark);
+  background-color: var(--primary);
+  border-radius: var(--border-radius-more);
   width: calc(100% - (var(--gap) * 2));
   padding: var(--gap-less);
-  height: fit-content;
+  height: var(--height-input);
   position: absolute;
   bottom: calc(100% + var(--gap-less));
   left: 0;
@@ -690,7 +706,7 @@
 
   &:hover {
     cursor: pointer;
-    background-color: var(--secondary-light);
+    background-color: var(--primary-light);
   }
 }