@aquera/nile-elements 0.1.11 → 0.1.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/extensionSetup.ts

@@ -21,8 +21,6 @@ import {
 import {
   foldGutter,
   indentOnInput,
-  syntaxHighlighting,
-  defaultHighlightStyle,
   bracketMatching,
   indentUnit,
   foldKeymap,
@@ -83,10 +81,6 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   isValidSetup(options.dropCursor) && extensions.push(dropCursor());
   isValidSetup(options.allowMultipleSelections) && extensions.push(EditorState.allowMultipleSelections.of(true));
   isValidSetup(options.indentOnInput) && extensions.push(indentOnInput());
-  isValidSetup(options.syntaxHighlighting) &&
-    extensions.push(
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true })
-    );
   isValidSetup(options.bracketMatching) && extensions.push(bracketMatching());
   isValidSetup(options.closeBrackets) && extensions.push(closeBrackets());
   isValidSetup(options.autocompletion) && extensions.push(autocompletion());

package/src/nile-code-editor/nile-code-editor.ts

@@ -22,6 +22,11 @@ import {
   Extension
 } from '@codemirror/state';
 
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+} from '@codemirror/language';
+
 import { lineNumbers } from '@codemirror/view';
 import {
   javascript,
@@ -34,7 +39,7 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme } from './theme';
+import { Theme, CustomTheme } from './theme';
 
 // Choose the appropriate mode for your use case
 
@@ -73,6 +78,10 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;
 
+  @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
+
+  @property({ type: Boolean, reflect: true , attribute: false }) useCustomTextFormatting: boolean = false;
+
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
   @property({ type: Boolean, reflect: true , attribute: true }) hasScroller: boolean = true;
@@ -95,6 +104,7 @@ export class NileCodeEditor extends NileElement {
   private readOnlyComp = new Compartment();
   private customCompletionComp = new Compartment();
   private placeholderComp = new Compartment();
+  private defaultSyntaxHighlightingComp = new Compartment();
 
   /**
    * The styles for CodeEditor
@@ -169,6 +179,13 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if(changedProperties.has('disableSyntaxHighlighting')){
+      this.view.dispatch({ 
+        effects: [
+          this.defaultSyntaxHighlightingComp.reconfigure(this.getDefaultSyntaxHighlightingExtension())
+        ]
+      })
+    }
   }
 
   public render(): TemplateResult {
@@ -222,6 +239,7 @@ export class NileCodeEditor extends NileElement {
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
     const placeholderExtension = this.placeholderComp.of(this.getPlaceholderExtension())
+    const defaultSyntaxHighlightingExtension = this.defaultSyntaxHighlightingComp.of(this.getDefaultSyntaxHighlightingExtension());
     const language = this.getLanguageExtension()
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
       autocomplete: this.customAutocomplete
@@ -239,9 +257,10 @@ export class NileCodeEditor extends NileElement {
         restrictSingleLineExtension,
         customAutoCompletions,
         placeholderExtension,
+        defaultSyntaxHighlightingExtension,
         autocompletion(),
         language,
-        EditorView.theme(Theme),
+        EditorView.theme(this.useCustomTextFormatting?CustomTheme:Theme),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -414,6 +433,10 @@ export class NileCodeEditor extends NileElement {
   getPlaceholderExtension(){
     return this.placeholder ? placeholder(this.placeholder) : [];
   }
+  
+  getDefaultSyntaxHighlightingExtension(){
+    return !this.disableSyntaxHighlighting ? syntaxHighlighting(defaultHighlightStyle, { fallback: true }):[]
+  }
 
   restrictSingleLine() {
     return EditorState.transactionFilter.of(tr =>

package/src/nile-code-editor/theme.ts

@@ -8,4 +8,19 @@ export const Theme = {
   ".cm-scroller": {
     scrollbarWidth:'thin',
   },
+};
+
+export const CustomTheme = {
+  '&': {
+    fontSize: 'inherit',
+    fontStyle: 'inherit',
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight:'inherit',
+    letterSpacing:'inherit'
+  },
+  '.cm-content': {},
+  ".cm-scroller": {
+    scrollbarWidth:'thin',
+  },
 };

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -12,23 +12,28 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-  }
-
-  .nile-form-help-text {
-    display: flex;
-    align-items: center;
+    width:100%;
     color: var(--nile-form-help-text-color);
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-form-help-text-font-size);
     font-style: normal;
-    font-weight: 400;
     line-height: var(--nile-form-help-text-line-height);
+  }
+
+  .nile-form-help-text {
+    display:flex;
+    font-weight: 400;
     letter-spacing: 0.2px;
     margin-top: 6px;
     margin-right: 4px;
     width: auto;
   }
 
+
+  .nile-form-help-text--expanded{
+    display:block;
+  }
+
   .nile-form-help-text__more-button {
     display: inline-flex;
     gap: 4px;
@@ -37,6 +42,17 @@ export const styles = css`
     white-space: nowrap;
     align-items: center;
   }
+
+  .help__text__full{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display:inline;
+  }
+  
+  .help__text__full--expanded{
+    white-space: wrap;
+  }
 `;
 
 export default [styles];

package/src/nile-form-help-text/nile-form-help-text.test.ts

@@ -1,86 +1,110 @@
-import { fixture, expect, html } from '@open-wc/testing';
+import { fixture, expect, html, elementUpdated } from '@open-wc/testing';
 import './nile-form-help-text';
 import { NileFormHelpText } from './nile-form-help-text';
 
 const wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))
 
+
 describe('NileFormHelpText', () => {
   it('should render with default properties', async () => {
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text>This is a very short text</nile-form-help-text>`);
-    
-    // Check if the displayed text is empty initially (no content in slot)
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal('This is a very short text');
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);
+    expect(el).to.be.instanceOf(NileFormHelpText);
+    expect(el.isExpanded).to.be.false;
+
+    // Check if text content matches
+    const textContent = el?.textContent?.trim();
+    expect(textContent).to.equal('This is a short text');
   });
 
-  it('should truncate the text if it exceeds textLimit and show "View More" button', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Check if the displayed text is truncated
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent?.endsWith('...')).to.be.true;
+  it('should not show "View More" button if the text fits within the container', async () => {
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);
+    await elementUpdated(el);
+
+    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
+    expect(moreButton).to.be.null;
+    expect(el.showButton).to.be.false;
+  });
+
+  it('should show "View More" button if the text overflows the container', async () => {
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
     
-    // Check if the "View More" button is visible
-    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
     expect(moreButton).to.exist;
-    expect(moreButton?.textContent).to.include('View More');
+    expect(el.showButton).to.be.true;
   });
 
   it('should expand to show full text when "View More" is clicked', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Simulate clicking the "View More" button
-    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
+
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    // Click "View More"
+    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');
     moreButton?.click();
-    await el.updateComplete;
+    await elementUpdated(el);
 
-    // Verify that the full text is displayed
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal(longText);
-    
-    // Check if the "View Less" button is now visible
-    const lessButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(lessButton).to.exist;
-    expect(lessButton?.textContent).to.include('View Less');
+    expect(el.isExpanded).to.be.true;
+    expect(textContainer).to.have.class('help__text__full--expanded');
+    expect(moreButton?.textContent).to.include('View Less');
   });
 
   it('should collapse back to truncated text when "View Less" is clicked', async () => {
-    const longText = "This is a very long help text that should be truncated and should show a 'View More' button.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${longText}</span></nile-form-help-text>`);
-    
-    // Expand the text
-    const moreButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
+    const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
+    const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);
+
+    // Simulate overflow
+    const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+    Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+    Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+    el.decideToToggleShowButton();
+    await elementUpdated(el);
+
+    // Expand and then collapse
+    const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');
     moreButton?.click();
-    await el.updateComplete;
+    await elementUpdated(el);
 
-    // Collapse the text by clicking "View Less"
-    const lessButton = el.shadowRoot!.querySelector<HTMLElement>('.nile-form-help-text__more-button');
-    lessButton?.click();
-    await el.updateComplete;
+    moreButton?.click(); // Collapse
+    await elementUpdated(el);
 
-    // Verify that the text is truncated again
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent?.endsWith('...')).to.be.true;
-    
-    // Check if the "View More" button is visible again
-    const viewMoreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(viewMoreButton).to.exist;
-    expect(viewMoreButton?.textContent).to.include('View More');
+    expect(el.isExpanded).to.be.false;
+    expect(textContainer).not.to.have.class('help__text__full--expanded');
+    expect(moreButton?.textContent).to.include('View More');
   });
 
-  it('should not show "View More" button when text is within limit', async () => {
-    const shortText = "Short help text.";
-    const el: NileFormHelpText = await fixture(html`<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);
-    
-    // Check if the displayed text is not truncated
-    const textContent = el.shadowRoot!.querySelector('div>span:first-child')?.textContent?.trim()
-    expect(textContent).to.equal(shortText);
+  // it('should dynamically adjust "View More" visibility on text change', async () => {
+  //   const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);
+  //   await elementUpdated(el);
 
-    // Verify that "View More" button is not rendered
-    const moreButton = el.shadowRoot!.querySelector('.nile-form-help-text__more-button');
-    expect(moreButton).to.be.null;
-  });
+  //   const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
+  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
+  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+  //   el.decideToToggleShowButton();
+  //   await elementUpdated(el);
+
+  //   expect(el.showButton).to.be.true;
+
+  //   // Change slot content to short text
+  //   textContainer.textContent = 'Short text';
+  //   Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });
+  //   Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
+  //   el.decideToToggleShowButton();
+  //   await elementUpdated(el);
 
+  //   expect(el.showButton).to.be.false;
+  // });
 });

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
-import { customElement, query, property } from 'lit/decorators.js';
+import {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';
+import { customElement, query, property, state } from 'lit/decorators.js';
 import {styles} from './nile-form-help-text.css';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * Nile icon component.
@@ -27,78 +28,86 @@ export class NileFormHelpText extends LitElement {
 
   @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;
 
-  @property({ type: String, reflect: true  }) fullText: string = '';
+  @state() showButton: boolean = false;
 
-  @property({ type: Number, reflect: true  }) textLimit: number = 47;
+  @query('.help__text__full') textContainer:HTMLSpanElement;
 
-  @property({ type: String, reflect: true  }) displayedText: string = '';
+  private resizeObserver:ResizeObserver;
 
-  @query('slot') slotElement!: HTMLSlotElement;
-
-  connectedCallback() {
-    super.connectedCallback();
-    requestAnimationFrame(() => {
-      this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
-    });
-  }
+  /* #endregion */
 
-  firstUpdated() {
-    this.handleSlotChange();
-  }
+  /* #region Methods */
 
-  handleSlotChange() {
-    const nodes = this.slotElement.assignedNodes({flatten: true});
-    const textContent = nodes.map(node => node.textContent).join('');
-    this.fullText = textContent.trim();
-    this.updateDisplayedText()
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.resizeObserver=this.observeWidthChange(this.textContainer);
   }
 
-  toggleExpanded() {
-    this.isExpanded = !this.isExpanded;
-    this.updateDisplayedText()
+  disconnectedCallback(): void {
+    this.resizeObserver.disconnect();
   }
 
-  updateDisplayedText() {
-    if (this.isExpanded) {
-      this.displayedText = this.fullText;
-    } else {
-      const validConcatNumber=concatSentence(this.fullText, this.textLimit)
-      const truncatedText = this.fullText.slice(0, validConcatNumber);
-      const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';
-      this.displayedText = `${truncatedText}${ellipsis}`;
-    }
-  }
-
-  /* #endregion */
-
-  /* #region Methods */
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const showMoreButton = this.fullText.length > this.textLimit;
     const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
 
     return html`
-    <div class="nile-form-help-text" part="container">
-      <slot hidden>${this.fullText}</slot>
-      <div part="text">
-        <span>${this.displayedText}</span>
-        ${showMoreButton ? html`
-          <span
-            class="nile-form-help-text__more-button"
-            part="toggle-button"
-            @click=${this.toggleExpanded}
-            >${this.isExpanded ? 'View Less' : 'View More'}
-            <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
-  </span>
-        ` : ''}
-  </div>
+    <div 
+      class="${classMap({
+        'nile-form-help-text':true,
+        "nile-form-help-text--expanded":this.isExpanded
+        })}" 
+      part="container"
+    >
+      <span
+        class="${classMap({
+          "help__text__full":true,
+          "help__text__full--expanded":this.isExpanded
+          })}"
+        >
+        <slot @slotchange="${this.decideToToggleShowButton}"></slot>
+      </span>
+      ${this.showButton?html`
+        <span
+          class="nile-form-help-text__more-button"
+          part="toggle-button"
+          @click=${this.toggleExpanded}
+        >${this.isExpanded ? 'View Less' : 'View More'}
+          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+        </span>
+      `:nothing}
     </div>
   `;
   }
+
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
+  }
+  
+  decideToToggleShowButton(){
+    if(!this.textContainer) return;
+    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth
+  }
+
+  /**
+   * Logs whenever the width of an element changes.
+   * @param {HTMLElement} element - The element to observe for width changes.
+   */
+  observeWidthChange(element:HTMLElement) {
+
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth) this.decideToToggleShowButton();
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return resizeObserver; // Return observer to allow disconnection if needed
+  }
 }
 
 export default NileFormHelpText;
@@ -107,31 +116,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-form-help-text': NileFormHelpText;
   }
-}
-
-function concatSentence(sentence:string, n:number) {
-  if (n < 0 || n > sentence.length) {
-    return n;
-  }
-
-  // Adjust n if it falls in the middle of a word
-  if (sentence[n] !== " " && n !== 0 && n !== sentence.length) {
-    // Move left until the start of the word or the beginning of the sentence
-    let left = n;
-    while (left > 0 && sentence[left - 1] !== " ") {
-      left--;
-    }
-
-    // Move right until the end of the word or the end of the sentence
-    let right = n;
-    while (right < sentence.length && sentence[right] !== " ") {
-      right++;
-    }
-
-    // Adjust n to the closer boundary
-    n = (n - left <= right - n) ? left : right;
-  }
-
-  // Return the substring from the start to the adjusted n
-  return n;
-}
+}

package/src/nile-tour/nile-tour.css.ts

@@ -15,20 +15,20 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #fff);
+    background-color: var(--nile-tour-background-color, #1978B8);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
     border-radius: 4px;
-    border: 1px solid var(--Neutral-30, #c7ced4);
-    background: var(--White-Normal, #fff);
+    border: 1px solid var(--Neutral-30, #1978B8);
+    background: var(--White-Normal, #1978B8);
 
     /* Elevation/Lifted */
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .introjs-tooltip-title {
-    color: #000;
+    color: #ffffff;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -43,7 +43,7 @@ export const styles = css`
   }
 
   .introjs-tooltiptext {
-    color: #7f7f7f;
+    color: #ffffff;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -55,7 +55,7 @@ export const styles = css`
   .introjs-arrow {
     width: 15px;
     height: 20px;
-    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20" fill="none"%3E%3Cpath d="M1.43333 11.2C0.633333 10.6 0.633333 9.4 1.43333 8.8L12.1 0.800001C13.0889 0.0583585 14.5 0.763931 14.5 2L14.5 18C14.5 19.2361 13.0889 19.9416 12.1 19.2L1.43333 11.2Z" fill="white" stroke="%23C7CED4"/%3E%3C/svg%3E');
+    background-image: url('data:image/svg+xml,%3Csvg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z" fill="%231978B8"/%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -118,13 +118,14 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
     align-items: center;
     gap: 12px;
     border-radius: 4px;
+    font-weight: 500;
   }
 
   .introjs-button:hover {
@@ -135,7 +136,7 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -152,7 +153,7 @@ export const styles = css`
     cursor: pointer;
     text-shadow: none;
     box-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -199,9 +200,9 @@ export const styles = css`
     padding: 0 10px;
     display: flex;
     align-items: center;
-    color: var(--Color-Text-Info, #1978B8);
+    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 14px;
     letter-spacing: 0.2px;
   }