test using exec property

* fix lightmode selction color

* fix styles on remote conn view

.github/workflows/build-helper.yml

@@ -27,7 +27,7 @@ jobs:
               if: matrix.platform == 'linux'
               run: |
                   sudo apt-get update
-                  sudo apt-get install rpm
+                  sudo apt-get install --no-install-recommends -y libarchive-tools libopenjp2-tools rpm snapcraft snapd
             - uses: actions/setup-go@v5
               with:
                   go-version: ${{env.GO_VERSION}}

BUILD.md

@@ -53,12 +53,6 @@ Install modules (we use yarn):
 yarn
 ```
 
-Electron also requires specific builds of node_modules to work (because Electron embeds a specific node.js version that might not match your development node.js version). We use a special electron command to cross-compile those modules:
-
-```
-scripthaus run electron-rebuild
-```
-
 ## Running WebPack
 
 We use webpack to build both the React and Electron App Wrapper code. They are both run together using:

README.md

@@ -9,7 +9,7 @@
 
 # Wave Terminal
 
-An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.
+Wave is an open-source AI-native terminal built for seamless workflows.
 
 Wave isn't just another terminal emulator; it's a rethink on how terminals are built. Wave combines command line with the power of the open web to help veteran CLI users and new developers alike.
 
@@ -17,13 +17,14 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 -   Persistent sessions that can restore state across network disconnections and reboots
 -   Searchable contextual command history across all remote sessions (saved locally)
 -   Workspaces, tabs, and command blocks to keep you organized
+-   CodeEdit, to edit local and remote files with a VSCode-like inline editor
 -   AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
-![WaveTerm Screenshot](./assets/wave-screenshot.jpeg)
+![WaveTerm Screenshot](./assets/wave-screenshot.png)
 
 ## Installation
 
-Wave Terminal works with MacOS and Linux (preliminary).
+Wave Terminal works with MacOS and Linux.
 
 Install Wave Terminal from: [www.waveterm.dev/download](https://www.waveterm.dev/download)
 
@@ -49,7 +50,7 @@ brew install --cask wave
 
 ## Contributing
 
-Wave uses Github Project for tracking issues.
+Wave uses Github Issues for issue tracking.
 
 Find more information in our [Contributions Guide](CONTRIBUTING.md), which includes:
 

acknowledgements/README.md

@@ -11,9 +11,9 @@ The license disclaimers for the backend are generated using the [go-licenses](ht
 
 The license disclaimers for the frontend are generated using the [`yarn licenses` tool](https://classic.yarnpkg.com/lang/en/docs/cli/licenses/). This outputs to the file [`frontend.md`](./disclaimers/frontend.md).
 
-These three disclaimer files linked above will be periodically regenerated to reflect new dependencies.
+These disclaimer files linked above will be periodically regenerated to reflect new dependencies.
 
-The [`scripthaus.md` file](../scripthaus.md) contains scripts to genrate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
+The [`scripthaus.md` file](../scripthaus.md) contains scripts to generate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
 
 ```bash
 scripthaus run generate-license-disclaimers

assets/default-keybindings.json

@@ -39,6 +39,14 @@
       "command": "app:openTabSearchModal",
       "keys": ["Cmd:p"]
     },
+    {
+      "command": "app:openConnectionsView", 
+      "keys": []
+    },
+    {
+      "command": "app:openSettingsView", 
+      "keys": []
+    },
     {
       "command": "app:newTab",
       "keys": ["Cmd:t"]

buildres/download-staged-artifact.sh

@@ -13,4 +13,4 @@ fi
 DOWNLOAD_DIR=$VERSION-staged
 rm -rf $DOWNLOAD_DIR
 mkdir -p $DOWNLOAD_DIR
-aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive
+aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ $DOWNLOAD_DIR/ --recursive --profile $AWS_PROFILE

buildres/publish-from-staging.sh

@@ -9,4 +9,13 @@ if [ -z "$VERSION" ]; then
     exit
 fi
 
-aws s3 cp s3://waveterm-github-artifacts/staging/$VERSION/ s3://dl.waveterm.dev/releases/ --recursive
+ORIGIN="waveterm-github-artifacts/staging/$VERSION/"
+DESTINATION="dl.waveterm.dev/releases/"
+
+OUTPUT=$(aws s3 cp s3://$ORIGIN s3://$DESTINATION --recursive --profile $AWS_PROFILE)
+
+for line in $OUTPUT; do
+    PREFIX=${line%%${DESTINATION}*}
+    SUFFIX=${line:${#PREFIX}}
+    echo "https://$SUFFIX"
+done

electron-builder.config.js

@@ -56,6 +56,7 @@ const config = {
                 arch: "universal",
             },
         ],
+        appId: "dev.commandline.waveterm",
         icon: "public/waveterm.icns",
         category: "public.app-category.developer-tools",
         minimumSystemVersion: "10.15.0",
@@ -70,10 +71,11 @@ const config = {
             .map((f) => path.resolve(f.path, f.name)),
     },
     linux: {
+        appId: "dev.commandline.waveterm",
         executableName: pkg.productName,
         category: "TerminalEmulator",
         icon: "public/waveterm.icns",
-        target: ["zip", "deb", "rpm", "AppImage"],
+        target: ["zip", "deb", "rpm", "AppImage", "pacman", "snap"],
         synopsis: pkg.description,
         description: null,
         desktop: {
@@ -86,6 +88,23 @@ const config = {
     appImage: {
         license: "LICENSE",
     },
+    snap: {
+        base: "core20",
+        grade: "stable",
+        confinement: "classic",
+        summary: pkg.productName,
+        title: pkg.productName,
+        description: null,
+        synopsis: pkg.description,
+        allowNativeWayland: true,
+        desktop: {
+            Name: pkg.productName,
+            Comment: pkg.description,
+            Keywords: "developer;terminal;emulator;",
+            category: "Development;Utility;",
+            exec: pkg.productName,
+        },
+    },
     publish: {
         provider: "generic",
         url: "https://dl.waveterm.dev/releases",

package.json

@@ -5,8 +5,8 @@
         "email": "info@commandline.dev"
     },
     "productName": "Wave",
-    "description": "An open-source, cross-platform, AI-integrated, modern terminal for seamless workflows.",
-    "version": "0.6.1",
+    "description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
+    "version": "0.7.0",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "repository": {
@@ -101,4 +101,4 @@
     "scripts": {
         "postinstall": "electron-builder install-app-deps"
     }
-}
+}

public/themes/default.css

@@ -1,6 +1,7 @@
 /* Copyright 2024, Command Line Inc.
    SPDX-License-Identifier: Apache-2.0 */
 
+@import url("./term-default.css");
 @import url("./term-dark.css");
 
 :root {
@@ -47,9 +48,9 @@
     --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --app-accent-bg-color: rgba(88, 193, 66, 0.2);
-    --app-error-color: rgb(204, 0, 0);
-    --app-warning-color: rgb(255, 165, 0);
-    --app-success-color: rgb(38, 97, 26);
+    --app-error-color: rgb(229, 77, 46);
+    --app-warning-color: rgb(224, 185, 86);
+    --app-success-color: rgb(78, 154, 6);
     --app-text-color: rgb(211, 215, 207);
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
@@ -59,6 +60,7 @@
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
     --app-icon-hover-color: #fff;
+    --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* icon colors */
 
@@ -70,9 +72,9 @@
 
     /* scrollbar colors */
     /* --scrollbar-background-color: rgba(21, 23, 21, 1); */
-    --scrollbar-background-color: #030303;
-    --scrollbar-thumb-color: #333;
-    --scrollbar-thumb-hover-color: rgb(211, 215, 207);
+    --scrollbar-background-color: var(--app-bg-color);
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
 
     /* code color */
     --pre-bg-color: rgb(0, 0, 0);
@@ -91,44 +93,20 @@
 
     --form-element-border-color: rgba(241, 246, 243, 0.15);
     --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: #ffffff;
-    --form-element-label-color: rgb(195, 200, 194);
-    --form-element-primary-color: rgb(78, 154, 6);
-    --form-element-secondary-color: rgba(255, 255, 255, 0.09);
-    --form-element-error-color: rgb(204, 0, 0);
-    --form-element-icon-color: #fff;
-
-    /* button colors */
-    /* todo: use --form-element-* directly in elements */
-    --button-text-color: var(--form-element-text-color);
-    --button-primary-bg-color: var(--form-element-primary-color);
-    --button-primary-color: var(--form-element-text-color);
-    --button-secondary-bg-color: var(--form-element-secondary-color);
-    --button-warning-bg-color: var(--form-element-error-color);
-
-    /* input colors */
-    /* todo: use --form-element-* directly in elements */
-    --checkbox-text-color: var(--form-element-text-color);
-    --checkbox-bg-color: var(--form-element-primary-color);
-    --checkbox-check-color: var(--form-element-text-color);
-
-    /* dropdown colors */
-    /* todo: use --form-element-* directly in elements */
-    --dropdown-text-color: var(--form-element-text-color);
-    --dropdown-label-color: var(--form-element-label-color);
-    --dropdown-error-color: var(--form-element-error-color);
-    --dropdown-focus-color: var(--form-element-primary-color);
-    --dropdown-bg-color: var(--form-element-bg-color);
-    --dropdown-border-color: var(--form-element-border-color);
+    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-label-color: var(--app-text-secondary-color);
+    --form-element-primary-color: var(--app-accent-color);
+    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
+    --form-element-error-color: var(--app-error-color);
+    --form-element-icon-color: var(--app-icon-hover-color);
 
     /* toggle colors */
-    --toggle-bg-color: rgb(51, 51, 51);
-    --toggle-thumb-color: rgb(211, 215, 207);
-    --toggle-checked-bg-color: var(--form-element-primary-color);
+    --toggle-bg-color: var(--app-border-color);
+    --toggle-thumb-color: var(--app-text-color);
+    --toggle-checked-bg-color: var(--app-accent-color);
 
     /* cmdstrcode colors */
-    --cmdstrcode-bg-color: rgb(0, 0, 0);
-    --cmdstrcode-text-color: rgb(211, 215, 207);
+    --cmdstrcode-text-color: var(--app-text-color);
 
     /* markdown colors */
     --markdown-bg-color: rgb(35, 35, 35);
@@ -136,29 +114,29 @@
 
     /* status(remote) colors */
     /* todo: all status colors must be unified */
-    --status-connected-color: rgb(70, 167, 88);
-    --status-connecting-color: rgb(245, 217, 10);
-    --status-error-color: rgb(229, 77, 46);
-    --status-disconnected-color: rgb(195, 200, 194);
+    --status-connected-color: var(--app-success-color);
+    --status-connecting-color: var(--app-warning-color);
+    --status-error-color: var(--app-error-color);
+    --status-disconnected-color: var(--app-text-secondary-color);
 
     /* status indicator colors */
     /* todo: all status colors must be unified */
-    --status-indicator-color: rgb(211, 215, 207);
-    --status-indicator-error: rgb(204, 0, 0);
-    --status-indicator-success: rgb(78, 154, 6);
+    --status-indicator-color: var(--app-text-color);
+    --status-indicator-error: var(--status-error-color);
+    --status-indicator-success: var(--status-connected-color);
 
     /* status(version) colors */
     /* todo: all status colors must be unified */
-    --status-outdated-color: rgb(196, 160, 0);
-    --status-updated-color: rgb(78, 154, 6);
+    --status-outdated-color: var(--status-connecting-color);
+    --status-updated-color: var(--status-connected-color);
 
     /* term status colors */
     /* todo: all status colors must be unified */
-    --term-error-color: rgb(204, 0, 0);
-    --term-warning-color: rgb(196, 160, 0);
+    --term-error-color: var(--status-error-color);
+    --term-warning-color: var(--status-connecting-color);
 
     /* hotkey colors */
-    --hotkey-text-color: rgb(195, 200, 194);
+    --hotkey-text-color: var(--app-text-secondary-color);
 
     /* sidebar colors */
     --sidebar-highlight-color: rgba(241, 246, 243, 0.08);
@@ -176,10 +154,10 @@
     --line-svg-hover-fill-color: #eceeec;
     --line-selected-border-color: rgb(193, 195, 193);
     --line-separator-color: rgb(126, 126, 126);
-    --line-error-color: #cc0000;
-    --line-warning-color: #ffa500;
+    --line-error-color: var(--app-error-color);
+    --line-warning-color: var(--app-warning-color);
     --line-base-soft-blue-color: #729fcf;
-    --line-active-border-color: rgb(97, 158, 72);
+    --line-active-border-color: var(--app-accent-color);
     --line-selected-bg-color: rgba(255, 255, 255, 0.05);
     --line-selected-border-left-color: #777777;
     --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
@@ -190,12 +168,12 @@
     --line-meta-user-color: rgba(140, 184, 232);
     --line-svg-color: rgba(236, 238, 236, 0.6);
     --line-svg-hover-color: rgba(236, 238, 236, 1);
-    --line-status-success-fill: rgb(88, 193, 66);
-    --line-status-error-fill: #cc0000;
-    --line-status-warning-fill: #ffa500;
+    --line-status-success-fill: var(--app-success-color);
+    --line-status-error-fill: var(--app-error-color);
+    --line-status-warning-fill: var(--app-warning-color);
     --line-actions-inactive-color: rgba(255, 255, 255, 0.5);
     --line-actions-active-color: rgba(255, 255, 255, 1);
-    --line-actions-bg-color: rgba(21, 23, 21, 1);
+    --line-actions-bg-color: rgba(255, 255, 255, 0.15);
 
     /* view colors */
     /* todo: bookmarks is a view, colors must be unified with --view* colors */
@@ -205,13 +183,13 @@
     --bookmarks-control-hover-color: rgb(255, 255, 255);
 
     /* view colors */
-    --view-error-color: rgb(204, 0, 0);
-    --view-text-color: rgb(195, 200, 194);
+    --view-error-color: var(--app-error-color);
+    --view-text-color: var(--app-text-color);
 
     /* table colors */
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
-    --table-thead-border-bottom-color: var(--table-border-color);
+    --table-thead-bright-border-color: #ccc;
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
@@ -242,6 +220,4 @@
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
     --logo-button-hover-bg-color: #1e1e1e;
-
-    --xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
 }

public/themes/light.css

@@ -2,10 +2,13 @@
    SPDX-License-Identifier: Apache-2.0 */
 
 @import "./default.css";
+@import "./term-default.css";
 @import "./term-light.css";
 
 :root {
     --app-bg-color: #fefefe;
+    --app-accent-color: rgb(75, 166, 57);
+    --app-accent-bg-color: rgba(75, 166, 57, 0.2);
     --app-text-color: #000;
     --app-text-primary-color: rgb(0, 0, 0, 0.9);
     --app-text-secondary-color: rgb(0, 0, 0, 0.7);
@@ -14,6 +17,7 @@
     --app-panel-bg-color-dev: #e0e0e0;
     --app-icon-color: rgb(80, 80, 80);
     --app-icon-hover-color: rgb(100, 100, 100);
+    --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
     --input-bg-color: #eeeeee;
 
@@ -42,8 +46,12 @@
     --form-element-bg-color: var(--app-bg-color);
     --form-element-text-color: var(--app-text-color);
     --form-element-label-color: rgba(0, 0, 0, 0.6);
-    --form-element-secondary-color: rgba(255, 255, 255, 0.09);
+    --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);
+    --form-element-disabled-text-color: #b7b7b7;
+    --form-element-placeholder-color: #b7b7b7;
+
+    --markdown-bg-color: rgb(0, 0, 0, 0.1);
 
     /* modal colors */
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
@@ -53,18 +61,17 @@
     --cmdinput-textarea-border-color: var(--form-element-border-color);
 
     /* scroll colors */
-    --scrollbar-background-color: rgba(0, 0, 0, 0.3);
-    --scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
-    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
-
-    /* cmdstrcode colors */
-    --cmdstrcode-bg-color: var(--term-black);
-    --cmdstrcode-text-color: var(--term-white);
+    --scrollbar-background-color: var(--app-bg-color);
+    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
 
     /* line color */
-    --line-actions-bg-color: rgba(0, 0, 0, 0.4);
+    --line-actions-bg-color: rgba(0, 0, 0, 0.1);
+    --line-actions-inactive-color: rgba(0, 0, 0, 0.3);
+    --line-actions-active-color: rgba(0, 0, 0, 1);
+
+    /* toggle colors */
+    --toggle-thumb-color: var(--app-bg-color);
 
     --logo-button-hover-bg-color: #f0f0f0;
-
-    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
 }

public/themes/term-default.css

@@ -3,7 +3,7 @@
 
 :root {
     /* 
-     * term colors (16 + 2) form the base terminal theme 
+     * term colors (16 + 5) form the base terminal theme 
      * for consistency these colors should be used by plugins/applications
      */
     --term-black: #000000;
@@ -11,9 +11,9 @@
     --term-green: #4e9a06;
     --term-yellow: #c4a000;
     --term-blue: #3465a4;
-    --term-magenta: #75507b;
+    --term-magenta: #bc3fbc;
     --term-cyan: #06989a;
-    --term-white: #d3d7cf;
+    --term-white: #d0d0d0;
     --term-bright-black: #555753;
     --term-bright-red: #ef2929;
     --term-bright-green: #58c142;
@@ -21,10 +21,11 @@
     --term-bright-blue: #32afff;
     --term-bright-magenta: #ad7fa8;
     --term-bright-cyan: #34e2e2;
-    --term-bright-white: #ffffff;
+    --term-bright-white: #e7e7e7;
 
     --term-gray: #8b918a; /* not an official terminal color */
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
+    --term-selection-background: #ffffff40;
 }

public/themes/term-light.css

@@ -5,7 +5,6 @@
     /* term colors */
     --term-foreground: #000000;
     --term-background: #fefefe;
-    --term-black: #fefefe;
-    --term-white: #000000;
     --term-cmdtext: #000000;
+    --term-selection-background: #00000018;
 }

src/app/app.less

@@ -12,7 +12,7 @@ body {
 
 body {
     &.is-dev .sidebar {
-        background-color: var(--app-panel-bg-color-dev);
+        --app-panel-bg-color: var(--app-panel-bg-color-dev);
     }
 }
 
@@ -210,10 +210,10 @@ svg.icon {
 .dropdown,
 .button {
     display: inline-block;
-    border: 1px solid var(--button-secondary-bg-color) !important;
+    border: 1px solid var(--form-element-secondary-color) !important;
     border-radius: 5px;
     cursor: pointer;
-    background-color: var(--button-secondary-bg-color) !important;
+    background-color: var(--form-element-secondary-color) !important;
     color: var(--app-accent-color);
     .hoverEffect;
     &:hover {
@@ -221,7 +221,7 @@ svg.icon {
     }
     &.disabled {
         color: var(--app-text-color);
-        background: var(--button-secondary-bg-color);
+        background: var(--form-element-secondary-color);
         opacity: 0.5;
         cursor: initial;
     }
@@ -382,9 +382,9 @@ a.a-block {
     }
 
     &.connect-button {
-        color: var(--button-primary-bg-color);
+        color: var(--form-element-primary-color);
         &:hover {
-            color: var(--button-primary-bg-color);
+            color: var(--form-element-primary-color);
         }
     }
 
@@ -396,9 +396,9 @@ a.a-block {
     }
 
     &.success-button {
-        color: var(--button-primary-bg-color);
+        color: var(--form-element-primary-color);
         &:hover {
-            color: var(--button-primary-bg-color);
+            color: var(--form-element-primary-color);
         }
     }
 

src/app/app.tsx

@@ -111,11 +111,12 @@ class App extends React.Component<{}, {}> {
         // used to force a full reload of the application
         const renderVersion = GlobalModel.renderVersion.get();
         const sidebarCollapsed = GlobalModel.mainSidebarModel.getCollapsed();
+        const lightDarkClass = GlobalModel.isThemeDark() ? "is-dark" : "is-light";
         return (
             <div
                 key={"version-" + renderVersion}
                 id="main"
-                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed })}
+                className={cn("platform-" + platform, { "sidebar-collapsed": sidebarCollapsed }, lightDarkClass)}
                 onContextMenu={this.handleContextMenu}
             >
                 <If condition={sidebarCollapsed}>

src/app/assets/icons/globe.svg

@@ -1,5 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="globe">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" fill="#C3C8C2"/>
-</g>
-</svg>
+    <g id="globe">
+        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+            d="M5.51561 7.24988C5.58926 5.49464 5.91878 3.94637 6.3934 2.81642C6.66453 2.17096 6.96822 1.69729 7.26714 1.39629C7.56327 1.0981 7.81035 1.00977 8.00003 1.00977C8.1897 1.00977 8.43678 1.0981 8.73291 1.39629C9.03183 1.69729 9.33553 2.17096 9.60665 2.81642C10.0813 3.94637 10.4108 5.49464 10.4844 7.24988H5.51561ZM4.01441 7.24988H1.03973C1.31693 4.64752 3.02019 2.47128 5.35297 1.51768C5.22994 1.74443 5.1158 1.98471 5.01045 2.23552C4.44737 3.57606 4.0887 5.32893 4.01441 7.24988ZM10.6471 1.51768C10.7701 1.74443 10.8842 1.98471 10.9896 2.23552C11.5527 3.57606 11.9114 5.32893 11.9856 7.24988H14.9603C14.6831 4.64752 12.9799 2.47128 10.6471 1.51768ZM10.4842 8.74988C10.4101 10.5028 10.0808 12.049 9.60665 13.1777C9.33553 13.8232 9.03183 14.2968 8.73291 14.5978C8.43678 14.896 8.1897 14.9844 8.00003 14.9844C7.81035 14.9844 7.56327 14.896 7.26714 14.5978C6.96822 14.2968 6.66453 13.8232 6.3934 13.1777C5.91928 12.049 5.58997 10.5028 5.51585 8.74988H10.4842ZM11.9854 8.74988H14.9603C14.683 11.3537 12.978 13.5309 10.6432 14.4837C10.7677 14.2548 10.8831 14.0121 10.9896 13.7586C11.5521 12.4194 11.9107 10.6686 11.9854 8.74988ZM5.35689 14.4837C3.0221 13.5309 1.31708 11.3537 1.03973 8.74988H4.01463C4.0894 10.6686 4.44792 12.4194 5.01045 13.7586C5.11692 14.0121 5.23237 14.2548 5.35689 14.4837Z" />
+    </g>
+</svg>