Merge pull request #1295 from lukso-network/docs/connect-to-up

docs: guide update for the Connect to UP page

Author: mustafademiray

docs/learn/universal-profile/connect-profile/connect-up.md

@@ -224,6 +224,28 @@ table.lsp-features td {
   margin-right: 1em;
 }
 
+
+.tab_viem[aria-selected='true'] {
+  border-bottom-color: #2434a1;
+}
+
+.tab_viem {
+  color: #2434a1;
+}
+
+.tab_viem:before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: url('/static/img/learn/viem-logo.png') no-repeat center;
+  background-size: contain;
+  vertical-align: middle;
+  margin-right: 0.5em;
+  position: relative;
+  z-index: 100000;
+}
+
 .tab_web3[aria-selected='true'] {
   border-bottom-color: #f06922;
 }
@@ -322,3 +344,29 @@ footer {
 .navbar-item-bold {
   font-weight: bold;
 }
+
+/* Provider tabs styling */
+.provider-tabs .tabs__item {
+  font-size: 1.05rem;
+  padding: 0.8rem 1.2rem;
+  border-radius: 8px 8px 0 0;
+  transition: background-color 0.2s ease;
+}
+
+.provider-tabs .tabs__item:hover {
+  background-color: rgba(105, 114, 225, 0.05);
+}
+
+.provider-tabs .tabs__item--active {
+  background-color: rgba(105, 114, 225, 0.1);
+  border-bottom: 2px solid var(--ifm-color-primary);
+  font-weight: bold;
+}
+
+html[data-theme='dark'] .provider-tabs .tabs__item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme='dark'] .provider-tabs .tabs__item--active {
+  background-color: rgba(255, 255, 255, 0.1);
+}

src/css/custom.css

@@ -30,6 +30,8 @@ Universal Profile makes interacting with the blockchain safe and straightforward
 
 ## UP Browser Extension
 
+Use your Universal Profile to interact with dApps through your web browser on laptops and desktops.
+
 <div className="row" style={{ display: 'flex', justifyContent: 'center', marginBottom: '2em', gap: '2em' }}>
   <div style={{ textAlign: 'center', flex: '0 0 300px' }}>
     <img src="/img/extension/up-extension-showcase-1.png" alt="Overview of the UP Browser Extension" style={{ maxWidth: '300px', width: '100%' }} />