Change "Go to Saleor Cloud" copy and icon (#4721)

* Change back icon to cloud and update copy

* Add changeset

* Optimize icon

* Update tests

.changeset/cool-lizards-compete.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Replace back icon with cloud one in sidebar return to cloud link, update copy to just Saleor Cloud

locale/defaultMessages.json

@@ -2380,9 +2380,6 @@
     "context": "delete app",
     "string": "Deleting {name}, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace. Are you sure you want to delete the app?"
   },
-  "EXqb2l": {
-    "string": "Go to Saleor Cloud"
-  },
   "EY/jqC": {
     "string": "Last delivery attempt:"
   },
@@ -2989,6 +2986,9 @@
     "context": "description",
     "string": "Use Saleor Cloud to access Saleor Apps"
   },
+  "IF2KbT": {
+    "string": "Saleor Cloud"
+  },
   "IFWHn0": {
     "context": "error message",
     "string": "Billing address is not set"

src/components/Sidebar/Sidebar.test.tsx

@@ -63,7 +63,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
 };
 
 describe("Sidebar", () => {
-  it('shouldd render "Go to Saleor Cloud" link when is cloud instance', () => {
+  it('shouldd render "Saleor Cloud" link when is cloud instance', () => {
     // Arrange
     (useCloud as jest.Mock).mockImplementation(() => ({
       isAuthenticatedViaCloud: true,
@@ -73,10 +73,10 @@ describe("Sidebar", () => {
     render(<Sidebar />, { wrapper: Wrapper });
 
     // Assert
-    expect(screen.getByText("Go to Saleor Cloud")).toBeInTheDocument();
+    expect(screen.getByText("Saleor Cloud")).toBeInTheDocument();
   });
 
-  it('shouldd not render "Go to Saleor Cloud" link when is not cloud instance', () => {
+  it('shouldd not render "Saleor Cloud" link when is not cloud instance', () => {
     // Arrange
     (useCloud as jest.Mock).mockImplementation(() => ({
       isAuthenticatedViaCloud: false,
@@ -86,7 +86,7 @@ describe("Sidebar", () => {
     render(<Sidebar />, { wrapper: Wrapper });
 
     // Assert
-    expect(screen.queryByText("Go to Saleor Cloud")).not.toBeInTheDocument();
+    expect(screen.queryByText("Saleor Cloud")).not.toBeInTheDocument();
   });
 
   it("should render keyboard shortcuts", () => {

src/components/Sidebar/menu/EnvironmentLink.tsx

@@ -1,4 +1,5 @@
-import { ArrowLeftIcon, Box, Text } from "@saleor/macaw-ui-next";
+import { Cloud } from "@dashboard/icons/Cloud";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -12,20 +13,22 @@ export const EnvironmentLink = () => {
       as="a"
       href={envLink}
       target="__blank"
+      color="default2"
       gap={3}
       display="flex"
       data-test-id="menu-item-label-env"
       alignItems="center"
     >
-      <ArrowLeftIcon color="default2" size="medium" />
+      <Box __width={20} __height={20}>
+        <Cloud />
+      </Box>
       <Text
         size="small"
         variant="bodyEmp"
         fontStyle="italic"
-        color="default2"
         fontSize="captionSmall"
       >
-        <FormattedMessage defaultMessage="Go to Saleor Cloud" id="EXqb2l" />
+        <FormattedMessage defaultMessage="Saleor Cloud" id="IF2KbT" />
       </Text>
     </Box>
   );

src/icons/Cloud.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const Cloud = () => (
+  <svg
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    data-macaw-ui-candidate
+  >
+    <g clipPath="url(#a)">
+      <path
+        d="M15 8.333h-1.05a6.667 6.667 0 1 0-6.45 8.334H15a4.167 4.167 0 1 0 0-8.334Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);